epfl-elements 5.0.1 → 5.1.0

package/dist/components/content-types/study-plan/study-plan-master.twig

@@ -13,35 +13,15 @@
       </div>
       <div class="bachlor">
         <div class="titre_bachlor bold">Master 1&nbsp;</div>
-        <div class="titre">
-          <div class="cep"><abbr title="Cours">c</abbr></div>
-          <div class="cep"><abbr title="Exercices">e</abbr></div>
-          <div class="cep"><abbr title="Pratiques">p</abbr></div>
-        </div>
       </div>
       <div class="bachlor">
         <div class="titre_bachlor bold">Master 2&nbsp;</div>
-        <div class="titre">
-          <div class="cep"><abbr title="Cours">c</abbr></div>
-          <div class="cep"><abbr title="Exercices">e</abbr></div>
-          <div class="cep"><abbr title="Pratiques">p</abbr></div>
-        </div>
       </div>
       <div class="bachlor">
         <div class="titre_bachlor bold">PDM automne</div>
-        <div class="titre">
-          <div class="cep"><abbr title="Cours">c</abbr></div>
-          <div class="cep"><abbr title="Exercices">e</abbr></div>
-          <div class="cep"><abbr title="Pratiques">p</abbr></div>
-        </div>
       </div>
       <div class="bachlor">
         <div class="titre_bachlor bold">PDM printemps</div>
-        <div class="titre">
-          <div class="cep"><abbr title="Cours">c</abbr></div>
-          <div class="cep"><abbr title="Exercices">e</abbr></div>
-          <div class="cep"><abbr title="Pratiques">p</abbr></div>
-        </div>
       </div>
       <div class="examen">
         <div class="titre_bachlor bold">Examens</div>
@@ -73,34 +53,26 @@
       </div>
 
       <div class="bachlor local-color-light bachlor-color" data-title="Master 1">
-        <div class="bachlor-text">
-          <div class="cep">–&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-        </div>
+        <div class="schedule-text no-course" aria-hidden="true"><span>–</span></div>
       </div>
 
       <div class="bachlor local-color bachlor-color" data-title="Master 2">
-        <div class="bachlor-text">
-          <div class="cep">–&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-        </div>
+        <div class="schedule-text no-course" aria-hidden="true"><span>–</span></div>
       </div>
 
       <div class="bachlor local-color bachlor-color" data-title="PDM automne">
-        <div class="bachlor-text">
-          <div class="cep">–&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-          <div class="cep"><span class="label sr-only">Pratique: </span>900h&nbsp;</div>
+        <div class="schedule-text">
+          <ul>
+            <li>Pratique: 900h</li>
+          </ul>
         </div>
       </div>
 
       <div class="bachlor local-color bachlor-color" data-title="PDM printemps">
-        <div class="bachlor-text">
-          <div class="cep">–&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-          <div class="cep"><span class="label sr-only">Pratique: </span>900h&nbsp;</div>
+        <div class="schedule-text">
+          <ul>
+            <li>Pratique: 900h</li>
+          </ul>
         </div>
       </div>
 
@@ -142,34 +114,34 @@
       </div>
 
       <div class="bachlor local-color-light bachlor-color" data-title="Master 1">
-        <div class="bachlor-text">
-          <div class="cep">–&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-          <div class="cep"><span class="label sr-only">Pratique: </span>320h&nbsp;&nbsp;</div>
+        <div class="schedule-text">
+          <ul>
+            <li>Pratique: 320h</li>
+          </ul>
         </div>
       </div>
 
       <div class="bachlor local-color bachlor-color" data-title="Master 2">
-        <div class="bachlor-text">
-          <div class="cep">–&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-          <div class="cep"><span class="label sr-only">Pratique: </span>320h&nbsp;</div>
+        <div class="schedule-text">
+          <ul>
+            <li>Pratique: 320h</li>
+          </ul>
         </div>
       </div>
 
       <div class="bachlor local-color bachlor-color" data-title="PDM automne">
-        <div class="bachlor-text">
-          <div class="cep">–&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-          <div class="cep"><span class="label sr-only">Pratique: </span>320h&nbsp;</div>
+        <div class="schedule-text">
+          <ul>
+            <li>Pratique: 320h</li>
+          </ul>
         </div>
       </div>
 
       <div class="bachlor local-color bachlor-color" data-title="PDM printemps">
-        <div class="bachlor-text">
-          <div class="cep">–&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-          <div class="cep"><span class="label sr-only">Pratique: </span>320h&nbsp;</div>
+        <div class="schedule-text">
+          <ul>
+            <li>Pratique: 320h</li>
+          </ul>
         </div>
       </div>
 
@@ -207,19 +179,9 @@
       </div>
       <div class="bachlor">
         <div class="titre_bachlor bold">Master 1&nbsp;</div>
-        <div class="titre">
-          <div class="cep"><abbr title="Cours">c</abbr></div>
-          <div class="cep"><abbr title="Exercices">e</abbr></div>
-          <div class="cep"><abbr title="Pratiques">p</abbr></div>
-        </div>
       </div>
       <div class="bachlor">
         <div class="titre_bachlor bold">Master 2&nbsp;</div>
-        <div class="titre">
-          <div class="cep"><abbr title="Cours">c</abbr></div>
-          <div class="cep"><abbr title="Exercices">e</abbr></div>
-          <div class="cep"><abbr title="Pratiques">p</abbr></div>
-        </div>
       </div>
       <div class="specialisation">
         <div class="titre_bachlor bold">Spécialisation</div>
