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 f9fb6fb1 authored by Pierre Jarriges's avatar Pierre Jarriges
Browse files

education articles

parent e872af79
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
website/package.json
+ 3
− 3
View file @ f9fb6fb1
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
"main": "src/main.js", "main": "src/main.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"style-watch": "sass --watch ./src/style.scss ./public/style/style.css", "style-watch": "sass --watch ./src/style.scss ../public/style/style.css",
"build": "node build.js && sass ./src/style.scss ../public/style/style.css", "build": "node build.js && sass ./src/style.scss ../public/style/style.css",
"build-prod": "node build.js prod && sass ./src/style.scss ./public/style/style.css --style=compressed" "build-prod": "node build.js prod && sass ./src/style.scss ../public/style/style.css --style=compressed"
}, },
"repository": "https://gitlab.com/peter_rabbit/kuadrado-website", "repository": "https://gitlab.com/peter_rabbit/kuadrado-website",
"author": "Kuadrado", "author": "Kuadrado",
...@@ -22,4 +22,4 @@ ...@@ -22,4 +22,4 @@
"sass": "^1.32.0", "sass": "^1.32.0",
"simple-browser-js-bundler": "^0.1.1" "simple-browser-js-bundler": "^0.1.1"
} }
} }
\ No newline at end of file
website/src/pages/education/components/edu-article.js 0 → 100644
+ 84
− 0
View file @ f9fb6fb1
"use strict";
const { images_url } = require("../../../../constants");
const ImageCarousel = require("../../../generic-components/image-carousel");
const { getArticleBody } = require("../../../lib/article-utils");
class EduArticle {
constructor(props) {
this.props = props;
}
render() {
const { title, body, subtitle, images, details = [] } = this.props;
return {
tag: "article",
class: "edu-article",
typeof: "Article",
contents: [
{
tag: "h2",
class: "edu-art-title",
contents: title,
property: "name",
},
{
tag: "div", class: "edu-art-image",
contents: [
{
tag: "img", src: `${images_url}/${images[0]}`
}
]
},
{
tag: "h3",
class: "edu-art-subtitle",
contents: subtitle,
property: "alternativeHeadline",
},
{
tag: "div",
class: "edu-art-description",
contents: getArticleBody(body),
property: "description",
},
images.length > 1 && {
tag: "div", class: "edu-art-carousel", contents: [
new ImageCarousel({ images: images.map(img => `${images_url}/${img}`) }).render()
]
},
details.length > 0 && {
tag: "div",
class: "article-details edu-art-details",
contents: [
{
tag: "h2",
contents: "Details",
},
{
tag: "ul",
class: "details-list",
contents: details.map(detail => {
return {
tag: "li",
class: "detail",
contents: [
{ tag: "label", contents: detail.label },
{
tag: "div",
class: "detail-value",
contents: detail.value
},
],
};
}),
},
],
},
],
};
}
}
module.exports = EduArticle;
\ No newline at end of file
website/src/pages/education/components/edu-articles.js 0 → 100644
+ 60
− 0
View file @ f9fb6fb1
"use strict";
const { loadArticles } = require("../../../lib/article-utils");
const translator = require("ks-cheap-translator");
const t = translator.trad.bind(translator);
const EduArticle = require("./edu-article");
class EduArticles {
constructor(props) {
this.props = props;
this.state = {
articles: [],
loaded: false,
};
this.id = "edu-articles-section";
this.loadArticles();
}
loadArticles() {
loadArticles("education", translator.locale)
.then(articles => {
this.state.articles = articles;
})
.catch(e => console.log(e))
.finally(() => {
this.state.loaded = true;
this.refresh()
});
}
renderPlaceholder() {
return {
tag: "article",
class: "placeholder",
contents: [{ tag: "div" }, { tag: "div" }, { tag: "div" }, { tag: "div" }],
};
}
refresh() {
obj2htm.subRender(this.render(), document.getElementById(this.id), {
mode: "replace",
});
}
render() {
const { articles, loaded } = this.state;
return {
tag: "section",
class: "edu-articles page-contents-center",
id: this.id,
contents:
loaded && articles.length > 0
? articles.map(article => new EduArticle({ ...article }).render())
: loaded && articles.length === 0 ? [
{ tag: "p", contents: t("Rien de prévu pour le moment") }
] : [this.renderPlaceholder()],
};
}
}
module.exports = EduArticles;
\ No newline at end of file
website/src/pages/education/education.js
+ 3
− 50
View file @ f9fb6fb1
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
const { images_url } = require("../../../constants"); const { images_url } = require("../../../constants");
const WebPage = require("../../lib/web-page"); const WebPage = require("../../lib/web-page");
const translator = require("ks-cheap-translator"); const translator = require("ks-cheap-translator");
const EduArticles = require("./components/edu-articles");
const t = translator.trad.bind(translator); const t = translator.trad.bind(translator);
const EDU_THEMES = [ const EDU_THEMES = [
...@@ -79,7 +80,6 @@ class EducationPage extends WebPage { ...@@ -79,7 +80,6 @@ class EducationPage extends WebPage {
}, },
{ {
tag: "section", tag: "section",
class: "bg-dark",
contents: [ contents: [
{ {
tag: "div", tag: "div",
...@@ -104,55 +104,8 @@ class EducationPage extends WebPage { ...@@ -104,55 +104,8 @@ class EducationPage extends WebPage {
}, },
] ]
}, },
{ { tag: "h2", class: "edu-section-title page-contents-center", contents: t("Programme XXXX", { date: "2022" }) },
tag: "section", new EduArticles().render(),
class: "practical-info",
contents: [
{
tag: "div",
class: "page-contents-center",
contents: [
{
tag: "div",
class: "info-block",
contents: [
{ tag: "h3", class: "info-title", contents: `${t("Pour s'inscrire ou en savoir plus")} <em>(programme 2022 à définir, plus d'infos bientôt)</em>` },
{
tag: "ul",
class: "info-body",
contents: [
{
tag: "li",
contents: [
{ tag: "span", contents: t("Me contacter") },
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
contents: "contact@kuadrado-software.fr",
}
]
},
{
tag: "li",
contents: [
{ tag: "span", contents: "" },
{
tag: "a",
href: "tel:+33475780872",
contents: "04 75 78 08 72",
property: "telephone",
},
]
},
]
}
]
}
]
}
]
},
], ],
}; };
} }
......
website/src/pages/education/education.scss
+ 245
− 175
View file @ f9fb6fb1
#education-page { #education-page {
h3 { h3 {
&.big { &.big {
font-size: 30px; font-size: 30px;
} }
} }
.title-banner { .title-banner {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
flex-direction: column; flex-direction: column;
height: 20vw; height: 20vw;
min-height: 250px; min-height: 250px;
background-image: url("/assets/images/popularization_banner.png"); background-image: url("/assets/images/popularization_banner.png");
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
h2 { h2 {
color: white; color: white;
font-size: 2.5em; font-size: 2.5em;
margin: 40px; margin: 40px;
text-shadow: 0 0 6px #0003; text-shadow: 0 0 6px #0003;
} }
} }
.special-announcement { .special-announcement {
background-color: $yellow_2; background-color: $yellow_2;
.page-contents-center { .page-contents-center {
padding: 0 20px; padding: 0 20px;
@include flex-center; @include flex-center;
p { p {
color: $dark_3; color: $dark_3;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
padding: 40px 0; padding: 40px 0;
} }
} }
} }
.edu-themes { .edu-section-title {
display: grid; color: $blue_2;
grid-template-columns: 1fr 1fr; margin: 40px auto;
gap: 50px; display: flex;
font-family: monospace; align-items: center;
padding: 70px 0; white-space: nowrap;
.edu-theme { gap: 15px;
display: grid; &::after {
grid-template-columns: auto 1fr; content: "";
* { display: block;
border-style: dashed; flex: 1;
border-color: $green; border: 1px solid;
border-width: 0 0 0 0; }
} }
h3 {
color: $green; .edu-themes {
grid-row: 1; display: grid;
margin: 0; grid-template-columns: 1fr 1fr;
padding: 10px; gap: 50px;
display: flex; font-family: monospace;
align-items: center; padding: 40px 0;
border-width: 0 0 0 1px; .edu-theme {
} display: grid;
img { grid-template-columns: auto 1fr;
width: 100%; h3 {
grid-row: 1 / span 2; color: $blue_2;
border-width: 1px 0 1px 1px; grid-row: 1;
} margin: 0;
p { padding: 10px;
text-align: justify; display: flex;
color: $blue_3; align-items: center;
* { }
color: $blue_3; img {
} width: 100%;
grid-row: 2; grid-row: 1 / span 2;
margin: 0; }
padding: 10px 30px 0 10px; p {
border-width: 1px 1px 1px 0; text-align: justify;
} grid-row: 2;
} margin: 0;
} padding: 10px 30px 0 10px;
}
.practical-info { }
padding: 50px 0; }
.page-contents-center {
display: grid; .edu-articles {
grid-template-columns: 1fr 1fr; display: flex;
gap: 50px; flex-direction: column;
.info-block { gap: 40px;
display: grid; margin: 20px auto;
grid-template-rows: auto 1fr; article.edu-article {
.info-title { display: grid;
color: $blue_2; grid-template-columns: auto 1fr auto;
margin: 0; gap: 10px 30px;
border-bottom: 1px dashed $light_2; ul {
border-left: 1px dashed $light_2; list-style-type: unset;
padding: 10px; margin-left: 30px;
} }
.info-body {
margin: 0; .edu-art-image {
padding: 20px 10px; padding: 20px;
border-right: 1px dashed $light_2; background-color: black;
border-bottom: 1px dashed $light_2; grid-column: 1;
} grid-row: 1 / span 3;
ul { @include flex-center;
display: flex; width: 150px;
flex-direction: column; height: 150px;
gap: 5px; overflow: hidden;
li:not(.fullwidth) { border-radius: 100%;
display: grid; img {
grid-template-columns: 1fr 1fr; max-width: 100%;
gap: 10px; max-height: 400px;
} }
&.tabled { }
li {
span { .edu-art-title {
padding: 3px 0; grid-column: 2 / span 3;
&:first-child { color: $light_2;
font-weight: bold; margin: 0;
color: $medium_grey; padding: 10px;
} }
&:last-child {
color: $blue_2; .edu-art-subtitle {
} grid-column: 2 / span 3;
} margin: 10px;
} color: $medium_grey;
} }
}
} .edu-art-description {
} grid-column: 2;
} text-align: justify;
margin: 10px;
@media screen and (max-width: 1200px) { }
.edu-themes {
grid-template-columns: 1fr; .edu-art-carousel {
gap: 30px; grid-column: 3;
padding: 70px 0; width: 30vw;
} max-width: 500px;
} .image-carousel {
width: 100%;
@media screen and (max-width: $screen_m) { height: 20vw;
.practical-info { max-height: 400px;
.page-contents-center { img {
grid-template-columns: 1fr; width: 100%;
gap: 30px; }
.info-block { }
.info-title { }
border-top: 1px dashed $light_2;
} .edu-art-details {
.info-body { grid-column: 1 / span 3;
border-bottom: none; }
}
} @media screen and (max-width: 1050px) {
} grid-template-columns: auto 1fr;
} .edu-art-title {
} grid-column: 2;
}
@media screen and (max-width: $screen_s) { .edu-art-image {
.edu-themes { grid-row: 1 / span 2;
.edu-theme { }
h3 { .edu-art-carousel {
border-width: 0 0 1px 1px; width: 100%;
} max-width: unset;
img { grid-column: 1 / span 2;
max-width: 150px; grid-row: 3;
height: auto; .image-carousel {
grid-row: 1; height: 40vw;
border-width: 1px 0 0 1px; max-height: 400px;
} }
p { }
grid-row: 2; .edu-art-subtitle {
grid-column: 1 / span 2; grid-column: 2;
padding: 20px 10px 30px 10px; grid-row: 2;
border-width: 0 1px 1px 1px; }
}
} .edu-art-description {
} grid-column: 1 / span 2;
} }
.edu-art-details {
grid-column: 1 / span 2;
}
}
@media screen and (max-width: $screen_l) {
.edu-art-title {
display: flex;
align-items: center;
}
.edu-art-subtitle {
grid-column: 1 / span 2;
}
.edu-art-image {
width: 100px;
height: 100px;
grid-row: 1;
}
// .edu-art-carousel {
// grid-column: 1 / span 2;
// }
}
}
article.placeholder {
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: 100px 100px 200px;
gap: 10px;
margin: 30px;
* {
background-color: $light_0;
flex: 1;
&:first-child {
// image
grid-row: 1 / span 2;
}
&:last-child {
grid-column: 1 / span 2;
}
}
}
}
@media screen and (max-width: 1200px) {
.edu-themes {
grid-template-columns: 1fr;
gap: 30px;
padding: 0;
}
}
@media screen and (max-width: $screen_s) {
.edu-themes {
.edu-theme {
img {
max-width: 150px;
height: auto;
grid-row: 1;
}
p {
grid-row: 2;
grid-column: 1 / span 2;
padding: 20px 10px 30px 10px;
}
}
}
}
} }
website/src/style.scss
+ 1
− 0
View file @ f9fb6fb1
...@@ -413,6 +413,7 @@ main { ...@@ -413,6 +413,7 @@ main {
label { label {
font-weight: bold; font-weight: bold;
color: $medium_grey; color: $medium_grey;
white-space: nowrap;
} }
.detail-value { .detail-value {
text-align: right; text-align: right;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service