From 46fb6c64874080feef3a0fca787bb0431821c53e Mon Sep 17 00:00:00 2001
From: peter_rabbit <pierrejarriges@gmail.com>
Date: Mon, 1 Mar 2021 13:18:20 +0100
Subject: [PATCH] news:article rdb podcast

---
 .../go-game-studio-club.txt                   |  6 +-
 public/articles/news/index.json               |  2 +-
 .../news/rdb_27_02_2021/rdb_27_02_2021.json   |  6 ++
 .../news/rdb_27_02_2021/rdb_27_02_2021.txt    |  5 ++
 public/main.js                                |  8 ++-
 public/style/style.css                        | 45 +++++++++++----
 src/home-page-components/news-articles.js     |  8 ++-
 src/home-page-components/news-articles.scss   | 57 +++++++++++++------
 8 files changed, 98 insertions(+), 39 deletions(-)
 create mode 100644 public/articles/news/rdb_27_02_2021/rdb_27_02_2021.json
 create mode 100644 public/articles/news/rdb_27_02_2021/rdb_27_02_2021.txt

diff --git a/public/articles/news/go-game-studio-club/go-game-studio-club.txt b/public/articles/news/go-game-studio-club/go-game-studio-club.txt
index e0c1607..a21fd8c 100644
--- a/public/articles/news/go-game-studio-club/go-game-studio-club.txt
+++ b/public/articles/news/go-game-studio-club/go-game-studio-club.txt
@@ -1,10 +1,10 @@
 Le <b><a href="https://kuadrado-software.fr/education/#game-studio-club" target="_blank">Game Studio Club</a></b> ouvrira ses portes à compter du 1er Mars dans nos locaux à Vernoux en Vivarais !
 
-<b>Qu'est-ce qu'on y fera ?</b>
+<b><blue>Qu'est-ce qu'on y fera ?</blue></b>
 
 Des <b>jeux vidéos</b> bien sûr, non pas pour y jouer mais bien pour les <b>fabriquer</b> !
-Créer un jeu c'est l'occasion de croiser ensemble une multitude de disciplines, comme l'animation 2D, l'écriture, la création sonore, la programmation, les maths et la physique, et d'autres choses encore.
-S'inscrire au Game Studio Club c'est l'occasion d'être accompagné en douceur sur l'apprentissage de toutes ces choses et d'acquerrir l'autonomie pour créer un jeu vidéo entièrement.
+Créer un jeu c'est l'occasion de croiser ensemble une multitude de disciplines, comme l'animation 2D, l'écriture, le sons, la programmation, les maths, et d'autres choses encore.
+S'inscrire au Game Studio Club c'est pouvoir être accompagné en douceur sur l'apprentissage de toutes ces choses et acquerrir l'autonomie pour créer un jeu vidéo entièrement.
 
 Retrouvez toutes les infos sur la page <b><a href="https://kuadrado-software.fr/education/#game-studio-club" target="_blank">Game Studio Club</a></b> !
 
diff --git a/public/articles/news/index.json b/public/articles/news/index.json
index 147a855..8773a1d 100755
--- a/public/articles/news/index.json
+++ b/public/articles/news/index.json
@@ -1,3 +1,3 @@
 {
-    "articles": ["installation-kuadrado", "go-game-studio-club"]
+    "articles": ["installation-kuadrado", "go-game-studio-club", "rdb_27_02_2021"]
 }
