Merge branch 'dev' into feature/people-detail

CHANGELOG.md

@@ -1,4 +1,12 @@
 # CHANGELOG
+*2.3.1* (2019-12-13)
+  - 🛠 Fixes & other
+    - Update markup according to WordPress standards (#429)
+
+*2.3.0* (2019-12-10)
+  - ✨ New implementations
+    - Blog pages design (#425)
+
 *2.2.1* (2019-11-13)
   - 🛠 Fixes & other
     - Fix multiple select image (#401)

VERSION

@@ -1 +1 @@
-2.2.1
+2.3.1

assets/components/base.scss

@@ -125,3 +125,4 @@
 //
 // pages:
 @import 'pages/people-detail/people-detail';
+@import 'pages/blog-single/blog-single';

assets/components/molecules/card-deck/card-deck.scss

@@ -5,6 +5,26 @@
   margin-left: $spacer * -0.5;
   margin-right: $spacer * -0.5;
   flex-wrap: wrap;
+
+  @include media-breakpoint-up(sm) {
+
+    > .card {
+
+      // only one card is present
+      &:first-child:last-child {
+        flex: 0 0 60%;
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      // two or more cards are present
+      &:nth-last-child(n + 2),
+      &:nth-last-child(n + 2) ~ * {
+        flex: 1 1 47%;
+        margin: $spacer * 0.5;
+      }
+    }
+  }
 
   @include media-breakpoint-up(lg) {
     > .card {
@@ -14,8 +34,6 @@
       // only one card is present
       &:first-child:last-child {
         flex: 0 0 33%;
-        margin-left: auto;
-        margin-right: auto;
       }
 
       // two cards are present

assets/components/molecules/card-deck/card-deck.twig

@@ -2,4 +2,7 @@
   {% include '@molecules/card/card-link.twig' %}
   {% include '@molecules/card/card-link.twig' %}
   {% include '@molecules/card/card-link.twig' %}
+  {% include '@molecules/card/card-link.twig' %}
+  {% include '@molecules/card/card-link.twig' %}
+  {% include '@molecules/card/card-link.twig' %}
 </div>

assets/components/molecules/card/card.scss

@@ -45,6 +45,10 @@ a.card-gray:hover .card-body { background: $white; }
   + .card-footer {
     padding-top: 0;
   }
+
+  .card-info + p {
+    margin-top: .5em;
+  }
 
   p:last-of-type {
     margin-bottom: 0;

assets/components/molecules/filters/filters-blog.twig

@@ -0,0 +1,48 @@
+<aside>
+  <div class="d-flex justify-content-between px-3 p-md-0 align-baseline">
+    <h3 class="h5 mb-0 font-weight-normal">Filtrer les articles</h3>
+    <button
+      class="btn btn-sm btn-secondary d-lg-none collapsed collapse-drop-toggle"
+      type="button"
+      data-toggle="collapse"
+      data-target="#form-filters"
+      aria-expanded="false"
+      aria-controls="form-filters"
+    >
+      Filtres
+      {% include '@atoms/icon/icon.twig' with {'icon': 'icon-triangle'} %}
+    </button>
+  </div>
+  <div class="collapse collapse-lg-show collapse-drop" id="form-filters">
+    <form class="p-3 p-lg-0 mt-md-3">
+
+      <div class="form-group">
+        <div class="form-group">
+          <label>Catégories</label>
+          <select id="select-input" class="custom-select">
+            <option selected>Toutes les catégories</option>
+            <option value="1">Catégorie 1</option>
+            <option value="2">Catégorie 2</option>
+            <option value="3">Catégorie 3</option>
+            <option value="4">The fourth choice</option>
+            <option value="5">42</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="form-group">
+          <label>Archives</label>
+          <select id="select-input" class="custom-select">
+            <option selected>Toutes les années</option>
+            <option value="2020">2020</option>
+            <option value="2019">2019</option>
+            <option value="2018">2018</option>
+            <option value="2017">2017</option>
+          </select>
+        </div>
+      </div>
+
+    </form>
+  </div>
+</aside>

assets/components/molecules/filters/filters.yml

@@ -2,3 +2,8 @@ name: filters
 title: Filters
 notes: |
   The filters are displayed (in a sidebar) on desktop but have to be collapsed in on mobile.
+  variants:
+  - name: blog
+    title: Blog content filters
+    notes: |
+      

assets/components/molecules/form-group/form-group.scss

@@ -2,9 +2,13 @@
 
 .form-group {
   label {
-    font-size: $font-size-sm;
+    font-size: 1em;
     color: $gray-600;
   }
+
+  .custom-control label {
+    font-size: $font-size-sm;
+  }
 }
 
 .invalid-label,

assets/components/molecules/tables/tables.scss

@@ -6,7 +6,7 @@
   thead {
     th {
       border-bottom: 3px solid $gray-200;
-      padding: 0.3rem 0;
+      padding: 0.3rem 0.45rem;
     }
   }
 
@@ -15,7 +15,7 @@
     color: $black;
 
     td {
-      padding: 0.3rem 0;
+      padding: 0.3rem 0.45rem;
       border-bottom: 1px solid $gray-200;
 
       @include media-breakpoint-down(sm) {
@@ -50,8 +50,6 @@
   thead th,
   tbody td,
   tfoot td {
-    padding-left: 0.45rem;
-    padding-right: 0.45rem;
     border-right: 1px solid $gray-200;
 
     @include media-breakpoint-down(sm) {

assets/components/organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig

@@ -1,4 +1,6 @@
-<div class="fullwidth-teaser fullwidth-teaser-horizontal">
+{% set thinner_teaser = thinner_teaser|default(false) %}
+
+<div class="fullwidth-teaser fullwidth-teaser-horizontal{% if thinner_teaser %} thinner-teaser{% endif %}">
   <picture>
     {% if not img %}{% set img %}./images/styleguide/basic_page_teaser.jpg{% endset %}{% endif %}
     <img src="{{img}}" aria-labelledby="background-label" alt="An image description"/>

assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss

@@ -283,3 +283,22 @@
     }
   }
 }
+
+.fullwidth-teaser-horizontal.thinner-teaser {
+  background: yellow;
+  min-height: 24rem;
+
+  @include media-breakpoint-up(xl) {
+
+    picture,
+    figure {
+      height: 30vw;
+      max-height: 50vh;
+      min-height: 24rem;
+    }
+
+    .fullwidth-teaser-text {
+      padding-bottom: $spacer * 3;
+    }
+  }
+}

assets/components/pages/blog-homepage/blog-homepage.twig

@@ -1,27 +1,33 @@
-{% set isSpecial = true %}
-
 {% extends "@templates/base/base.twig" %}
 
 {% block header %}
   {% include '@organisms/header/header-light.twig' with { site_title: 'example blog name' } %}
 {% endblock %}
 
 {% block content %}
-<div class="container-full">
-  {% include '@content-types/news/news-highlighted.twig' %}
+
+<div class="container-full px-5 px-xxl-6 mt-5">
+  <h1>Titre du blog</h1>
 </div>
 
-<div class="container mt-5">
-  <div class="card-deck">
-    {% for 1 in 1..12 %}
-      {% include '@content-types/news/news-basic-teaser.twig' %}
-    {% endfor %}
+<div class="container-full px-5 px-xxl-6 mt-5">
+  <div class="row" style="flex-direction: row-reverse;">
+    <div class="col-lg-3">
+      {% include '@molecules/filters/filters-blog.twig' %}
+    </div>
+    <div class="col-lg-9">
+      <div class="card-deck">
+        {% for 1 in 1..9 %}
+          {% include '@content-types/news/news-basic-teaser.twig' %}
+        {% endfor %}
+      </div>
+      <div class="mt-3">
+        {% include '@molecules/pagination/pagination.twig' %}
+      </div>
+    </div>
   </div>
 </div>
 
-<div class="container mt-3">
-  {% include '@molecules/pagination/pagination-center.twig' %}
-</div>
 {% endblock %}
 
 {% block footer_container %}

assets/components/pages/blog-single/blog-single.scss

@@ -0,0 +1,19 @@
+@charset 'utf-8';
+
+article.blog-post {
+
+  header {
+    border-bottom: 1px solid $gray-100;
+  }
+
+  footer {
+    border-color: $gray-100;
+  }
+}
+
+.entry-content {
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}

assets/components/pages/blog-single/blog-single.twig

@@ -0,0 +1,58 @@
+{% extends "@templates/base/base.twig" %}
+
+{% block header %}
+  {% include '@organisms/header/header-light.twig' with { site_title: 'example blog name' } %}
+{% endblock %}
+
+{% block content %}
+
+<article class="blog-post">
+
+  <header class="entry-header mb-5">
+    <h1 itemprop="name">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
+    <div class="post-meta my-4">
+      <p class="text-muted">Publié le 9 décembre 2019</p>
+      <p class="sr-only">Catégories:</p>
+      <p>
+        <a href="#" class="tag tag-primary">Catégorie 1</a>
+        <a href="#" class="tag tag-primary">Catégorie 2</a>
+      </p>
+    </div>
+  </header>
+
+  <div class="entry-content mb-5">
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at pharetra est, non bibendum dolor. Proin turpis neque, viverra a augue vitae, dapibus iaculis tellus. Morbi ante nisi, venenatis vel velit id, ultrices efficitur nisl. Morbi consectetur non turpis eu interdum. Phasellus nec felis at justo efficitur cursus sed quis sapien. Proin facilisis sapien sit amet venenatis pellentesque. Nulla efficitur, massa a facilisis egestas, massa nulla scelerisque tellus, quis fringilla orci ante sed risus.</p>
+    <p>Sed varius volutpat mollis. Vestibulum suscipit hendrerit congue. Donec ante urna, molestie et magna quis, pellentesque auctor urna. Donec porta ligula sed nisl consequat vehicula. Maecenas aliquet, sapien vitae iaculis vestibulum, arcu neque viverra tellus, nec pulvinar diam sem id massa. Nunc vestibulum lacus nunc. Nunc sodales nisi in ante molestie gravida. Sed iaculis, libero quis efficitur fermentum, lacus orci sagittis lacus, sit amet consectetur lectus nibh vel nisi. Sed et accumsan orci. Cras imperdiet nibh odio, vitae dictum purus luctus in. Maecenas a nunc sit amet mauris fermentum fermentum. Curabitur sit amet neque sit amet lorem commodo rutrum vitae sed magna. Sed quis lectus dolor. Nullam placerat augue ut sollicitudin pharetra.</p>
+
+    <blockquote class="blockquote">
+      <p>In ut viverra mauris. Duis hendrerit, nulla ac condimentum condimentum, quam sem dignissim nulla, ut suscipit lorem purus sodales sapien. Mauris luctus scelerisque malesuada. Maecenas id augue velit. Donec malesuada, dolor vel auctor fermentum, eros enim auctor tellus, non vestibulum felis elit ut arcu. Maecenas sed euismod arcu, quis aliquam mi. Donec faucibus tristique ex, id cursus metus varius quis. Aenean neque mauris, pulvinar id placerat ac, finibus vel quam.</p>
+      <footer class="blockquote-footer">
+        — Prénom Nom, chef d’unité
+      </footer>
+    </blockquote>
+
+    <p>In ut viverra mauris. Duis hendrerit, nulla ac condimentum condimentum, quam sem dignissim nulla, ut suscipit lorem purus sodales sapien. Mauris luctus scelerisque malesuada. Maecenas id augue velit. Donec malesuada, dolor vel auctor fermentum, eros enim auctor tellus, non vestibulum felis elit ut arcu. Maecenas sed euismod arcu, quis aliquam mi. Donec faucibus tristique ex, id cursus metus varius quis. Aenean neque mauris, pulvinar id placerat ac, finibus vel quam. Praesent fringilla neque ante, et auctor augue gravida at. Nunc pulvinar, nibh fringilla suscipit interdum, augue velit convallis enim, tempor rutrum risus justo ac mauris. Praesent lobortis odio augue. Curabitur vestibulum condimentum ipsum, a rhoncus est malesuada quis. Fusce luctus nisl et tortor varius ornare.</p>
+    <p>Nunc id imperdiet est. Phasellus a semper ante. Sed purus nisi, iaculis non purus id, ultricies vulputate leo. Ut dignissim vitae quam eget gravida. Nulla nec metus tortor. Nullam quis nisl at purus commodo consequat. Nullam sem dolor, faucibus in turpis eleifend, condimentum ultricies nisi. Phasellus vitae gravida lectus. Nam tellus magna, lacinia vel congue non, egestas at erat. Mauris consequat, justo in lobortis pharetra, nibh sapien gravida risus, vitae commodo nunc tellus eu nisi. Fusce tempus nisl laoreet diam luctus dictum. Aenean nisi felis, maximus nec ante ut, sodales viverra nisl. Vivamus iaculis fermentum lorem, vel sagittis erat imperdiet ac. In hac habitasse platea dictumst. Vivamus congue augue eget mi mollis tristique.</p>
+    <p>Cras non sem sed erat feugiat pellentesque. In in risus est. Praesent ut lectus sit amet leo viverra scelerisque. Nulla facilisi. Cras vel lectus tortor. In auctor dictum odio vitae mollis. Donec fringilla viverra suscipit. Curabitur cursus nibh a purus volutpat imperdiet. Integer mollis varius enim eu porttitor.</p>
+
+  </div>
+
+  <footer class="post-footer pt-4">
+
+    <h2 class="h5">Mots-clés</h2>
+    <p>
+      <a href="#" class="tag tag-primary">Lorem ipsum</a>
+      <a href="#" class="tag tag-primary">Dolor sit amet</a>
+      <a href="#" class="tag tag-primary">Consectetur</a>
+      <a href="#" class="tag tag-primary">Adipiscing</a>
+      <a href="#" class="tag tag-primary">Praesent</a>
+      <a href="#" class="tag tag-primary">Viverra a augue</a>
+      <a href="#" class="tag tag-primary">Morbi ante nisi</a>
+      <a href="#" class="tag tag-primary">Venenatis</a>
+    </p>
+
+  </footer>
+
+</article>
+{% endblock %}

assets/components/pages/blog-single/blog-single.yml

@@ -0,0 +1,2 @@
+title: Blog single
+name: blog-single

assets/config/typography.scss

@@ -80,6 +80,8 @@ s { color: $gray-600; }
 blockquote,
 .blockquote {
   font-size: 1.5rem;
+  margin-bottom: 2.5rem;
+  margin-top: 2.5rem;
 }
 
 blockquote {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "epfl-elements",
-  "version": "2.2.1",
+  "version": "2.3.1",
   "license": "MIT",
   "main": "index.html",
   "repository": {