epfl-elements 5.0.0 → 5.0.2

package/dist/components/atoms/select/select-multiple.twig

@@ -5,8 +5,8 @@
     <option value="2">The Sage Cattabriga-Alosa hideout</option>
     <option value="3">Nikola Tesla Drive-in</option>
     <option value="4">A Love for Pizza 🍕</option>
-    <option value="5">The Hydron Collider
-    </option>
+    <option data-divider="true"></option>
+    <option value="5">The Hydron Collider</option>
     <option value="6">There's no place like 127.0.0.1</option>
     <option value="7">The Shake Shack Space bar</option>
   </select>

package/dist/components/atoms/select/select.twig

@@ -1,5 +1,5 @@
 <div class="form-group">
-<label>Choose wisely</label>
+<label>{% if label %} {{~ label}} {% else %}Choose wisely{% endif %}</label>
 <select id="select-input" class="custom-select">
   <option selected>Make a choice...</option>
   <option value="1">Legolas</option>

package/dist/components/atoms/select/select.yml

@@ -6,6 +6,6 @@ variants:
     notes: |
       This variation of the select component enables **multiple choices**. Again, keep your list to the smallest. Think of having a “select all/none” item when the list is long.
 notes: |
-  The select component is mainly used in **forms**. Use it when people have to **choose options from a list**. The select component doesn't trigger actions: it stores a choice before submission. Don't use it when the number of options is low (2 to 3). Use the [checkboxes](#/atoms/checkbox) or [radio buttons](#/atoms/radio) instead. Pay  attention to **long lists**: beyond 7 or 8 options, people struggle to make a educated choice. In any case, keep your list below 15-ish items.
+  The select component is mainly used in **forms**. Use it when people have to **choose options from a list**. The select component doesn't trigger actions: it stores a choice before submission. Don't use it when the number of options is low (2 to 3). Use the [checkboxes](#/atoms/checkbox) or [radio buttons](#/atoms/radio) instead. Pay  attention to **long lists**: beyond 7 or 8 options, people struggle to make an educated choice. In any case, keep your list below 15-ish items.
 
   ### Standard select

package/dist/components/content-types/press-review/press-review.twig

@@ -1,4 +1,4 @@
-<div class="press-teaser">
+<div class="press-teaser{{ press_classes ? ' ' ~ press_classes }}">
   <h4 class="mb-4"><time datetime="2018-01-19">19.01.2018</time></h4>
   {% for i in [1,2,3] %}
     <button

package/dist/components/molecules/card/card-inside-links.twig

@@ -10,9 +10,9 @@
     {% block card_body %}
     <div class="card-body">
       {% block content %}
-        <div class="card-title">
-          <a href="#" class="h3">{% block title %}Startup Acceleration Workshops{% endblock %}</a>
-        </div>
+        <h3 class="card-title">
+          <a href="#">{% block title %}Startup Acceleration Workshops{% endblock %}</a>
+        </h3>
       {% endblock %}
     </div>
     {% endblock -%}

package/dist/components/molecules/card-deck/card-deck.yml

@@ -31,6 +31,6 @@ variants:
 notes: |
   This component allows you to display multiple cards side by side, in a set of equal width and height. You just have to wrap cards inside of a `.card-deck` component.
 
-  Add the `.card-deck-line` class to the container, when you want to display 1 ou 2 cards only, to add a visual touch on desktop helping readability
+  Add the `.card-deck-line` class to the container, when you want to display 1 or 2 cards only, to add a visual touch on desktop helping readability
 
   Add the `.mini-cards` class to the container to display a row of 6 mini cards.

package/dist/components/molecules/filters/filters-blog.twig

@@ -14,34 +14,14 @@
     </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>
+      {% include "@molecules/form-group/form-group-search.twig" %}
+
+      {% include "@molecules/form-group/form-group-select.twig" with {'label': 'Catégories'} %}
 
-      <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>
+      {% include "@molecules/form-group/form-group-select.twig" with {'label': 'Archives'} %}
 
     </form>
   </div>

package/dist/components/molecules/form-group/form-group-checkboxes.twig

@@ -1,5 +1,5 @@
 <div class="form-group">
-  <label for="custom-check1">Checkboxes (multiple choice)</label>
+  <label for="custom-check1">{% if label %} {{~ label}} {% else %}Checkboxes (multiple choice){% endif %}</label>
 
   {% for i in [1,2,3] %}
   {% include "@atoms/checkbox/checkbox.twig" with {

package/dist/components/molecules/form-group/form-group-error.twig

@@ -1,5 +1,5 @@
 <div class="form-group">
-  <label for="error-input" class="invalid-label">Input's label</label>
+  <label for="error-input" class="invalid-label">{% if label %} {{~ label}} {% else %}Input's label{% endif %}</label>
   <input
     type="text"
     id="error-input"

package/dist/components/molecules/form-group/form-group-radio.twig

@@ -1,5 +1,5 @@
 <div class="form-group">
-  <label for="custom-radio1">Radio button (single choice)</label>
+  <label for="custom-radio1">{% if label %} {{~ label}} {% else %}Radio button (single choice){% endif %}</label>
 
   {% for i in [1,2,3] %}
   {% include "@atoms/radio/radio.twig" with {

package/dist/components/molecules/form-group/form-group-search.twig

@@ -1,5 +1,5 @@
 <div class="form-group form-group-search">
-  <label for="search-field" class="sr-only">Search</label>
+  <label for="search-field" class="sr-only">{% if label %} {{~ label}} {% else %}Search{% endif %}</label>
   <p class="search-container icon-right">
     <input
       type="search"
@@ -8,6 +8,6 @@
       placeholder="Keywords..."
       aria-describedby="search-field-help"
     >
-    {% include '@atoms/icon/icon.twig' with { icon:  'icon-search' } %}
+    {% include '@atoms/icon/icon.twig' with { icon: 'icon-search' } %}
   </p>
 </div>

package/dist/components/molecules/form-group/form-group-textarea.twig

@@ -1,4 +1,4 @@
 <div class="form-group">
-  <label for="awesome-textarea">Text area</label>
+  <label for="awesome-textarea">{% if label %} {{~ label}} {% else %}Text area{% endif %}</label>
   <textarea class="form-control" id="awesome-textarea" rows="3">Multiple lines can be typed here…</textarea>
 </div>

package/dist/components/molecules/form-group/form-group-upload.twig

@@ -1,4 +1,4 @@
 <div class="form-group">
-  <label for="upload-input">File upload</label>
+  <label for="upload-input">{% if label %} {{~ label}} {% else %}File upload{% endif %}</label>
   {% include "@atoms/upload/upload.twig" %}
 </div>

package/dist/components/molecules/form-group/form-group.twig

@@ -1,5 +1,5 @@
 <div class="form-group">
-  <label for="awesome-input">Input's label</label>
+  <label for="awesome-input">{% if label %} {{~ label}} {% else %}Input's label{% endif %}</label>
   <input
     type="text"
     id="awesome-input"

package/dist/components/molecules/social/social-follow.twig

@@ -1,14 +1,12 @@
-<div class="bg-gray-100 py-5">
-  <div class="container">
-    <div class="social-share-container social-share-light">
-
-      <div class="social-share ">
-        <p class="social-share-text">
-          Suivez nous sur <span class="sr-only">les réseaux sociaux</span>
-        </p>
-        {% include '@atoms/social-icon/social-icon-link-group.twig' with { discrete: true, social_mastodon: true, social_tiktok: true } %}
-      </div>
+<div class="row">
+  <div class="social-share-container social-share-light">
 
+    <div class="social-share ">
+      <p class="social-share-text">
+        Suivez nous sur <span class="sr-only">les réseaux sociaux</span>
+      </p>
+      {% include '@atoms/social-icon/social-icon-link-group.twig' with { discrete: true, social_mastodon: true, social_tiktok: true } %}
     </div>
+
   </div>
 </div>

package/dist/components/pages/press-review/press-review.twig

@@ -0,0 +1,73 @@
+{% set isSpecial = true %}
+
+{% extends "@templates/base/base.twig" %}
+
+{% block header %}
+  <header role="banner" class="header header-light">
+    <div class="header-light-content">
+      <a class="logo" href="#">
+        <img src="svg/epfl-logo.svg" alt="Logo EPFL, École polytechnique fédérale de Lausanne" class="img-fluid">
+      </a>
+      <h1>Revue de presse</h1>
+      <ul aria-hidden="true" class="nav-header d-none d-xl-flex">
+        <li id="menu-item-{{ loop.index }}" {% if loop.index == 2 %} class="current-menu-item"{% endif %}>
+          <a class="nav-item" href="#">S'abonner</a>
+        </li>
+      </ul>
+      {% include '@molecules/search/search-mobile.twig' %}
+      {% include '@molecules/search/search.twig' %}
+      {% include '@atoms/nav-lang/nav-lang-short.twig' %}
+      {% include '@atoms/nav-toggle-mobile/nav-toggle-mobile.twig' %}
+    </div>
+  </header>
+{% endblock %}
+{% block content %}
+
+<div class="container">
+  <h1 class="h2 mb-5">Revues de presse</h1>
+</div>
+
+<div class="container">
+  <div class="row">
+    <div class="col-md-5 col-lg-4">
+      <aside>
+        <div class="mb-5">
+          <form method="get">
+            <h2 class="h6 mb-2">Rechercher</h2>
+            <div class="form-group">
+              <input type="text" name="keywords" class="form-control" value="">
+            </div>
+            <button class="btn btn-primary" type="submit" name="search">Rechercher</button>
+          </form>
+        </div>
+      </aside>
+      <div class="mb-5">
+        <h2 class="h6">Abonnement</h2>
+        <a href="#">
+          Recevez la revue de presse par e-mail
+        </a>
+      </div>
+    </div>
+    <div class="col-md-7 col-lg-8">
+     {% for i in 1..3 %}
+        {% include '@content-types/press-review/press-review.twig' with { press_classes: ' mb-5' } %}
+      {% endfor %}
+      <div class="mt-3">
+        {% include '@molecules/pagination/pagination.twig' %}
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block footer_container %}
+  <div class="bg-gray-100 pt-5">
+    <div class="container">
+      {% block footer %}
+        {% include '@organisms/footer/footer-light.twig' %}
+      {% endblock %}
+    </div>
+  </div>
+  {% endblock %}
+  </div>
+</div>

package/dist/components/pages/press-review/press-review.yml

@@ -0,0 +1,2 @@
+title: Press review
+name: press-review

package/dist/css/elements.css

@@ -12241,6 +12241,10 @@ picture .img-fluid {
 .ms-drop ul > li.group {
   clear: both;
 }
+.ms-drop ul > li.option-divider {
+  padding: 0;
+  border-top: 1px solid #c1c1c1;
+}
 .ms-drop label {
   display: block;
   margin-bottom: 0;
@@ -12821,6 +12825,10 @@ figcaption {
   flex-basis: var(--avatar-size);
   width: 2.5rem;
   width: var(--avatar-size);
+  -o-object-fit: cover;
+     object-fit: cover;
+  height: 2.5rem;
+  height: var(--avatar-size);
 }
 @media (min-width: 576px) {
   .user-dropdown .btn .user-avatar {
@@ -17685,6 +17693,7 @@ a.cc-link {
   padding-bottom: 0.6rem !important;
 }
 .table-like .line .cours .cours-name i {
+  display: block;
   font-weight: normal;
 }
 .table-like .line .cours .cours-code {
@@ -17710,7 +17719,6 @@ a.cc-link {
   color: #707070;
 }
 .table-like .specialisation p {
-  display: inline-block;
   font-size: 0.875rem;
   margin-right: 0.6rem;
 }
@@ -17721,22 +17729,18 @@ a.cc-link {
   text-align: left;
 }
 .table-like .specialisation ul.spec li {
-  display: inline;
   font-size: 0.875rem;
   margin-bottom: 0;
 }
 .table-like .specialisation ul.spec li:after {
   content: ";";
 }
+.table-like .specialisation ul.spec li:before {
+  top: 0.38em;
+}
 .table-like .specialisation ul.spec.list-bullet {
   margin-left: 0;
 }
-.table-like .specialisation ul.spec.list-bullet li {
-  display: inline-block;
-}
-.table-like .specialisation ul.spec.list-bullet li:before {
-  top: 0.38em;
-}
 .table-like .specialisation ul.spec.list-bullet li:after {
   display: none;
 }