epfl-elements 4.2.1 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/assets/config/variables.scss +9 -0
  2. package/dist/components/atoms/nav-lang/nav-lang.twig +2 -2
  3. package/dist/components/atoms/nav-toggle-mobile/nav-toggle-mobile.twig +2 -2
  4. package/dist/components/atoms/nav-user/nav-user-login.twig +6 -0
  5. package/dist/components/atoms/nav-user/nav-user.twig +16 -0
  6. package/dist/components/atoms/nav-user/nav-user.yml +10 -0
  7. package/dist/components/atoms/tag/tag.twig +6 -6
  8. package/dist/components/content-types/event/event-listing-featured.twig +3 -3
  9. package/dist/components/content-types/event/event-listing.twig +3 -3
  10. package/dist/components/content-types/event/event.twig +46 -16
  11. package/dist/components/content-types/graph-search/graph-search.twig +37 -0
  12. package/dist/components/content-types/graph-search/graph-search.yml +2 -0
  13. package/dist/components/molecules/list-group/list-group-event.twig +74 -0
  14. package/dist/components/organisms/footer/footer-buttons.twig +3 -3
  15. package/dist/components/organisms/header/header-light.twig +12 -1
  16. package/dist/components/organisms/header/header.twig +4 -0
  17. package/dist/components/organisms/restauration/restauration.twig +4 -4
  18. package/dist/components/pages/association-homepage/association-homepage.twig +1 -1
  19. package/dist/components/pages/event-list/event-list.twig +11 -11
  20. package/dist/components/pages/lab-homepage/lab-homepage.twig +4 -0
  21. package/dist/components/pages/people-detail/people-detail.twig +1 -1
  22. package/dist/css/elements.css +423 -51
  23. package/dist/css/elements.min.css +1 -1
  24. package/dist/css/elements.min.css.map +1 -1
  25. package/dist/css/reader.css +8 -0
  26. package/dist/css/reader.min.css +1 -1
  27. package/dist/css/reader.min.css.map +1 -1
  28. package/dist/docs/user documentation/reports.md +27 -22
  29. package/dist/icons/icons.svg +1 -1
  30. package/dist/js/reader.js +1284 -611
  31. package/dist/js/reader.min.js +1 -1
  32. package/dist/js/reader.min.js.map +1 -1
  33. package/dist/package.json +9 -7
  34. package/package.json +8 -6
@@ -34,6 +34,15 @@ $opacities: map.merge((
34
34
  "100": 1,
35
35
  ), $opacities);
36
36
 
37
+ // Font-size
38
+
39
+ $small-font-size: 0.875rem;
40
+
41
+ $btn-font-size-sm: 0.875rem;
42
+ $btn-padding-y-sm: 0.375rem;
43
+ $btn-padding-x-sm: 0.75rem;
44
+ $btn-line-height-sm: 1.5;
45
+
37
46
  // Legacy font-size
38
47
  $legacy-font-size-xl: 1.25rem;
39
48
  $legacy-font-size-lg: 1.125rem;
@@ -1,8 +1,8 @@
1
1
  <nav class="nav-lang ml-auto dropdown" aria-label="Change language">
2
- <a href="#" class="dropdown-toggle btn btn-secondary" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">
2
+ <button class="dropdown-toggle btn btn-secondary" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">
3
3
  {% include '@atoms/icon/icon.twig' with {icon: 'icon-planet'} %}
4
4
  <span>FR</span>
5
- </a>
5
+ </button>
6
6
  <ul class="dropdown-menu">
7
7
  <li>
8
8
  <a aria-label="Français (Current language)" class="active dropdown-item" >
@@ -1,8 +1,8 @@
1
- <div class="btn btn-secondary nav-toggle-mobile d-xl-none">
1
+ <button class="btn btn-secondary nav-toggle-mobile d-xl-none">
2
2
  <span class="label">Menu</span>
3
3
  <div class="hamburger">
4
4
  <span></span>
5
5
  <span></span>
6
6
  <span></span>
7
7
  </div>