@@ -254,18 +216,15 @@
       </div>
 
       <div class="bachlor local-color-light bachlor-color" data-title="Master 1">
-        <div class="bachlor-text">
-          <div class="cep">–&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-        </div>
+        <div class="schedule-text no-course" aria-hidden="true"><span>–</span></div>
       </div>
 
       <div class="bachlor local-color bachlor-color" data-title="Master 2">
-        <div class="bachlor-text">
-          <div class="cep"><span class="label sr-only">Cours: </span>4h&nbsp;</div>
-          <div class="cep"><span class="label sr-only">Exercices: </span>3h&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
+        <div class="schedule-text">
+          <ul>
+            <li>Cours: 4h</li>
+            <li>Exercices: 3h</li>
+          </ul>
         </div>
       </div>
 
@@ -319,18 +278,15 @@
       </div>
 
       <div class="bachlor local-color-light bachlor-color" data-title="Master 1">
-        <div class="bachlor-text">
-          <div class="cep">–&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-        </div>
+        <div class="schedule-text no-course" aria-hidden="true"><span>–</span></div>
       </div>
 
       <div class="bachlor local-color bachlor-color" data-title="Master 2">
-        <div class="bachlor-text">
-          <div class="cep"><span class="label sr-only">Cours: </span>2h&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-          <div class="cep"><span class="label sr-only">Pratique: </span>2h&nbsp;</div>
+        <div class="schedule-text">
+          <ul>
+            <li>Cours: 2h</li>
+            <li><abbr title="Travaux pratiques">TP</abbr>: 2h</li>
+          </ul>
         </div>
       </div>
 
@@ -382,18 +338,15 @@
       </div>
 
       <div class="bachlor local-color-light bachlor-color" data-title="Master 1">
-        <div class="bachlor-text">
-          <div class="cep">–&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-        </div>
+        <div class="schedule-text no-course" aria-hidden="true"><span>–</span></div>
       </div>
 
       <div class="bachlor local-color bachlor-color" data-title="Master 2">
-        <div class="bachlor-text">
-          <div class="cep"><span class="label sr-only">Cours: </span>2h&nbsp;</div>
-          <div class="cep"><span class="label sr-only">Exercices: </span>1h&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
+        <div class="schedule-text">
+          <ul>
+            <li>Cours: 2h</li>
+            <li>Exercices: 2h</li>
+          </ul>
         </div>
       </div>
 
@@ -443,19 +396,16 @@
       </div>
 
       <div class="bachlor local-color-light bachlor-color" data-title="Master 1">
-        <div class="bachlor-text">
-          <div class="cep"><span class="label sr-only">Cours: </span>4h&nbsp;</div>
-          <div class="cep"><span class="label sr-only">Exercices: </span>2h&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
+        <div class="schedule-text">
+          <ul>
+            <li>Cours: 2h</li>
+            <li>Exercices: 2h</li>
+          </ul>
         </div>
       </div>
 
       <div class="bachlor local-color bachlor-color" data-title="Master 2">
-        <div class="bachlor-text">
-          <div class="cep">–&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-          <div class="cep">–&nbsp;</div>
-        </div>
+        <div class="schedule-text no-course" aria-hidden="true"><span>–</span></div>
       </div>
 
       <div class="specialisation" data-title="Spécialisation">

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/organisms/hero/hero.yml

@@ -3,6 +3,8 @@ title: Hero
 notes: |
   The hero component is used as intro to basic pages.
 
+  You can add the `.top-center` class to the `<img>` tag if you want the background picture to be centred from the top of the image, or the `bottom-center` class to the `<img>` tag if you want the background picture to be centred from the bottom of the image.
+
 variants:
   - name: legend
     title: Hero with image legend

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 {
@@ -16921,6 +16929,14 @@ a.nav-arrow:hover .icon-container {
   width: 100%;
   height: 100%;
 }
+.hero-img img.top-center {
+  -o-object-position: top center;
+     object-position: top center;
+}
+.hero-img img.bottom-center {
+  -o-object-position: bottom center;
+     object-position: bottom center;
+}
 @media (min-width: 1600px) {
   .hero-img picture {
     height: 80vh;
@@ -17537,6 +17553,19 @@ a.cc-link {
   font-size: 1rem;
   font-weight: 700;
 }
+.table-like ul {
+  margin: 0;
+  padding: 0;
+}
+.table-like ul li {
+  line-height: 1.3;
+}
+.table-like ul li:before {
+  top: 0.45em;
+}
+.table-like ul li + li {
+  margin-top: 0.25em;
+}
 .table-like .line,
 .table-like .first-line {
   display: grid;
@@ -17647,6 +17676,13 @@ a.cc-link {
 .table-like .line-down .bachlor {
   padding: 0 !important;
 }
+.table-like .schedule-text.no-course {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: #8e8e8e;
+}
 .table-like .bachlor-text {
   height: 100%;
   background: repeating-linear-gradient(0deg, #fff, #fff 2px, #d5d5d5 2px, #d5d5d5 4px);
@@ -17685,6 +17721,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 +17747,6 @@ a.cc-link {
   color: #707070;
 }
 .table-like .specialisation p {
-  display: inline-block;
   font-size: 0.875rem;
   margin-right: 0.6rem;
 }
@@ -17721,22 +17757,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;
 }