diff --git a/website/package.json b/website/package.json
index e40a07a033d61aa39118cc1e532cbe831585b64f..89c51cf5432422b651fc5d25c82ceb6a0625703d 100644
--- a/website/package.json
+++ b/website/package.json
@@ -5,9 +5,9 @@
"main": "src/main.js",
"scripts": {
"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-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",
"author": "Kuadrado",
@@ -22,4 +22,4 @@
"sass": "^1.32.0",
"simple-browser-js-bundler": "^0.1.1"
}
-}
+}
\ No newline at end of file
diff --git a/website/src/pages/education/components/edu-article.js b/website/src/pages/education/components/edu-article.js
new file mode 100644
index 0000000000000000000000000000000000000000..ab035167a8d5f31ec639d9b53731ba04cb2a4df3
--- /dev/null
+++ b/website/src/pages/education/components/edu-article.js
@@ -0,0 +1,84 @@
+"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
diff --git a/website/src/pages/education/components/edu-articles.js b/website/src/pages/education/components/edu-articles.js
new file mode 100644
index 0000000000000000000000000000000000000000..0c2ba4ede0f4ef12ec8349eea87a9538f085580b
--- /dev/null
+++ b/website/src/pages/education/components/edu-articles.js
@@ -0,0 +1,60 @@
+"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
diff --git a/website/src/pages/education/education.js b/website/src/pages/education/education.js
index efd67647628720b8b56333c6fda7f27620280728..ea04c92fc6a77ecb5ca8fae6357eb96702481daa 100644
--- a/website/src/pages/education/education.js
+++ b/website/src/pages/education/education.js
@@ -3,6 +3,7 @@
const { images_url } = require("../../../constants");
const WebPage = require("../../lib/web-page");
const translator = require("ks-cheap-translator");
+const EduArticles = require("./components/edu-articles");
const t = translator.trad.bind(translator);
const EDU_THEMES = [
@@ -79,7 +80,6 @@ class EducationPage extends WebPage {
},
{
tag: "section",
- class: "bg-dark",
contents: [
{
tag: "div",
@@ -104,55 +104,8 @@ class EducationPage extends WebPage {
},
]
},
- {
- tag: "section",
- 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",
- },
- ]
- },
- ]
- }
- ]
- }
- ]
- }
- ]
-
- },
+ { tag: "h2", class: "edu-section-title page-contents-center", contents: t("Programme XXXX", { date: "2022" }) },
+ new EduArticles().render(),
],
};
}
diff --git a/website/src/pages/education/education.scss b/website/src/pages/education/education.scss
index d284dfc40d3e47226193841d2862e08ecfb48887..68712327924f4c950f1560fd1bde6bbffbed7202 100644
--- a/website/src/pages/education/education.scss
+++ b/website/src/pages/education/education.scss
@@ -1,177 +1,247 @@
#education-page {
- h3 {
- &.big {
- font-size: 30px;
- }
- }
- .title-banner {
- display: flex;
- justify-content: flex-end;
- flex-direction: column;
- height: 20vw;
- min-height: 250px;
- background-image: url("/assets/images/popularization_banner.png");
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
- h2 {
- color: white;
- font-size: 2.5em;
- margin: 40px;
- text-shadow: 0 0 6px #0003;
- }
- }
- .special-announcement {
- background-color: $yellow_2;
- .page-contents-center {
- padding: 0 20px;
- @include flex-center;
- p {
- color: $dark_3;
- font-size: 20px;
- font-weight: 600;
- margin: 0;
- padding: 40px 0;
- }
- }
- }
-
- .edu-themes {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 50px;
- font-family: monospace;
- padding: 70px 0;
- .edu-theme {
- display: grid;
- grid-template-columns: auto 1fr;
- * {
- border-style: dashed;
- border-color: $green;
- border-width: 0 0 0 0;
- }
- h3 {
- color: $green;
- grid-row: 1;
- margin: 0;
- padding: 10px;
- display: flex;
- align-items: center;
- border-width: 0 0 0 1px;
- }
- img {
- width: 100%;
- grid-row: 1 / span 2;
- border-width: 1px 0 1px 1px;
- }
- p {
- text-align: justify;
- color: $blue_3;
- * {
- color: $blue_3;
- }
- grid-row: 2;
- margin: 0;
- padding: 10px 30px 0 10px;
- border-width: 1px 1px 1px 0;
- }
- }
- }
-
- .practical-info {
- padding: 50px 0;
- .page-contents-center {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 50px;
- .info-block {
- display: grid;
- grid-template-rows: auto 1fr;
- .info-title {
- color: $blue_2;
- margin: 0;
- border-bottom: 1px dashed $light_2;
- border-left: 1px dashed $light_2;
- padding: 10px;
- }
- .info-body {
- margin: 0;
- padding: 20px 10px;
- border-right: 1px dashed $light_2;
- border-bottom: 1px dashed $light_2;
- }
- ul {
- display: flex;
- flex-direction: column;
- gap: 5px;
- li:not(.fullwidth) {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 10px;
- }
- &.tabled {
- li {
- span {
- padding: 3px 0;
- &:first-child {
- font-weight: bold;
- color: $medium_grey;
- }
- &:last-child {
- color: $blue_2;
- }
- }
- }
- }
- }
- }
- }
- }
-
- @media screen and (max-width: 1200px) {
- .edu-themes {
- grid-template-columns: 1fr;
- gap: 30px;
- padding: 70px 0;
- }
- }
-
- @media screen and (max-width: $screen_m) {
- .practical-info {
- .page-contents-center {
- grid-template-columns: 1fr;
- gap: 30px;
- .info-block {
- .info-title {
- border-top: 1px dashed $light_2;
- }
- .info-body {
- border-bottom: none;
- }
- }
- }
- }
- }
-
- @media screen and (max-width: $screen_s) {
- .edu-themes {
- .edu-theme {
- h3 {
- border-width: 0 0 1px 1px;
- }
- img {
- max-width: 150px;
- height: auto;
- grid-row: 1;
- border-width: 1px 0 0 1px;
- }
- p {
- grid-row: 2;
- grid-column: 1 / span 2;
- padding: 20px 10px 30px 10px;
- border-width: 0 1px 1px 1px;
- }
- }
- }
- }
+ h3 {
+ &.big {
+ font-size: 30px;
+ }
+ }
+ .title-banner {
+ display: flex;
+ justify-content: flex-end;
+ flex-direction: column;
+ height: 20vw;
+ min-height: 250px;
+ background-image: url("/assets/images/popularization_banner.png");
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ h2 {
+ color: white;
+ font-size: 2.5em;
+ margin: 40px;
+ text-shadow: 0 0 6px #0003;
+ }
+ }
+ .special-announcement {
+ background-color: $yellow_2;
+ .page-contents-center {
+ padding: 0 20px;
+ @include flex-center;
+ p {
+ color: $dark_3;
+ font-size: 20px;
+ font-weight: 600;
+ margin: 0;
+ padding: 40px 0;
+ }
+ }
+ }
+
+ .edu-section-title {
+ color: $blue_2;
+ margin: 40px auto;
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+ gap: 15px;
+ &::after {
+ content: "";
+ display: block;
+ flex: 1;
+ border: 1px solid;
+ }
+ }
+
+ .edu-themes {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 50px;
+ font-family: monospace;
+ padding: 40px 0;
+ .edu-theme {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ h3 {
+ color: $blue_2;
+ grid-row: 1;
+ margin: 0;
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ }
+ img {
+ width: 100%;
+ grid-row: 1 / span 2;
+ }
+ p {
+ text-align: justify;
+ grid-row: 2;
+ margin: 0;
+ padding: 10px 30px 0 10px;
+ }
+ }
+ }
+
+ .edu-articles {
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ margin: 20px auto;
+ article.edu-article {
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ gap: 10px 30px;
+ ul {
+ list-style-type: unset;
+ margin-left: 30px;
+ }
+
+ .edu-art-image {
+ padding: 20px;
+ background-color: black;
+ grid-column: 1;
+ grid-row: 1 / span 3;
+ @include flex-center;
+ width: 150px;
+ height: 150px;
+ overflow: hidden;
+ border-radius: 100%;
+ img {
+ max-width: 100%;
+ max-height: 400px;
+ }
+ }
+
+ .edu-art-title {
+ grid-column: 2 / span 3;
+ color: $light_2;
+ margin: 0;
+ padding: 10px;
+ }
+
+ .edu-art-subtitle {
+ grid-column: 2 / span 3;
+ margin: 10px;
+ color: $medium_grey;
+ }
+
+ .edu-art-description {
+ grid-column: 2;
+ text-align: justify;
+ margin: 10px;
+ }
+
+ .edu-art-carousel {
+ grid-column: 3;
+ width: 30vw;
+ max-width: 500px;
+ .image-carousel {
+ width: 100%;
+ height: 20vw;
+ max-height: 400px;
+ img {
+ width: 100%;
+ }
+ }
+ }
+
+ .edu-art-details {
+ grid-column: 1 / span 3;
+ }
+
+ @media screen and (max-width: 1050px) {
+ grid-template-columns: auto 1fr;
+ .edu-art-title {
+ grid-column: 2;
+ }
+ .edu-art-image {
+ grid-row: 1 / span 2;
+ }
+ .edu-art-carousel {
+ width: 100%;
+ max-width: unset;
+ grid-column: 1 / span 2;
+ grid-row: 3;
+ .image-carousel {
+ height: 40vw;
+ max-height: 400px;
+ }
+ }
+ .edu-art-subtitle {
+ grid-column: 2;
+ grid-row: 2;
+ }
+
+ .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;
+ }
+ }
+ }
+ }
}
diff --git a/website/src/style.scss b/website/src/style.scss
index e3ca9c780a5ec05aec8bccf62914ffa7717c492b..d523c3b1c5cf1ad8d95e59a0db629dc2e449f9c8 100644
--- a/website/src/style.scss
+++ b/website/src/style.scss
@@ -413,6 +413,7 @@ main {
label {
font-weight: bold;
color: $medium_grey;
+ white-space: nowrap;
}
.detail-value {
text-align: right;