8
- </div>
8
+ </button>
@@ -0,0 +1,6 @@
1
+ <div class="nav-user user-login mr-lg-2">
2
+ <a href="#" class="user-login-link">
3
+ {% include '@atoms/icon/icon.twig' with {'icon': 'user', icon_classes: 'feather'} %}
4
+ <span class="label">Connexion</span>
5
+ </a>
6
+ </div>
@@ -0,0 +1,16 @@
1
+ <div class="nav-user dropdown user-dropdown mr-lg-2">
2
+ <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
3
+ <img class="user-avatar rounded-circle" src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
4
+ <p class="user-name">Heidy Traill</p>
5
+ </button>
6
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
7
+ <li class="dropdown-item">
8
+ {% include '@atoms/icon/icon.twig' with {'icon': 'user', icon_classes: 'feather'} %}
9
+ <a href="#">Accéder à mon compte</a>
10
+ </li>
11
+ <li class="dropdown-item">
12
+ {% include '@atoms/icon/icon.twig' with {'icon': 'log-out', icon_classes: 'feather'} %}
13
+ <a href="#">Me déconnecter</a>
14
+ </li>
15
+ </ul>
16
+ </div>
@@ -0,0 +1,10 @@
1
+ title: Nav user
2
+ name: nav-user
3
+ notes: |
4
+ * If included in the header, the user dropdown and login link should be placed between the search form and language selector.
5
+ * If you choose to place it elsewhere, you may need to adjust the Boostratp margin classes on the `.nav-user` element.
6
+ * An example of user menu integration can be found on the [Laboratory Homepage](#/pages/lab-homepage) template page.
7
+ variants:
8
+ - name: login
9
+ title: Login link
10
+ notes:
@@ -8,14 +8,14 @@
8
8
  <a href="#" class="tag tag-secondary">Secondary</a>
9
9
  <hr>
10
10
  <h5>removable</h5>
11
- <span class="tag tag-primary">
11
+ <button class="btn tag tag-primary">
12
12
  Primary
13
- <a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a>
14
- </span>
15
- <span class="tag tag-secondary">
13
+ <span class="btn btn-secondary remove" title="Remove">×</span>
14
+ </button>
15
+ <button class="btn tag tag-secondary">
16
16
  Secondary
17
- <a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a>
18
- </span>
17
+ <span class="btn btn-secondary remove" title="Remove">×</span>
18
+ </button>
19
19
  <hr>
20
20
  <h5>Small</h5>
21
21
  <span class="tag tag-sm tag-plain">Plain</span>
@@ -1,5 +1,5 @@
1
1
  <div class="list-group list-events list-events-featured">
2
- {% include '@molecules/card/card-event.twig' %}
3
- {% include '@molecules/card/card-event.twig' with { eventLocation: 'online_room', live_now: true, online_event: true } %}
4
- {% include '@molecules/card/card-event.twig' with { eventLocation: 'online', online_event: true } %}
2
+ {% include '@molecules/list-group/list-group-event.twig' %}
3
+ {% include '@molecules/list-group/list-group-event.twig' with { eventLocation: 'online_room', live_now: true, online_event: true } %}
4
+ {% include '@molecules/list-group/list-group-event.twig' with { eventLocation: 'online', online_event: true } %}
5
5
  </div>
@@ -1,11 +1,11 @@
1
1
  <div class="list-group list-events {% if hasGrayBackground|default(false) %}list-group-gray{% endif %}">
2
2
 
3
- {% include '@molecules/card/card-event.twig' with { eventLocation: 'online_room', live_now: true } %}
3
+ {% include '@molecules/list-group/list-group-event.twig' with { eventLocation: 'online_room', live_now: true } %}
4
4
 
5
- {% include '@molecules/card/card-event.twig' with { eventLocation: 'online' } %}
5
+ {% include '@molecules/list-group/list-group-event.twig' with { eventLocation: 'online' } %}
6
6
 
7
7
  {% for i in 1..3 %}
8
- {% include '@molecules/card/card-event.twig' %}
8
+ {% include '@molecules/list-group/list-group-event.twig' %}
9
9
  {% endfor %}
10
10
 
11
11
  {% if bottomlink|default(true) %}
@@ -10,24 +10,54 @@
10
10
  {% block summary %}{% endblock -%}
11
11
  <div class="card-info">
12
12
  {% block date %}
13
- <span class="card-info-date" itemprop="startDate" content="2018-01-10T12:00">10.01.2018</span>
14
- <span>13:00</span>
15
- <span>17:30</span>
16
- {% endblock %}
17
- <p>
18
- <span itemprop="performer" itemscope itemtype="http://schema.org/performer">
19
- {% block speaker %}
20
- Avec <b>Prof. Dr. Aditya Mueller</b>
13
+ <p class="event-info-date mb-1">
14
+ {% include '@atoms/icon/icon.twig' with { icon: 'calendar', icon_classes:'feather' } %}
15
+ <span class="sr-only">Dates: du</span>
16
+ <span class="card-info-date event-date" itemprop="startDate" content="2018-01-10T12:00">10.01.2018</span>
17
+ <span class="sep" aria-hidden="true">›</span>
18
+ <span class="sr-only">au</span>
19
+ <span class="card-info-date event-date" itemprop="endDate" content="2018-01-12T12:00">12.01.2018</span>
20
+ {% include '@atoms/icon/icon.twig' with { icon: 'clock', icon_classes:'feather' } %}
21
+ <span class="sr-only">Heures: de</span>
22
+ <span class="event-time">13:00</span>
23
+ <span class="sep" aria-hidden="true">›</span>
24
+ <span class="sr-only">à</span>
25
+ <span class="event-time">17:30</span>
26
+ </p>
21
27
  {% endblock %}
22
- </span>
23
- <span itemprop="location" itemscope itemtype="http://schema.org/Place">
24
- <br>
25
- {% block info %}
26
- Lieu : <b><span itemprop="name">ArtLab EPFL</span></b>
27
- <br> Catégorie : <b>Événements culturel</b>
28
+ <div class="event-info mt-1">
29
+ {% block speaker %}
30
+ <p class="event-speaker" itemprop="performer" itemscope itemtype="http://schema.org/performer">
31
+ <b>Intervenant·e:</b> Prof. Dr. Aditya Mueller
32
+ </p>
28
33
  {% endblock %}
29
- </span>
30
- </p>
34
+ {% block location %}
35
+ <p class="event-location" itemprop="location" itemscope itemtype="http://schema.org/Place">
36
+ {% if eventLocation == 'online' %}
37
+ <b>Lieu:</b> {% include '@atoms/icon/icon.twig' with { icon: 'monitor', icon_classes:'feather' } %}
38
+ <span itemprop="name">En ligne</span>
39
+ {% elseif eventLocation == 'online_room' %}
40
+ <b>Lieu:</b> {% include '@atoms/icon/icon.twig' with { icon: 'map-pin', icon_classes:'feather' } %}
41
+ <span itemprop="name">ArtLab EPFL</span> &amp;
42
+ {% include '@atoms/icon/icon.twig' with { icon: 'monitor', icon_classes:'feather' } %}
43
+ <span itemprop="name">En ligne</span>
44
+ {% else %}
45
+ <b>Lieu:</b> {% include '@atoms/icon/icon.twig' with { icon: 'map-pin', icon_classes:'feather' } %}
46
+ <span itemprop="name">ArtLab EPFL</span>
47
+ {% endif %}
48
+ </p>
49
+ {% endblock %}
50
+ {% block category %}
51
+ <p class="event-category">
52
+ <b>Catégorie:</b> Événements culturel
53
+ </p>
54
+ {% endblock %}
55
+ {% block audience %}
56
+ <p class="event-audience" itemprop="audience" itemscope itemtype="https://schema.org/audience">
57
+ <b>Public cible:</b> Tout public
58
+ </p>
59
+ {% endblock %}
60
+ </div>
31
61
  </div>
32
62
  </div>
33
63
  {% block footer %}{% endblock %}
@@ -0,0 +1,37 @@
1
+ <div class="list-group">
2
+
3
+ <div class="list-group-item list-group-item-borderless col-12 col-lg-8">
4
+ <p class="tag tag-sm bg-light border-light mb-2"><strong>Concepts</strong></p>
5
+ <h3 class="h5 my-1"><a href="#">Biology</a></h3>
6
+ <p class="text-small text-muted mb-1">https://graphsearch.epfl.ch/…</p>
7
+ <p><i>Biology</i> is the scientific study of life. It is a natural science with a broad scope but has several unifying themes that tie it together as a single, coherent …</p>
8
+ </div>
9
+
10
+ <div class="list-group-item list-group-item-borderless col-12 col-lg-8">
11
+ <p class="tag tag-sm bg-light border-light mb-2"><strong>Courses</strong></p>
12
+ <h3 class="h5 my-1"><a href="#">CH-313 - Chemical biology </a></h3>
13
+ <p class="text-small text-muted mb-1">https://graphsearch.epfl.ch/…</p>
14
+ <p>Closely interfacing with bioengineering and medicine, this course provides foundational concepts in applying small-molecule chemical toolsets to probe the functions …</p>
15
+ </div>
16
+
17
+ <div class="list-group-item list-group-item-borderless col-12 col-lg-8">
18
+ <p class="tag tag-sm bg-light border-light mb-2"><strong>Publications</strong></p>
19
+ <h3 class="h5 my-1"><a href="#">Chemical and Biological Gradients along the Damma Glacier Soil Chronosequence, Switzerland</a></h3>
20
+ <p class="text-small text-muted mb-1">https://graphsearch.epfl.ch/…</p>
21
+ <p class="text-sm mt-2 mb-1 d-flex align-items-center">
22
+ <svg class="icon feather align-middle mr-1" aria-hidden="true">
23
+ <use xlink:href="#calendar"></use>
24
+ </svg>
25
+ <span class="align-middle">Published in 2011</span>
26
+ </p>
27
+ <p class="text-sm mb-2 d-flex align-items-center">
28
+ <svg class="icon feather align-middle mr-1" aria-hidden="true">
29
+ <use xlink:href="#users"></use>
30
+ </svg>
31
+ <span class="sr-only">Authors: </span>
32
+ <span class="align-middle"><a href="#"><strong>Camille Sigi</strong></a>, <a href="#"><strong>Lou Pereira</strong></a>, <a href="#"><strong>Charlie Müller</strong></a></span>
33
+ </p>
34
+ <p>PhD at the Biocenter, University of Basel 1989-1992. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lacus vulputate, congue ligula id …</p>
35
+ </div>
36
+
37
+ </div>
@@ -0,0 +1,2 @@
1
+ title: Graph Search
2
+ name: graph-search
@@ -0,0 +1,74 @@
1
+ <div class="list-group-item list-group-teaser" itemscope itemtype="http://schema.org/Event">
2
+ <div class="list-group-teaser-container">
3
+ <div class="list-group-teaser-thumbnail">
4
+ {% include '@atoms/picture/picture.twig' with {'variant':'news-thumb'} %}
5
+ </div>
6
+ <div class="list-group-teaser-content">
7
+ <p class="h5 card-title" itemprop="name">
8
+ <a href="#">Startup Acceleration Workshops</a>
9
+ </p>
10
+ <div class="card-info mt-0">
11
+ {% block date %}
12
+ <p class="event-info-date">
13
+ {% include '@atoms/icon/icon.twig' with { icon: 'calendar', icon_classes:'feather' } %}
14
+ <span class="sr-only">Dates: du</span>
15
+ <span class="card-info-date event-date" itemprop="startDate" content="2018-01-10T12:00">10.01.2018</span>
16
+ <span class="sep" aria-hidden="true">›</span>
17
+ <span class="sr-only">au</span>
18
+ <span class="card-info-date event-date" itemprop="endDate" content="2018-01-12T12:00">12.01.2018</span>
19
+ {% include '@atoms/icon/icon.twig' with { icon: 'clock', icon_classes:'feather' } %}
20
+ <span class="sr-only">Heures: de</span>
21
+ <span class="event-time">13:00</span>
22
+ <span class="sep" aria-hidden="true">›</span>
23
+ <span class="sr-only">à</span>
24
+ <span class="event-time">17:30</span>
25
+ </p>
26
+ {% endblock %}
27
+ <div class="event-info mt-1">
28
+ {% block speaker %}
29
+ <p class="event-speaker" itemprop="performer" itemscope itemtype="http://schema.org/performer">
30
+ <b>Intervenant·e:</b> Prof. Dr. Aditya Mueller
31
+ </p>
32
+ {% endblock %}
33
+ {% block location %}
34
+ <p class="event-location" itemprop="location" itemscope itemtype="http://schema.org/Place">
35
+ {% if eventLocation == 'online' %}
36
+ <b>Lieu:</b> {% include '@atoms/icon/icon.twig' with { icon: 'monitor', icon_classes:'feather' } %}
37
+ <span itemprop="name"><a href="#">En ligne</a></span>
38
+ {% elseif eventLocation == 'online_room' %}
39
+ <b>Lieu:</b> {% include '@atoms/icon/icon.twig' with { icon: 'map-pin', icon_classes:'feather' } %}
40
+ <span itemprop="name"><a href="#">ArtLab EPFL</a></span> &amp;
41
+ {% include '@atoms/icon/icon.twig' with { icon: 'monitor', icon_classes:'feather' } %}
42
+ <span itemprop="name"><a href="#">En ligne</a></span>
43
+ {% else %}
44
+ <b>Lieu:</b> {% include '@atoms/icon/icon.twig' with { icon: 'map-pin', icon_classes:'feather' } %}
45
+ <span itemprop="name"><a href="#">ArtLab EPFL</a></span>
46
+ {% endif %}
47
+ </p>
48
+ {% endblock %}
49
+ {% block category %}
50
+ <p class="event-category">
51
+ <b>Catégorie:</b> Événements culturel
52
+ </p>
53
+ {% endblock %}
54
+ {% block audience %}
55
+ <p class="event-audience" itemprop="audience" itemscope itemtype="https://schema.org/audience">
56
+ <b>Public cible:</b> Tout public
57
+ </p>
58
+ {% endblock %}
59
+ </div>
60
+
61
+ <p class="pt-3 event-actions">
62
+ {% if live_now|default(false) %}
63
+ <a href="#" class="btn btn-primary btn-sm">{% include '@atoms/icon/icon.twig' with { icon: 'monitor', icon_classes:'feather' } %} Voir en direct</a>
64
+ {% endif %}
65
+ {% if live_future|default(false) %}
66
+ <a href="#" class="btn btn-secondary btn-sm">{% include '@atoms/icon/icon.twig' with { icon: 'monitor', icon_classes:'feather' } %} Diffusé en direct</a>
67
+ {% endif %}
68
+ <a href="#" class="btn btn-secondary btn-sm">{% include '@atoms/icon/icon.twig' with { icon: 'download', icon_classes:'feather' } %} Importer</a>
69
+ </p>
70
+
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </div>
@@ -4,7 +4,7 @@
4
4
  <p class="footer-title footer-title-no-underline">Pratique</p>
5
5
  <a href="https://www.epfl.ch/campus/services/" class="btn btn-secondary btn-sm">Services et ressources</a>
6
6
  <a href="tel:+41216933000" class="btn btn-secondary btn-sm">Urgences : +41 21 693 3000</a>
7
- <a href="https://www.epfl.ch/about/overview/contact/" class="btn btn-secondary btn-sm">Contact</a>
7
+ <a href="https://www.epfl.ch/about/fr/contact/" class="btn btn-secondary btn-sm">Contact</a>
8
8
  <a href="https://map.epfl.ch/?lang=fr" class="btn btn-secondary btn-sm">Plan</a>
9
9
  {% endif %}
10
10
 
@@ -12,7 +12,7 @@
12
12
  <p class="footer-title footer-title-no-underline">Practical</p>
13
13
  <a href="https://www.epfl.ch/campus/services/en/" class="btn btn-secondary btn-sm">Services & Resources</a>
14
14
  <a href="tel:+41216933000" class="btn btn-secondary btn-sm">Emergencies: +41 21 693 3000</a>
15
- <a href="https://www.epfl.ch/about/overview/contact-en/" class="btn btn-secondary btn-sm">Contact</a>
15
+ <a href="https://www.epfl.ch/about/contact-en/" class="btn btn-secondary btn-sm">Contact</a>
16
16
  <a href="https://map.epfl.ch/?lang=en" class="btn btn-secondary btn-sm">Map</a>
17
17
  {% endif %}
18
18
 
@@ -20,6 +20,6 @@
20
20
  <p class="footer-title footer-title-no-underline">Praktische Hinweise</p>
21
21
  <a href="https://www.epfl.ch/campus/services/en/" class="btn btn-secondary btn-sm">Services und Ressourcen</a>
22
22
  <a href="tel:+41216933000" class="btn btn-secondary btn-sm">Notfälle : +41 21 693 3000</a>
23
- <a href="https://www.epfl.ch/about/overview/de/kontakt/" class="btn btn-secondary btn-sm">Kontakt</a>
23
+ <a href="https://www.epfl.ch/about/de/kontakt/" class="btn btn-secondary btn-sm">Kontakt</a>
24
24
  <a href="https://map.epfl.ch/" class="btn btn-secondary btn-sm">Plan</a>
25
25
  {% endif %}
@@ -1,5 +1,8 @@
1
1
  {% if language is not defined %}{% set language = 'fr' %}{% endif %}
2
+ {% if long_nav_lang is not defined %}{% set long_nav_lang = false %}{% endif %}
3
+ {% if nav_user is not defined %}{% set nav_user = false %}{% endif %}
2
4
  {% set site_title = site_title|default('sub site name') %}
5
+
3
6
  <header role="banner" class="header header-light">
4
7
  <div class="header-light-content">
5
8
  <a class="logo" href="https://www.epfl.ch">
@@ -30,7 +33,15 @@
30
33
  </ul>
31
34
  {% include '@molecules/search/search-mobile.twig' %}
32
35
  {% include '@molecules/search/search.twig' %}
33
- {% include '@atoms/nav-lang/nav-lang-short.twig' %}
36
+ {% if nav_user %}
37
+ {% include '@atoms/nav-user/nav-user.twig' %}
38
+ {% endif %}
39
+ {% if long_nav_lang %}
40
+ {% include '@atoms/nav-lang/nav-lang.twig' %}
41
+ {% endif %}
42
+ {% if long_nav_lang == false %}
43
+ {% include '@atoms/nav-lang/nav-lang-short.twig' %}
44
+ {% endif %}
34
45
  {% include '@atoms/nav-toggle-mobile/nav-toggle-mobile.twig' %}
35
46
  </div>
36
47
  </header>
@@ -1,5 +1,6 @@
1
1
  {% if language is not defined %}{% set language = 'fr' %}{% endif %}
2
2
  {% if long_nav_lang is not defined %}{% set long_nav_lang = false %}{% endif %}
3
+ {% if nav_user is not defined %}{% set nav_user = false %}{% endif %}
3
4
 
4
5
  <header role="banner" class="header">
5
6
  <a class="logo" href="#">
@@ -22,6 +23,9 @@
22
23
  </ul>
23
24
  {% include '@molecules/search/search.twig' %}
24
25
  {% include '@molecules/search/search-mobile.twig' %}
26
+ {% if nav_user %}
27
+ {% include '@atoms/nav-user/nav-user.twig' %}
28
+ {% endif %}
25
29
  {% if long_nav_lang %}
26
30
  {% include '@atoms/nav-lang/nav-lang.twig' %}
27
31
  {% endif %}
@@ -32,10 +32,10 @@
32
32
  <div class="tag-group mb-3">
33
33
  <label for="">Filtres de recherches</label>
34
34
  <div>
35
- <a href="javascript:void(0)" class="tag tag-plain">Tout effacer<span class="remove" tabindex="-1" title="Remove">×</span></a>
36
- <a href="javascript:void(0)" class="tag tag-primary">Campus Biotech Genève<span class="remove" tabindex="-1" title="Remove">×</span></a>
37
- <a href="javascript:void(0)" class="tag tag-primary">Fleur de Pains<span class="remove" tabindex="-1" title="Remove">×</span></a>
38
- <a href="javascript:void(0)" class="tag tag-primary">Food Truck<span class="remove" tabindex="-1" title="Remove">×</span></a>
35
+ <button class="btn tag tag-plain">Tout effacer</button>
36
+ <button class="btn tag tag-primary">Campus Biotech Genève<span class="remove" title="Remove">×</span></button>
37
+ <button class="btn tag tag-primary">Fleur de Pains<span class="remove" title="Remove">×</span></button>
38
+ <button class="btn tag tag-primary">Food Truck<span class="remove" title="Remove">×</span></button>
39
39
  </div>
40
40
  </div>
41
41
  </div>
@@ -3,7 +3,7 @@
3
3
  {% extends "@templates/base/base.twig" %}
4
4
 
5
5
  {% block header %}
6
- {% include '@organisms/header/header-light.twig' with { site_title: 'Association title' } %}
6
+ {% include '@organisms/header/header-light.twig' with { site_title: 'Association title', long_nav_lang: true, nav_user: true } %}
7
7
  {% endblock %}
8
8
 
9
9
  {% block content %}
@@ -122,14 +122,14 @@
122
122
 
123
123
  <div class="event-filter-tags mt-2">
124
124
  <div class="tag-group">
125
- <label for="">Filtres de recherches</label>
125
+ <label for="">Filtres de recherche</label>
126
126
  <div>
127
- <a href="javascript:void(0)" class="tag tag-plain">Tout effacer<span class="remove" tabindex="-1" title="Remove">×</span></a>
128
- <a href="javascript:void(0)" class="tag tag-primary">Évènements culturels et festifs<span class="remove" tabindex="-1" title="Remove">×</span></a>
129
- <a href="javascript:void(0)" class="tag tag-primary">Expositions<span class="remove" tabindex="-1" title="Remove">×</span></a>
130
- <a href="javascript:void(0)" class="tag tag-primary">Entrée libre<span class="remove" tabindex="-1" title="Remove">×</span></a>
131
- <a href="javascript:void(0)" class="tag tag-primary">Tout public<span class="remove" tabindex="-1" title="Remove">×</span></a>
132
- <a href="javascript:void(0)" class="tag tag-primary">Français<span class="remove" tabindex="-1" title="Remove">×</span></a>
127
+ <button class="btn tag tag-plain">Tout effacer</button>
128
+ <button class="btn tag tag-primary">Évènements culturels et festifs<span class="remove" title="Remove">×</span></button>
129
+ <button class="btn tag tag-primary">Expositions<span class="remove" title="Remove">×</span></button>
130
+ <button class="btn tag tag-primary">Entrée libre<span class="remove" title="Remove">×</span></button>
131
+ <button class="btn tag tag-primary">Tout public<span class="remove" title="Remove">×</span></button>
132
+ <button class="btn tag tag-primary">Français<span class="remove" title="Remove">×</span></button>
133
133
  </div>
134
134
  </div>
135
135
  </div>
@@ -149,13 +149,13 @@
149
149
  </div>
150
150
 
151
151
  <div class="list-group list-events mt-4">
152
- {% include '@molecules/card/card-event.twig' with { eventLocation: 'online_room', live_now: true } %}
153
- {% include '@molecules/card/card-event.twig' with { eventLocation: 'online', live_now: true } %}
152
+ {% include '@molecules/list-group/list-group-event.twig' with { eventLocation: 'online_room', live_now: true } %}
153
+ {% include '@molecules/list-group/list-group-event.twig' with { eventLocation: 'online', live_now: true } %}
154
154
  {% for i in 1..2 %}
155
- {% include '@molecules/card/card-event.twig' with { eventLocation: 'online' } %}
155
+ {% include '@molecules/list-group/list-group-event.twig' with { eventLocation: 'online' } %}
156
156
  {% endfor %}
157
157
  {% for i in 1..6 %}
158
- {% include '@molecules/card/card-event.twig' %}
158
+ {% include '@molecules/list-group/list-group-event.twig' %}
159
159
  {% endfor %}
160
160
  </div>
161
161
 
@@ -1,5 +1,9 @@
1
1
  {% extends "@templates/base/base.twig" %}
2
2
 
3
+ {% block header %}
4
+ {% include '@organisms/header/header.twig' with { nav_user: true } %}
5
+ {% endblock %}
6
+
3
7
  {% set nav_aside_items = [{
4
8
  label: "Laboratory Full Name",
5
9
  children: ["Projects", "Publications", "News", "Team", "Teaching"]
@@ -33,7 +33,7 @@
33
33
  <div class="d-flex flex-wrap justify-content-between align-items-baseline">
34
34
  <h1 class="mr-3">Prenom Nom</h1>
35
35
  <div>
36
- {% include '@atoms/icon/icon.twig' %}
36
+ {% include '@atoms/icon/icon.twig' with {'icon': 'edit', icon_classes: 'feather'} %}
37
37
  <a href="#">
38
38
  Edit profile <span class="sr-only">of Prenom Nom</span>
39
39
  </a>