deploy: a9aeb44

epfl-si · Aug 3, 2023 · e8db85f · e8db85f
1 parent f74c087
commit e8db85f
Show file tree

Hide file tree

Showing 26 changed files with 678 additions and 169 deletions.
diff --git a/components/atoms/nav-user/nav-user-login.twig b/components/atoms/nav-user/nav-user-login.twig
@@ -0,0 +1,6 @@
+<div class="nav-user user-login mr-lg-2">
+  <a href="#" class="user-login-link">
+    {% include '@atoms/icon/icon.twig' with {'icon': 'user', icon_classes: 'feather'} %}
+    <span class="label">Connexion</span>
+  </a>
+</div>
diff --git a/components/atoms/nav-user/nav-user.twig b/components/atoms/nav-user/nav-user.twig
@@ -0,0 +1,16 @@
+<div class="nav-user dropdown user-dropdown mr-lg-2">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <img class="user-avatar rounded-circle" src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
+    <p class="user-name">Heidy Traill</p>
+  </button>
+  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+    <li class="dropdown-item">
+      {% include '@atoms/icon/icon.twig' with {'icon': 'user', icon_classes: 'feather'} %}
+      <a href="#">Accéder à mon compte</a>
+    </li>
+    <li class="dropdown-item">
+      {% include '@atoms/icon/icon.twig' with {'icon': 'log-out', icon_classes: 'feather'} %}
+      <a href="#">Me déconnecter</a>
+    </li>
+  </ul>
+</div>
diff --git a/components/atoms/nav-user/nav-user.yml b/components/atoms/nav-user/nav-user.yml
@@ -0,0 +1,10 @@
+title: Nav user
+name: nav-user
+notes: |
+  * If included in the header, the user dropdown and login link should be placed between the search form and language selector.
+  * If you choose to place it elsewhere, you may need to adjust the Boostratp margin classes on the `.nav-user` element.
+  * An example of user menu integration can be found on the [Laboratory Homepage](#/pages/lab-homepage) template page.
+variants:
+  - name: login
+    title: Login link
+    notes: 
diff --git a/components/atoms/tag/tag.twig b/components/atoms/tag/tag.twig
@@ -8,14 +8,14 @@
 <a href="#" class="tag tag-secondary">Secondary</a>
 <hr>
 <h5>removable</h5>
-<span class="tag tag-primary">
+<button class="btn tag tag-primary">
   Primary
-  <a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a>
-</span>
-<span class="tag tag-secondary">
+  <span class="btn btn-secondary remove" title="Remove">×</span>
+</button>
+<button class="btn tag tag-secondary">
   Secondary
-  <a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a>
-</span>
+  <span class="btn btn-secondary remove" title="Remove">×</span>
+</button>
 <hr>
 <h5>Small</h5>
 <span class="tag tag-sm tag-plain">Plain</span>

diff --git a/components/content-types/event/event-listing-featured.twig b/components/content-types/event/event-listing-featured.twig
@@ -1,5 +1,5 @@
 <div class="list-group list-events list-events-featured">
-  {% include '@molecules/card/card-event.twig' %}
-  {% include '@molecules/card/card-event.twig' with { eventLocation: 'online_room', live_now: true, online_event: true } %}
-  {% include '@molecules/card/card-event.twig' with { eventLocation: 'online', online_event: true } %}
+  {% include '@molecules/list-group/list-group-event.twig' %}
+  {% include '@molecules/list-group/list-group-event.twig' with { eventLocation: 'online_room', live_now: true, online_event: true } %}
+  {% include '@molecules/list-group/list-group-event.twig' with { eventLocation: 'online', online_event: true } %}
 </div>
diff --git a/components/content-types/event/event-listing.twig b/components/content-types/event/event-listing.twig
@@ -1,11 +1,11 @@
 <div class="list-group list-events {% if hasGrayBackground|default(false) %}list-group-gray{% endif %}">
 
-  {% include '@molecules/card/card-event.twig' with { eventLocation: 'online_room', live_now: true } %}
+  {% include '@molecules/list-group/list-group-event.twig' with { eventLocation: 'online_room', live_now: true } %}
 
-  {% include '@molecules/card/card-event.twig' with { eventLocation: 'online' } %}
+  {% include '@molecules/list-group/list-group-event.twig' with { eventLocation: 'online' } %}
 
   {% for i in 1..3 %}
-    {% include '@molecules/card/card-event.twig' %}
+    {% include '@molecules/list-group/list-group-event.twig' %}
   {% endfor %}
 
   {% if bottomlink|default(true) %}

diff --git a/components/content-types/event/event.twig b/components/content-types/event/event.twig
@@ -10,24 +10,54 @@
     {% block summary %}{% endblock -%}
     <div class="card-info">
       {% block date %}
-      <span class="card-info-date" itemprop="startDate" content="2018-01-10T12:00">10.01.2018</span>
-      <span>13:00</span>
-      <span>17:30</span>
-      {% endblock %}
-      <p>
-      <span itemprop="performer" itemscope itemtype="http://schema.org/performer">
-      {% block speaker %}
-        Avec <b>Prof. Dr. Aditya Mueller</b>
+      <p class="event-info-date mb-1">
+        {% include '@atoms/icon/icon.twig' with { icon:  'calendar', icon_classes:'feather' } %}
+        <span class="sr-only">Dates: du</span>
+        <span class="card-info-date event-date" itemprop="startDate" content="2018-01-10T12:00">10.01.2018</span>
+        <span class="sep" aria-hidden="true">›</span>
+        <span class="sr-only">au</span>
+        <span class="card-info-date event-date" itemprop="endDate" content="2018-01-12T12:00">12.01.2018</span>
+        {% include '@atoms/icon/icon.twig' with { icon:  'clock', icon_classes:'feather' } %}
+        <span class="sr-only">Heures: de</span>
+        <span class="event-time">13:00</span>
+        <span class="sep" aria-hidden="true">›</span>
+        <span class="sr-only">à</span>
+        <span class="event-time">17:30</span>
+      </p>
       {% endblock %}
-      </span>
-      <span itemprop="location" itemscope itemtype="http://schema.org/Place">
-      <br>
-        {% block info %}
-        Lieu : <b><span itemprop="name">ArtLab EPFL</span></b>
-        <br> Catégorie : <b>Événements culturel</b>
+      <div class="event-info mt-1">
+        {% block speaker %}
+        <p class="event-speaker" itemprop="performer" itemscope itemtype="http://schema.org/performer">
+          <b>Intervenant·e:</b> Prof. Dr. Aditya Mueller
+        </p>  
         {% endblock %}
-      </span>
-      </p>
+        {% block location %}
+        <p class="event-location" itemprop="location" itemscope itemtype="http://schema.org/Place">
+          {% if eventLocation == 'online' %}
+          <b>Lieu:</b> {% include '@atoms/icon/icon.twig' with { icon: 'monitor', icon_classes:'feather' } %}
+          <span itemprop="name">En ligne</span>
+          {% elseif eventLocation == 'online_room' %}
+          <b>Lieu:</b> {% include '@atoms/icon/icon.twig' with { icon: 'map-pin', icon_classes:'feather' } %}
+          <span itemprop="name">ArtLab EPFL</span> &amp;
+          {% include '@atoms/icon/icon.twig' with { icon: 'monitor', icon_classes:'feather' } %}
+          <span itemprop="name">En ligne</span>
+          {% else %}
+          <b>Lieu:</b> {% include '@atoms/icon/icon.twig' with { icon: 'map-pin', icon_classes:'feather' } %}
+          <span itemprop="name">ArtLab EPFL</span>
+          {% endif %}
+        </p>
+        {% endblock %}
+        {% block category %}
+        <p class="event-category">
+          <b>Catégorie:</b> Événements culturel
+        </p>
+        {% endblock %}
+        {% block audience %}
+        <p class="event-audience" itemprop="audience" itemscope itemtype="https://schema.org/audience">
+          <b>Public cible:</b> Tout public
+        </p>
+        {% endblock %}
+      </div>
     </div>
   </div>
   {% block footer %}{% endblock %}

diff --git a/components/molecules/card/card-event.twig → ...olecules/list-group/list-group-event.twig b/components/molecules/card/card-event.twig → ...olecules/list-group/list-group-event.twig
@@ -1,4 +1,4 @@
-<div href="#" class="list-group-item list-group-teaser" itemscope itemtype="http://schema.org/Event">
+<div class="list-group-item list-group-teaser" itemscope itemtype="http://schema.org/Event">
   <div class="list-group-teaser-container">
     <div class="list-group-teaser-thumbnail">
       {% include '@atoms/picture/picture.twig' with {'variant':'news-thumb'} %}
@@ -22,17 +22,16 @@
           <span class="sep" aria-hidden="true">›</span>
           <span class="sr-only">à</span>
           <span class="event-time">17:30</span>
-          {% endblock %}
         </p>
-        <p class="event-info mt-1">
-          <span class="event-speaker" itemprop="performer" itemscope itemtype="http://schema.org/performer">
+        {% endblock %}
+        <div class="event-info mt-1">
           {% block speaker %}
+          <p class="event-speaker" itemprop="performer" itemscope itemtype="http://schema.org/performer">
             <b>Intervenant·e:</b> Prof. Dr. Aditya Mueller
+          </p>  
           {% endblock %}
-          </span>            
-          <span class="event-location" itemprop="location" itemscope itemtype="http://schema.org/Place">
           {% block location %}
-            
+          <p class="event-location" itemprop="location" itemscope itemtype="http://schema.org/Place">
             {% if eventLocation == 'online' %}
             <b>Lieu:</b> {% include '@atoms/icon/icon.twig' with { icon: 'monitor', icon_classes:'feather' } %}
             <span itemprop="name"><a href="#">En ligne</a></span>
@@ -45,20 +44,19 @@
             <b>Lieu:</b> {% include '@atoms/icon/icon.twig' with { icon: 'map-pin', icon_classes:'feather' } %}
             <span itemprop="name"><a href="#">ArtLab EPFL</a></span>
             {% endif %}
-            
+          </p>
           {% endblock %}
-          </span>
-          <span class="event-category">
           {% block category %}
+          <p class="event-category">
             <b>Catégorie:</b> Événements culturel
+          </p>
           {% endblock %}
-          </span>
-          <span class="event-audience" itemprop="audience" itemscope itemtype="https://schema.org/audience">
           {% block audience %}
+          <p class="event-audience" itemprop="audience" itemscope itemtype="https://schema.org/audience">
             <b>Public cible:</b> Tout public
+          </p>
           {% endblock %}
-          </span>
-        </p>
+        </div>
 
         <p class="pt-3 event-actions">
           {% if live_now|default(false) %}

diff --git a/components/organisms/footer/footer-buttons.twig b/components/organisms/footer/footer-buttons.twig
@@ -4,22 +4,22 @@
 <p class="footer-title footer-title-no-underline">Pratique</p>
 <a href="https://www.epfl.ch/campus/services/" class="btn btn-secondary btn-sm">Services et ressources</a>
 <a href="tel:+41216933000" class="btn btn-secondary btn-sm">Urgences : +41 21 693 3000</a>
-<a href="https://www.epfl.ch/about/overview/contact/" class="btn btn-secondary btn-sm">Contact</a>
+<a href="https://www.epfl.ch/about/fr/contact/" class="btn btn-secondary btn-sm">Contact</a>
 <a href="https://map.epfl.ch/?lang=fr" class="btn btn-secondary btn-sm">Plan</a>
 {% endif %}
 
 {% if language == 'en' %}
 <p class="footer-title footer-title-no-underline">Practical</p>
 <a href="https://www.epfl.ch/campus/services/en/" class="btn btn-secondary btn-sm">Services & Resources</a>
 <a href="tel:+41216933000" class="btn btn-secondary btn-sm">Emergencies: +41 21 693 3000</a>
-<a href="https://www.epfl.ch/about/overview/contact-en/" class="btn btn-secondary btn-sm">Contact</a>
+<a href="https://www.epfl.ch/about/contact-en/" class="btn btn-secondary btn-sm">Contact</a>
 <a href="https://map.epfl.ch/?lang=en" class="btn btn-secondary btn-sm">Map</a>
 {% endif %}
 
 {% if language == 'de' %}
     <p class="footer-title footer-title-no-underline">Praktische Hinweise</p>
     <a href="https://www.epfl.ch/campus/services/en/" class="btn btn-secondary btn-sm">Services und Ressourcen</a>
     <a href="tel:+41216933000" class="btn btn-secondary btn-sm">Notfälle : +41 21 693 3000</a>
-    <a href="https://www.epfl.ch/about/overview/de/kontakt/" class="btn btn-secondary btn-sm">Kontakt</a>
+    <a href="https://www.epfl.ch/about/de/kontakt/" class="btn btn-secondary btn-sm">Kontakt</a>
     <a href="https://map.epfl.ch/" class="btn btn-secondary btn-sm">Plan</a>
 {% endif %}
diff --git a/components/organisms/header/header-light.twig b/components/organisms/header/header-light.twig
@@ -1,5 +1,8 @@
 {% if language is not defined %}{% set language = 'fr' %}{% endif %}
+{% if long_nav_lang is not defined %}{% set long_nav_lang = false %}{% endif %}
+{% if nav_user is not defined %}{% set nav_user = false %}{% endif %}
 {% set site_title = site_title|default('sub site name') %}
+
 <header role="banner" class="header header-light">
   <div class="header-light-content">
     <a class="logo" href="https://www.epfl.ch">
@@ -30,7 +33,15 @@
     </ul>
     {% include '@molecules/search/search-mobile.twig' %}
     {% include '@molecules/search/search.twig' %}
-    {% include '@atoms/nav-lang/nav-lang-short.twig' %}
+    {%  if nav_user %}
+      {% include '@atoms/nav-user/nav-user.twig' %}
+    {% endif %}
+    {%  if long_nav_lang %}
+      {% include '@atoms/nav-lang/nav-lang.twig' %}
+    {% endif %}
+    {%  if long_nav_lang == false %}
+      {% include '@atoms/nav-lang/nav-lang-short.twig' %}
+    {% endif %}
     {% include '@atoms/nav-toggle-mobile/nav-toggle-mobile.twig' %}
   </div>
 </header>
diff --git a/components/organisms/header/header.twig b/components/organisms/header/header.twig
@@ -1,5 +1,6 @@
 {% if language is not defined %}{% set language = 'fr' %}{% endif %}
 {% if long_nav_lang is not defined %}{% set long_nav_lang = false %}{% endif %}
+{% if nav_user is not defined %}{% set nav_user = false %}{% endif %}
 
 <header role="banner" class="header">
   <a class="logo" href="#">
@@ -22,6 +23,9 @@
   </ul>
   {% include '@molecules/search/search.twig' %}
   {% include '@molecules/search/search-mobile.twig' %}
+  {%  if nav_user %}
+    {% include '@atoms/nav-user/nav-user.twig' %}
+  {% endif %}
   {%  if long_nav_lang %}
     {% include '@atoms/nav-lang/nav-lang.twig' %}
   {% endif %}

diff --git a/components/organisms/restauration/restauration.twig b/components/organisms/restauration/restauration.twig
@@ -32,10 +32,10 @@
         <div class="tag-group mb-3">
           <label for="">Filtres de recherches</label>
           <div>
-            <a href="javascript:void(0)" class="tag tag-plain">Tout effacer<span class="remove" tabindex="-1" title="Remove">×</span></a>
-            <a href="javascript:void(0)" class="tag tag-primary">Campus Biotech Genève<span class="remove" tabindex="-1" title="Remove">×</span></a>
-            <a href="javascript:void(0)" class="tag tag-primary">Fleur de Pains<span class="remove" tabindex="-1" title="Remove">×</span></a>
-            <a href="javascript:void(0)" class="tag tag-primary">Food Truck<span class="remove" tabindex="-1" title="Remove">×</span></a>
+            <button class="btn tag tag-plain">Tout effacer</button>
+            <button class="btn tag tag-primary">Campus Biotech Genève<span class="remove" title="Remove">×</span></button>
+            <button class="btn tag tag-primary">Fleur de Pains<span class="remove" title="Remove">×</span></button>
+            <button class="btn tag tag-primary">Food Truck<span class="remove" title="Remove">×</span></button>
           </div>
         </div>
       </div>

diff --git a/components/pages/association-homepage/association-homepage.twig b/components/pages/association-homepage/association-homepage.twig
@@ -3,7 +3,7 @@
 {% extends "@templates/base/base.twig" %}
 
 {% block header %}
-  {% include '@organisms/header/header-light.twig' with { site_title: 'Association title' } %}
+  {% include '@organisms/header/header-light.twig' with { site_title: 'Association title',  long_nav_lang: true, nav_user: true } %}
 {% endblock %}
 
 {% block content %}

diff --git a/components/pages/event-list/event-list.twig b/components/pages/event-list/event-list.twig
@@ -122,14 +122,14 @@
 
   <div class="event-filter-tags mt-2">
     <div class="tag-group">
-      <label for="">Filtres de recherches</label>
+      <label for="">Filtres de recherche</label>
       <div>
-        <a href="javascript:void(0)" class="tag tag-plain">Tout effacer<span class="remove" tabindex="-1" title="Remove">×</span></a>
-        <a href="javascript:void(0)" class="tag tag-primary">Évènements culturels et festifs<span class="remove" tabindex="-1" title="Remove">×</span></a>
-        <a href="javascript:void(0)" class="tag tag-primary">Expositions<span class="remove" tabindex="-1" title="Remove">×</span></a>
-        <a href="javascript:void(0)" class="tag tag-primary">Entrée libre<span class="remove" tabindex="-1" title="Remove">×</span></a>
-        <a href="javascript:void(0)" class="tag tag-primary">Tout public<span class="remove" tabindex="-1" title="Remove">×</span></a>
-        <a href="javascript:void(0)" class="tag tag-primary">Français<span class="remove" tabindex="-1" title="Remove">×</span></a>
+        <button class="btn tag tag-plain">Tout effacer</button>
+        <button class="btn tag tag-primary">Évènements culturels et festifs<span class="remove" title="Remove">×</span></button>
+        <button class="btn tag tag-primary">Expositions<span class="remove" title="Remove">×</span></button>
+        <button class="btn tag tag-primary">Entrée libre<span class="remove" title="Remove">×</span></button>
+        <button class="btn tag tag-primary">Tout public<span class="remove" title="Remove">×</span></button>
+        <button class="btn tag tag-primary">Français<span class="remove" title="Remove">×</span></button>
       </div>
     </div>
   </div>
@@ -149,13 +149,13 @@
   </div>
 
   <div class="list-group list-events mt-4">
-    {% include '@molecules/card/card-event.twig' with { eventLocation: 'online_room', live_now: true } %}
-    {% include '@molecules/card/card-event.twig' with { eventLocation: 'online', live_now: true } %}
+    {% include '@molecules/list-group/list-group-event.twig' with { eventLocation: 'online_room', live_now: true } %}
+    {% include '@molecules/list-group/list-group-event.twig' with { eventLocation: 'online', live_now: true } %}
     {% for i in 1..2 %}
-      {% include '@molecules/card/card-event.twig' with { eventLocation: 'online' } %}
+      {% include '@molecules/list-group/list-group-event.twig' with { eventLocation: 'online' } %}
     {% endfor %}
     {% for i in 1..6 %}
-      {% include '@molecules/card/card-event.twig' %}
+      {% include '@molecules/list-group/list-group-event.twig' %}
     {% endfor %}
   </div>
 

diff --git a/components/pages/lab-homepage/lab-homepage.twig b/components/pages/lab-homepage/lab-homepage.twig
@@ -1,5 +1,9 @@
 {% extends "@templates/base/base.twig" %}
 
+{% block header %}
+  {% include '@organisms/header/header.twig' with { nav_user: true } %}
+{% endblock %}
+
 {% set nav_aside_items = [{
   label: "Laboratory Full Name",
   children: ["Projects", "Publications", "News", "Team", "Teaching"]