diff --git a/public/articles/news/rdb_27_02_2021/rdb_27_02_2021.json b/public/articles/news/rdb_27_02_2021/rdb_27_02_2021.json
new file mode 100644
index 0000000..56e7323
--- /dev/null
+++ b/public/articles/news/rdb_27_02_2021/rdb_27_02_2021.json
@@ -0,0 +1,6 @@
+{
+    "title": "On en parle à la radio !",
+    "date": "2021/03/01",
+    "subtitle": "Podcast RDB.fm - Avatars et Coquecigrues - 27/02/2021",
+    "body": "<file>rdb_27_02_2021.txt"
+}
diff --git a/public/articles/news/rdb_27_02_2021/rdb_27_02_2021.txt b/public/articles/news/rdb_27_02_2021/rdb_27_02_2021.txt
new file mode 100644
index 0000000..987e064
--- /dev/null
+++ b/public/articles/news/rdb_27_02_2021/rdb_27_02_2021.txt
@@ -0,0 +1,5 @@
+Samedi dernier on parlait de <b><blue>Kuadrado Software</blue></b> et de l'<b><blue>École Numérique Ardéchoise</blue></b> avec Jean-Bernard Huet et Pierre Jarriges sur <b><blue>Radio des Boutières</blue></b> !
+2 heures d'émssion et d'échanges autour du numérique, le code, la formation et la pédagogie, le web, le game dev et l'artisanat logiciel.
+Merci à Nicolas et Frank de RDB.fm pour l'émission !
+
+<iframe scrolling="no" id="hearthis_at_track_5680217" width="100%" height="150" src="https://app.hearthis.at/embed/5680217/transparent_black/?hcolor=&color=&style=2&block_size=2&block_space=1&background=1&waveform=0&cover=0&autoplay=0&css=" frameborder="0" allowtransparency allow="autoplay"><p>Listen to <a href="https://hearthis.at/radiodesboutieres/2021-02-27-avatars-et-coquecigrues-29/" target="_blank">2021-02-27 Avatars et Coquecigrues # 29</a> <span>by</span><a href="https://hearthis.at/radiodesboutieres/" target="_blank" >Radio des Boutières (RDBFM)</a> <span>on</span> <a href="https://hearthis.at/" target="_blank">hearthis.at</a></p></iframe>
\ No newline at end of file
diff --git a/public/main.js b/public/main.js
index 4bc8b31..f593d82 100644
--- a/public/main.js
+++ b/public/main.js
@@ -187,6 +187,7 @@ class NewsArticles {
     renderArticle(articleData) {
         return {
             tag: "article",
+            class: `${articleData.images ? "grid-2" : "grid-1"}`,
             typeof: "Article",
             contents: [
                 {
@@ -233,9 +234,10 @@ class NewsArticles {
                         },
                     ],
                 },
-                new ImageCarousel({
-                    images: articleData.images.map(img => `${articleData.path}/images/${img}`),
-                }).render(),
+                articleData.images &&
+                    new ImageCarousel({
+                        images: articleData.images.map(img => `${articleData.path}/images/${img}`),
+                    }).render(),
             ],
         };
     }
diff --git a/public/style/style.css b/public/style/style.css
index b4c94ee..207814c 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -482,11 +482,16 @@ main #page-container #home-page #news .articles-displayer .prev-next-buttons .pr
 main #page-container #home-page #news .articles-displayer article {
   display: grid;
   gap: 5px 50px;
-  grid-template-columns: 1fr 1fr;
   grid-template-rows: auto auto auto 1fr;
   position: relative;
   padding-left: 20px;
 }
+main #page-container #home-page #news .articles-displayer article.grid-1 {
+  grid-template-columns: 1fr;
+}
+main #page-container #home-page #news .articles-displayer article.grid-2 {
+  grid-template-columns: 1fr 1fr;
+}
 main #page-container #home-page #news .articles-displayer article .date {
   grid-column: 1;
   grid-row: 1;
@@ -542,30 +547,48 @@ main #page-container #home-page #news .articles-displayer article.article-placeh
 @media screen and (max-width: 900px) {
   main #page-container #home-page #news .articles-displayer article {
     gap: 5px;
+    padding: 0;
+  }
+  main #page-container #home-page #news .articles-displayer article.grid-2 {
     grid-template-columns: 1fr;
     grid-template-rows: 300px auto auto auto 1fr;
-    padding: 0;
   }
-  main #page-container #home-page #news .articles-displayer article .date {
+  main #page-container #home-page #news .articles-displayer article.grid-2 .date {
     grid-row: 2;
-    padding: 0 10px;
   }
-  main #page-container #home-page #news .articles-displayer article .title {
+  main #page-container #home-page #news .articles-displayer article.grid-2 .title {
     grid-row: 3;
-    padding: 0 10px;
   }
-  main #page-container #home-page #news .articles-displayer article .subtitle {
+  main #page-container #home-page #news .articles-displayer article.grid-2 .subtitle {
     grid-row: 4;
-    padding: 0 10px;
   }
-  main #page-container #home-page #news .articles-displayer article .body {
+  main #page-container #home-page #news .articles-displayer article.grid-2 .body {
     grid-row: 5;
-    padding: 0 10px 30px;
   }
