Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit f18e4330 authored by Pierre Jarriges's avatar Pierre Jarriges
Browse files

software article view

parent 5642c622
No related branches found
No related tags found
1 merge request!1Dev
...@@ -28,12 +28,21 @@ class ArticleList { ...@@ -28,12 +28,21 @@ class ArticleList {
return { return {
tag: "ul", tag: "ul",
id: "browse-articles-results", id: "browse-articles-results",
style_rules: {
maxHeight: "300px",
overflowY: "scroll",
},
contents: this.state.articles.map(art => { contents: this.state.articles.map(art => {
return { return {
tag: "li", tag: "li",
style_rules: { display: "grid", gridTemplateColumns: "auto auto 100px 100px", gap: "10px", alignItems: "center" }, style_rules: {
display: "grid",
gridTemplateColumns: "auto auto 100px 100px",
gap: "10px",
alignItems: "center"
},
contents: [ contents: [
{ tag: "span", contents: `[${art.locale}] <b>${art.title}</b> - ${art._id.$oid}` }, { tag: "span", contents: `[${art.locale}] [${art.category}] <b>${art.title}</b> - ${art._id.$oid}` },
art.with_static_view ? { art.with_static_view ? {
tag: "a", tag: "a",
href: art.metadata.view_uri, href: art.metadata.view_uri,
......
...@@ -40,6 +40,7 @@ class UpdateArticleForm { ...@@ -40,6 +40,7 @@ class UpdateArticleForm {
alert(res); alert(res);
this.reset(); this.reset();
this.refresh(); this.refresh();
this.articles_list.fetch_list(); // bof..
}) })
.catch(err => alert(err)) .catch(err => alert(err))
} }
...@@ -61,7 +62,7 @@ class UpdateArticleForm { ...@@ -61,7 +62,7 @@ class UpdateArticleForm {
data: this.state.article_to_update, data: this.state.article_to_update,
on_article_sent: () => { on_article_sent: () => {
this.reset(); this.reset();
this.articles_list.refresh_list(); this.articles_list.fetch_list();
} }
}).render()] }).render()]
: [] : []
...@@ -80,7 +81,6 @@ class UpdateArticleForm { ...@@ -80,7 +81,6 @@ class UpdateArticleForm {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
gap: "20px", gap: "20px",
maxWidth: "1200px",
}, },
contents: [ contents: [
this.articles_list.render(), this.articles_list.render(),
......
...@@ -32,22 +32,34 @@ class SoftwareArticle { ...@@ -32,22 +32,34 @@ class SoftwareArticle {
class: "software-article page-contents-center", class: "software-article page-contents-center",
contents: [ contents: [
{ {
tag: "img", tag: "div",
src: `${images_url}/${logo}` class: "article-image",
}, contents: [
{ {
tag: "h1", tag: "img",
contents: title, src: `${images_url}/${logo}`
class: "header-text h1", },
]
}, },
{ {
tag: "h2", tag: "div",
contents: subtitle, class: "article-titles",
class: "header-text h2", contents: [
{
tag: "h1",
contents: title,
class: "article-title",
},
{
tag: "h2",
contents: subtitle,
class: "article-subtitle",
},
]
}, },
{ {
tag: "div", tag: "div",
id: "article-contents", class: "article-body",
contents: [ contents: [
{ {
tag: "div", tag: "div",
...@@ -59,11 +71,22 @@ class SoftwareArticle { ...@@ -59,11 +71,22 @@ class SoftwareArticle {
} }
], ],
}, },
]
},
{
tag: "div",
class: "article-more",
contents: [
trad_ready && screens.length > 0 && new ImageCarousel({ images: screens.map(img => `${images_url}/${img}`) }).render(), trad_ready && screens.length > 0 && new ImageCarousel({ images: screens.map(img => `${images_url}/${img}`) }).render(),
details.length > 0 && { details.length > 0 && {
tag: "div", tag: "div",
class: "article-details", class: "article-details",
contents: [ contents: [
{
tag: "h3",
contents: t("Details")
},
{ {
tag: "ul", tag: "ul",
class: "details-list", class: "details-list",
...@@ -85,8 +108,7 @@ class SoftwareArticle { ...@@ -85,8 +108,7 @@ class SoftwareArticle {
], ],
}, },
] ]
}, }
], ],
}; };
......
...@@ -216,6 +216,176 @@ ...@@ -216,6 +216,176 @@
} }
} }
} }
&.software-article {
display: grid;
grid-template-columns: 400px auto;
padding: 20px;
grid-auto-rows: minmax(min-content, max-content);
.article-image {
width: 350px;
height: 350px;
@include flex-center;
background-color: black;
border-radius: 100%;
overflow: hidden;
grid-row: 1 / span 2;
img {
padding: 40px;
max-height: 350px;
}
}
.article-titles {
grid-row: 1;
grid-column: 2;
.article-title {
font-size: 40px;
margin: 20px 0;
font-weight: 900;
color: $medium_grey;
}
.article-subtitle {
font-size: 20px;
color: $medium_grey;
}
}
.article-body {
grid-row: 2;
grid-column: 2;
font-size: 17px;
p {
text-align: justify;
max-width: 600px;
}
}
.article-more {
grid-row: 3;
grid-column: 1/span 2;
margin: 40px 0;
display: grid;
grid-template-columns: 600px auto;
gap: 20px;
.image-carousel {
height: 400px;
}
.article-details {
h3 {
margin: 0;
color: $medium_grey;
}
.details-list {
margin: 20px 0;
.detail {
display: grid;
grid-template-columns: 1fr auto;
gap: 15px;
padding: 10px 0;
border-bottom: 1px solid #ddd;
.detail-value {
text-align: right;
}
}
}
}
}
@media screen and (max-width: 1100px) {
grid-template-columns: 300px auto;
.article-image {
width: 250px;
height: 250px;
img {
padding: 40px;
max-height: 250px;
}
}
.article-body {
grid-row: 2;
grid-column: 2;
font-size: 17px;
p {
max-width: 100%;
}
}
.article-more {
grid-template-columns: 1fr;
.image-carousel {
grid-row: 1;
height: 400px;
}
}
}
@media screen and (max-width: $screen_l) {
grid-template-columns: 300px auto;
gap: 20px;
.article-image {
grid-row: 1;
}
.article-titles {
.article-title {
font-size: 30px;
}
.article-subtitle {
font-size: 18px;
}
}
.article-body {
grid-column: 1/span 2;
p {
width: 100%;
}
}
}
@media screen and (max-width: $screen_m) {
grid-template-columns: 120px auto;
.article-image {
width: 120px;
height: 120px;
img {
padding: 10px;
max-height: 150px;
}
}
.article-more {
.image-carousel {
height: 300px;
}
}
}
}
} }
} }
\ No newline at end of file
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
gap: 20px; gap: 20px;
padding: 20px; padding: 20px;
border: 1px solid #eee; border: 1px solid #ddd;
.software-title { .software-title {
grid-column: 2; grid-column: 2;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment