Add an aside « latest articles » section

Remove day of week, add a calendar icon and fix styles

(thx @josephk/JoinMobilizon for the inspiration)

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

app/assets/scss/main.scss

@@ -277,22 +277,23 @@ a.button {
   }
 }
 
-.faq {
+.container .faq {
   h2 {
     margin: 40px 0 5px;
   }
+  padding: 40px 30px 0;
 
-  .container {
+  p {
-    padding: 40px 30px 0;
+    margin: auto auto 15px;
 
-    time {
+    &.small {
-      color: #757575;
+      font-size: 80%;
-      text-transform: uppercase;
+      font-weight: 400;
-    }
 
-    time, p {
+      time, i {
-      display: block;
+        color: #6c757d;
-      margin: auto auto 15px;
+        text-transform: uppercase;
+      }
     }
   }
 }

app/components/pages/News.vue

@@ -3,18 +3,38 @@
         <vue-headful
                 :title="$t('meta.title') + ' - ' + $t('hof.title')"
         />
-        <section class="clearfix faq">
+        <div class="container">
-            <div class="container">
+            <section class="col-lg-8 faq">
                 <h1>{{ $t('news.title') }}</h1>
                 <span>{{ $t('news.subtitle') }}</span>
                 <div v-for="(bloc, key) in $t('news.blocs')" :id="key">
                     <a :href="`#${key}`"><h2>{{ bloc.title }}</h2></a>
-                    <time v-if="bloc.date" :datetime="bloc.date.data">{{ bloc.date.text }}</time>
+                    <p class="small">
+                        <i aria-hidden="true" class="fa fa-calendar"></i>
+                        <time v-if="bloc.date" :datetime="bloc.date.data">{{ bloc.date.text }}</time>
+                    </p>
                     <p v-for="p in bloc.text" v-html="p"></p>
                     <hr />
                 </div>
-            </div>
+            </section>
-        </section>
+            <aside class="col-lg-4">
+                <div class="sticky-top">
+                    <div class="bloc">
+                        <nav>
+                            <h3>{{ $t('news.latest-articles') }}</h3>
+                            <ul>
+                                <li v-for="(bloc, key) in $t('news.blocs')">
+                                    <a :href="`#${key}`">{{ bloc.title }}</a>
+                                    <time v-if="bloc.date" :datetime="bloc.date.data" class="text-muted small">
+                                        {{ bloc.date.text }}
+                                    </time>
+                                </li>
+                            </ul>
+                        </nav>
+                    </div>
+                </div>
+            </aside>
+        </div>
     </main>
 </template>
 

app/locales/en.yml

@@ -461,11 +461,12 @@ hof:
 news:
   title: What's up on PeerTube
   subtitle: Discover the tool's latest improvements
+  latest-articles: Latest articles
   blocs:
     newsletter26-02-2019:
       title: 'PeerTube: retrospective, new features and more to come!'
       date:
-        text: Tuesday 26 February 2019
+        text: 26 February 2019
         data: 2019-02-26
       text:
         p1: Since version 1.0 has been released last November, we went on improving
@@ -503,7 +504,7 @@ news:
     newsletter16-10-2018:
       title: 'PeerTube crowdfunding newsletter #4'
       date:
-        text: Tuesday 16 October 2018
+        text: 16 October 2018
         data: 2018-10-16
       text:
         p1: Hello everyone!
@@ -551,7 +552,7 @@ news:
     newsletter12-09-2018:
       title: 'PeerTube crowdfunding newsletter #3'
       date:
-        text: Wednesday, September 12, 2018
+        text: September 12, 2018
         data: 2018-09-12
       text:
         p1: Hello everyone!
@@ -589,7 +590,7 @@ news:
     newsletter20-08-2018:
       title: 'PeerTube crowdfunding newsletter #2'
       date:
-        text: Monday, August 20, 2018
+        text: August 20, 2018
         data: 2018-08-20
       text:
         p1: Hello everyone!
@@ -617,9 +618,9 @@ news:
           <a href="https://contact.framasoft.org">https://contact.framasoft.org.</a>'
         p8: 'Cheers,<br>Framasoft'
     newsletter23-07-2018:
-      title: Newsletter du crowdfunding de PeerTube n°1
+      title: 'PeerTube crowdfunding newsletter #1'
       date:
-        text: Monday 23 July 2018
+        text: 23 July 2018
         data: 2018-07-23
       text:
         p1: Hello everyone!

app/locales/fr.yml

@@ -496,12 +496,13 @@ hof:
 news:
   title: Quoi de neuf sur PeerTube ?
   subtitle: Découvrez les dernières améliorations de l'outil
+  latest-articles: Derniers articles
   blocs:
     newsletter26-02-2019:
       title: 'PeerTube : rétrospective et nouvelles fonctionnalités : l''actu de février
         2019'
       date:
-        text: Mardi 26 Février 2019
+        text: 26 Février 2019
         data: 2019-02-26
       text:
         p1: Depuis la version 1.0 sortie en novembre dernier, nous avons continué
@@ -543,7 +544,7 @@ news:
     newsletter16-10-2018:
       title: Newsletter du crowdfunding de PeerTube n°4
       date:
-        text: Mardi 16 Octobre 2018
+        text: 16 Octobre 2018
         data: 2018-10-16
       text:
         p1: Bonjour à toutes et à tous,
@@ -594,7 +595,7 @@ news:
     newsletter12-09-2018:
       title: Newsletter du crowdfunding de PeerTube n°3
       date:
-        text: Mercredi 12 Septembre 2018
+        text: 12 Septembre 2018
         data: 2018-09-12
       text:
         p1: Bonjour à toutes et à tous,
@@ -641,7 +642,7 @@ news:
     newsletter20-08-2018:
       title: Newsletter du crowdfunding de PeerTube n°2
       date:
-        text: Lundi 20 Août 2018
+        text: 20 Août 2018
         data: 2018-08-20
       text:
         p1: Bonjour à toutes et à tous,
@@ -675,7 +676,7 @@ news:
     newsletter23-07-2018:
       title: Newsletter du crowdfunding de PeerTube n°1
       date:
-        text: Lundi 23 Juillet 2018
+        text: 23 Juillet 2018
         data: 2018-07-23
       text:
         p1: Bonjour à toutes et à tous,