-  main #page-container #home-page #news .articles-displayer article .image-carousel {
+  main #page-container #home-page #news .articles-displayer article.grid-2 .image-carousel {
     grid-row: 1;
     grid-column: 1;
   }
+  main #page-container #home-page #news .articles-displayer article.grid-1 .date {
+    grid-row: 1;
+  }
+  main #page-container #home-page #news .articles-displayer article.grid-1 .title {
+    grid-row: 2;
+  }
+  main #page-container #home-page #news .articles-displayer article.grid-1 .subtitle {
+    grid-row: 3;
+  }
+  main #page-container #home-page #news .articles-displayer article.grid-1 .body {
+    grid-row: 4;
+  }
+  main #page-container #home-page #news .articles-displayer article .date,
+main #page-container #home-page #news .articles-displayer article .title,
+main #page-container #home-page #news .articles-displayer article .subtitle {
+    padding: 0 10px;
+  }
+  main #page-container #home-page #news .articles-displayer article .body {
+    padding: 0 10px 30px;
+  }
 }
 main #page-container #home-page .poles {
   display: grid;
diff --git a/src/home-page-components/news-articles.js b/src/home-page-components/news-articles.js
index 7d17aa2..f94aa65 100644
--- a/src/home-page-components/news-articles.js
+++ b/src/home-page-components/news-articles.js
@@ -33,6 +33,7 @@ class NewsArticles {
     renderArticle(articleData) {
         return {
             tag: "article",
+            class: `${articleData.images ? "grid-2" : "grid-1"}`,
             typeof: "Article",
             contents: [
                 {
@@ -79,9 +80,10 @@ class NewsArticles {
                         },
                     ],
                 },
-                new ImageCarousel({
-                    images: articleData.images.map(img => `${articleData.path}/images/${img}`),
-                }).render(),
+                articleData.images &&
+                    new ImageCarousel({
+                        images: articleData.images.map(img => `${articleData.path}/images/${img}`),
+                    }).render(),
             ],
         };
     }
diff --git a/src/home-page-components/news-articles.scss b/src/home-page-components/news-articles.scss
index 1d839c9..179de65 100644
--- a/src/home-page-components/news-articles.scss
+++ b/src/home-page-components/news-articles.scss
@@ -56,13 +56,14 @@
         article {
             display: grid;
             gap: 5px 50px;
-            grid-template-columns: 1fr 1fr;
             grid-template-rows: auto auto auto 1fr;
             position: relative;
             padding-left: 20px;
-            // background-color: $dark_2;
-            *:not(a) {
-                // color: $light_0;
+            &.grid-1 {
+                grid-template-columns: 1fr;
+            }
+            &.grid-2 {
+                grid-template-columns: 1fr 1fr;
             }
             .date {
                 grid-column: 1;
@@ -120,29 +121,49 @@
         @media screen and (max-width: $screen_l) {
             article {
                 gap: 5px;
-                grid-template-columns: 1fr;
-                grid-template-rows: 300px auto auto auto 1fr;
                 padding: 0;
-                .date {
-                    grid-row: 2;
-                    padding: 0 10px;
+                &.grid-2 {
+                    grid-template-columns: 1fr;
+                    grid-template-rows: 300px auto auto auto 1fr;
+                    .date {
+                        grid-row: 2;
+                    }
+                    .title {
+                        grid-row: 3;
+                    }
+                    .subtitle {
+                        grid-row: 4;
+                    }
+                    .body {
+                        grid-row: 5;
+                    }
+                    .image-carousel {
+                        grid-row: 1;
+                        grid-column: 1;
+                    }
                 }
-                .title {
-                    grid-row: 3;
-                    padding: 0 10px;
+                &.grid-1 {
+                    .date {
+                        grid-row: 1;
+                    }
+                    .title {
+                        grid-row: 2;
+                    }
+                    .subtitle {
+                        grid-row: 3;
+                    }
+                    .body {
+                        grid-row: 4;
+                    }
                 }
+                .date,
+                .title,
                 .subtitle {
-                    grid-row: 4;
                     padding: 0 10px;
                 }
                 .body {
-                    grid-row: 5;
                     padding: 0 10px 30px;
                 }
-                .image-carousel {
-                    grid-row: 1;
-                    grid-column: 1;
-                }
             }
         }
     }
-- 
GitLab