epfl-elements 1.0.0 → 4.0.0

package/dist/components/pages/event-list/event-list.twig

@@ -0,0 +1,173 @@
+{% set isSpecial = true %}
+
+{% extends "@templates/base/base.twig" %}
+
+{% block header %}
+  <header role="banner" class="header header-light">
+    {% include '@atoms/drawer/drawer.twig' %}
+    <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>Memento</h1>
+      <ul aria-hidden="true" class="nav-header d-none d-xl-flex">
+        <li class="dropdown">
+          <button class="btn btn-link dropdown-toggle nav-item" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Mémentos
+          </button>
+          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+            <a class="dropdown-item" href="#">Option 1</a>
+            <a class="dropdown-item active" href="#">Option 2</a>
+            <a class="dropdown-item" href="#">Option 3</a>
+          </div>
+        </li>
+        <li id="menu-item-{{ loop.index }}" {% if loop.index == 2 %} class="current-menu-item"{% endif %}>
+          <a class="nav-item" href="#">Annoncer un événement</a>
+        </li>
+        <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 mt-5 d-md-flex align-items-center justify-content-between">
+  <h1 class="h2 mb-md-0">Memento EPFL</h1>
+  {% include '@atoms/dropdown/dropdown.twig' with { dropdown_label: 'Voir un autre memento' } %}
+</div>
+
+<div class="container-full mt-5 bg-gray-100 py-5">
+  <div class="container">
+    <h3 class="h6">Événements à la une</h3>
+    <div class="mt-4">
+      {% include '@content-types/event/event-listing-featured.twig' %}
+    </div>
+  </div>
+</div>
+
+<div class="container mt-5">
+  <h3 class="h6">Prochains événements</h3>
+  
+  <div class="events-filters mt-4">
+    
+    <form action="" method="get">
+      
+      {% include '@molecules/form-group/form-group-search.twig' %}
+
+      <div class="form-group form-group-select">
+        <label class="sr-only">Catégories</label>
+        <select class="select-multiple" multiple="multiple" data-placeholder="Catégories">
+          <option value="activites-scientifiques-jeunes">Activités scientifiques pour les jeunes</option>
+          <option value="appel-proposition">Appel à proposition</option>
+          <option value="autres">Autres types d’événement</option>
+          <option value="conferences-seminaires">Conférences - Séminaires</option>
+          <option value="congres">Congrès</option>
+          <option value="echeance">Echéance</option>
+          <option value="evenements-festifs-culturels">Événements festifs et culturels</option>
+          <option value="evenements-scientifiques-grand-public">Évènements scientifiques grand public</option>
+          <option value="expositions">Expositions</option>
+          <option value="formations-internes">Formations internes</option>
+          <option value="lecons-inaugurales">Leçons inaugurales - Leçons d'honneur</option>
+          <option value="soutenances-de-theses">Soutenances de thèses</option>
+        </select>
+      </div>
+
+      <div class="form-group form-group-select">
+        <label class="sr-only">Périodes</label>
+        <select class="select-multiple" multiple="multiple" data-placeholder="Périodes">
+          <option value="">Un jour</option>
+          <option value="">Deux jours</option>
+          <option value="">Une semaine</option>
+          <option value="">Deux semaines</option>
+          <option value="">Un mois</option>
+          <option value="">Six mois</option>
+          <option value="">Une année</option>
+        </select>
+      </div>
+
+      <div class="form-group form-group-select">
+        <label class="sr-only">Accès</label>
+        <select class="select-multiple" multiple="multiple" data-placeholder="Accès">
+          <option value="">Entrée libre</option>
+          <option value="">Sur inscription</option>
+          <option value="">Sur invitation</option>
+        </select>
+      </div>
+
+      <div class="form-group form-group-select">
+        <label class="sr-only">Public cible</label>
+        <select class="select-multiple" multiple="multiple" data-placeholder="Public cible">
+          <option value="">Tout public</option>
+          <option value="">Public averti</option>
+          <option value="">Expert</option>
+        </select>
+      </div>
+      
+      <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Date</button>
+        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+          {% include '@molecules/datepicker/datepicker.twig' %}
+        </div>
+      </div>
+      
+    </form>
+  </div>
+  
+  <div class="event-filter-tags mt-2">
+    <div class="tag-group">
+      <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">É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>
+      </div>
+    </div>
+  </div>
+  
+  <div class="events-footer mt-3">
+    <div class="d-md-flex flex-md-row-reverse justify-content-md-between align-items-md-center">
+      <div class="events-links">
+          <ul class="links">
+          <li><a href="#">S'abonner à ce Memento</a></li>
+          <li><a href="#">Annoncer un événement</a></li>
+        </ul>
+      </div>
+      <div class="events-pager">
+        {% include '@molecules/pagination/pagination.twig' %}
+      </div>
+    </div>
+  </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 } %}
+    {% for i in 1..2 %}
+      {% include '@molecules/card/card-event.twig' with { eventLocation: 'online' } %}
+    {% endfor %}
+    {% for i in 1..6 %}
+      {% include '@molecules/card/card-event.twig' %}
+    {% endfor %}
+  </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 %}

package/dist/components/pages/event-list/event-list.yml

@@ -0,0 +1,2 @@
+title: Event list
+name: event-list

package/dist/components/pages/facultes/facultes.twig

@@ -0,0 +1,29 @@
+{% extends "@templates/base/base.twig" %}
+
+{% set nav_aside_items = [{
+  label: "Facultés",
+  children: ["Architecture, Civil and Environmental Engineering ENAC", "Basic Sciences SB", "Engineering STI", "Computer and Communication Sciences IC", "Life Sciences SV", "Management of Technology CDM", "College of Humanities CDH", "EPFL Middle East"]
+}] %}
+{% set nav_aside_active = 0 %}
+
+{% block grid %}{% endblock %}
+
+{% block content %}
+
+<div class="container">
+  <div class="container-grid mt-5 mb-6">
+    <h1 class="mb-5">Les facultés de l'EPFL</h1>
+    <p>What is a faculty ? Explain in a few sentences.</p>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row">
+    {% for i in 1..10 %}
+      <div class="col-md-4">
+        {% include '@content-types/school/school.twig' %}
+      </div>
+    {% endfor %}
+  </div>
+</div>
+{% endblock %}

package/dist/components/pages/facultes/facultes.yml

@@ -0,0 +1,2 @@
+title: Facultés
+name: facultes

package/dist/components/pages/homepage/homepage.twig

@@ -0,0 +1,199 @@
+{% set isSpecial = true %}
+
+{% extends "@templates/base/base.twig" %}
+
+{% macro card(card) %}
+  <div class="card">
+    {% if card.image %}
+      <a href="#" class="card-img-top">
+        <picture>
+          <img src="{{ card.image }}" class="img-fluid" title="{{ card.title }}" alt="ALT OF IMAGE HERE"/>
+        </picture>
+      </a>
+    {% endif %}
+    <div class="card-body">
+      <h3 class="card-title">
+        <a href="#">{{ card.title }}</a>
+      </h3>
+      <p>{{ card.content }}</p>
+    </div>
+    <div class="card-footer mt-auto">
+      <a href="#" class="btn btn-secondary btn-sm">{{ card.button }}</a>
+    </div>
+  </div>
+{% endmacro %}
+
+{% macro card_arrow(card) %}
+  <a href="#" class="card card-sm link-trapeze-horizontal">
+    {% if card.image %}
+      <picture class="card-img-top">
+        <img src="{{ card.image }}" class="img-fluid" title="{{ card.title }}" alt="ALT OF IMAGE HERE"/>
+      </picture>
+    {% endif %}
+      <div class="card-body">
+        <h3 class="card-title link-icon mb-0 h5">
+          {{ card.title }}
+        {% include '@atoms/icon/icon.twig' with {'icon': 'icon-arrow-right'}
+      %}
+      </h3>
+    </div>
+  </a>
+{% endmacro %}
+
+{% import _self as macros %}
+
+{% block breadcrumb %}{% endblock %}
+
+{% block grid %}{% endblock %}
+
+{% block main %}
+  <main id="main" role="main" class="content">
+    {% include '@organisms/headlines/headlines.twig' %}
+
+    {# Second teasers, on gray background #}
+    <div class="bg-gray-100 py-5">
+      <div class="container">
+        <h2 class="text-center mb-5">{{ homepage.section_two.title }}</h2>
+
+        <h3 class="h6 mb-3 text-spread">{{ homepage.section_two.subtitle_1 }}</h3>
+        <div class="row mb-4">
+          {% for card in homepage.section_two.cards[0:3] %}
+            <div class="col-md-4 d-flex">
+              {{ macros.card(card) }}
+            </div>
+          {% endfor %}
+        </div>
+
+        <h3 class="h6 mb-3 text-spread">{{ homepage.section_two.subtitle_2 }}</h3>
+        <div class="row">
+          {% for card in homepage.section_two.cards[3:] %}
+            <div class="col-md-4 d-flex">
+              {{ macros.card(card) }}
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+
+    {# The middle fullwidth teaser #}
+    {% include '@organisms/fullwidth-teaser/fullwidth-teaser.twig' with {
+        title: homepage.highlight_2.title,
+        content: homepage.highlight_2.content,
+        img: homepage.highlight_2.image
+      }
+    %}
+
+    {# The Calendar section #}
+    {# TODO add card-slider from Yann PR #}
+    <div class="bg-gray-100 py-5">
+      {% include '@molecules/datepicker/datepicker-fancy.twig' %}
+
+      <div class="overflow-hidden">
+        <div class="container">
+          <div class="card-slider-wrapper">
+            <div class="card-slider">
+              <div class="card-slider-cell">
+                {% include "@content-types/event/event.twig" %}
+              </div>
+              <div class="card-slider-cell">
+                {% include "@content-types/event/event.twig" %}
+              </div>
+              <div class="card-slider-cell">
+                {% include "@content-types/event/event.twig" %}
+              </div>
+              <div class="card-slider-cell">
+                {% include "@content-types/event/event.twig" %}
+              </div>
+              <div class="card-slider-cell">
+                {% include "@content-types/event/event.twig" %}
+              </div>
+              <div class="card-slider-cell">
+                {% include "@content-types/event/event.twig" %}
+              </div>
+            </div>
+
+            <div class="card-slider-footer">
+                <div>
+                  <button role="button" id="card-slider-prev" class="card-slider-btn link-trapeze-horizontal disabled">
+                  {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-left' }
+                %}
+                  </button>
+                  <button role="button" id="card-slider-next" class="card-slider-btn link-trapeze-horizontal">
+                  {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-right' }
+                %}
+                </button>
+              </div>
+              <div>
+                <a href="#">Voir l’agenda complet des événements</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    {# The second middle fullwidth teaser #}
+    {% include '@organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig' with {
+        title: homepage.highlight_3.title,
+        content: homepage.highlight_3.content,
+        img: homepage.highlight_3.image
+      }
+    %}
+
+    {# City teasers #}
+    <div class="container py-6">
+      <div class="row">
+        <div class="col-lg-3 col-md-6">
+          <h2>{{ homepage.section_3.title }}</h2>
+          <p class="h6">{{ homepage.section_3.subtitle }}</p>
+        </div>
+        <div class="col-lg-9 col-md-6">
+          <div class="row">
+              {% for card in homepage.section_3.cards %}
+                <div class="col-6 col-lg-4">
+                  {{ macros.card_arrow(card) }}
+                </div>
+              {% endfor %}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    {# The third middle fullwidth teaser #}
+    {% include '@organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig' with {
+        title: homepage.highlight_4.title,
+        content: homepage.highlight_4.content,
+        img: homepage.highlight_4.image
+      }
+    %}
+
+    <div class="container-fluid p-0">
+      {% include '@molecules/question/question.twig' %}
+    </div>
+
+    {# The last fullwidth teaser #}
+    {% include '@organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig' with {
+        title: homepage.highlight_5.title,
+        content: homepage.highlight_5.content,
+        img: homepage.highlight_5.image
+      }
+    %}
+
+    <div class="bg-gray-100 py-5">
+      <div class="container">
+        <h2 class="h3">Vivez au rythme de l’école, via les réseaux sociaux</h2>
+        {% include '@organisms/social-feed-group/social-feed-group.twig' %}
+        <p class="text-center">
+          <a href="#">Liste des comptes officiels</a>
+        </p>
+      </div>
+    </div>
+  </div>
+{% endblock %}
+
+{% block footer_container %}
+  <div class="container py-5">
+    {% include '@organisms/footer/footer.twig' %}
+  </div>
+{% endblock %}
+

package/dist/components/pages/homepage/homepage.yml

@@ -0,0 +1,2 @@
+name: homepage
+title: Homepage

package/dist/components/pages/innovation/innovation.twig

@@ -0,0 +1,72 @@
+{% extends "@templates/base/base.twig" %}
+
+{% block content %}
+
+<div class="container-full">
+  <div class="hero">
+    <div class="hero-content-container">
+      <h1 class="hero-title">Innovation</h1>
+    </div>
+    <div class="hero-img">
+      <img src="images/styleguide/gallery/gallery_01.jpg" alt="IMAGE DESCRIPTION HERE" class="img-fluid">
+    </div>
+  </div>
+</div>
+
+<div class="mt-5">
+  <p>
+    La vice-présidence pour l'innovation (VPI) est l'interface entre l'EPFL et les milieux économiques. Elle encourage l'entrepreneuriat et la création de start-ups, elle favorise l'innovation et la recherche en aidant l'industrie à développer des partenariats avec l'EPFL. la VPI est également en charge de la plateforme Switzerland Innovation Park Network West, qui est étroitement liée à l'extension des autres campus de l'EPFL.
+  </p>
+</div>
+
+<div class="container-full bg-gray-100 py-5 mt-5">
+  <div class="container">
+    <h2 class="mb-4 mt-4">Key numbers</h2>
+  </div>
+  {% include '@organisms/key-number-group/key-number-group.twig' %}
+</div>
+
+<div class="container">
+  {% include '@content-types/news/news-latest-two.twig' %}
+</div>
+
+<div class="container py-5 mt-5">
+  <div class="row">
+    <div class="col-md-6">
+      {% include '@content-types/basic-page/basic-page.twig' %}
+    </div>
+    <div class="col-md-6">
+      {% include '@content-types/basic-page/basic-page.twig' %}
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-6">
+      {% include '@content-types/basic-page/basic-page.twig' %}
+    </div>
+    <div class="col-md-6">
+      {% include '@content-types/basic-page/basic-page.twig' %}
+    </div>
+  </div>
+</div>
+
+<div class="container-full bg-gray-100 py-5 mt-5">
+  <div class="overflow-hidden">
+    <div class="container">
+      <h2 class="mb-4 mt-4">The next events</h2>
+      {% include '@organisms/card-slider/card-slider.twig' %}
+    </div>
+  </div>
+</div>
+
+<div class="container py-5 mt-5">
+  <div class="row">
+    <div class="col-md-6">
+      {% include '@organisms/contact/contact-compact.twig' %}
+    </div>
+    <div class="col-md-6">
+      {% include '@molecules/links-group/links-group.twig' %}
+    </div>
+  </div>
+</div>
+
+{% endblock %}

package/dist/components/pages/innovation/innovation.yml

@@ -0,0 +1,2 @@
+name: innovation
+title: Innovation

package/dist/components/pages/lab-homepage/lab-homepage.twig

@@ -0,0 +1,93 @@
+{% extends "@templates/base/base.twig" %}
+
+{% set nav_aside_items = [{
+  label: "Laboratory Full Name",
+  children: ["Projects", "Publications", "News", "Team", "Teaching"]
+}] %}
+{% set nav_aside_active = 0 %}
+
+{% block fullintro %}
+<div class="tlbx-single-full-intro d-flex justify-content-between">
+  <h1 class="h3 my-0">Laboratory page (<a href="#/doc/create%20a%20page.md" target="_blank" onclick="window.open('#/doc/create%20a%20page.md')">doc</a>)</h1>
+  <button class="btn btn-sm btn-primary" id="tour-start">Start the tour !</button>
+</div>
+{% endblock %}
+
+{% block content %}
+<div class="container-full" id="tour-hero">
+  {% include '@organisms/hero/hero.twig' with {
+    cover_path: 'images/styleguide/cover/cover01_',
+    title: 'Laboratory Full Name LFN',
+    content: false
+  } %}
+</div>
+
+<div class="mt-5" id="tour-lab">
+  <div id="tour-intro">
+    <p>
+      This is a laboratory introduction text about all the good stuff that are made here, the current project and the passionate people who work here. It is always interesting to know in few lines what is all about.
+    </p>
+  </div>
+</div>
+
+<div class="container-full bg-gray-100 py-5 mt-5" id="tour-projects">
+  <div class="container">
+    {% include '@content-types/project/project.twig' %}
+  </div>
+</div>
+
+<div class="container">
+  <div id="tour-publications">
+    <h2 class="mb-4 mt-6">Our publications</h2>
+    {% include '@content-types/publication/publication.twig' with { bottomlink: true } %}
+  </div>
+</div>
+
+<div class="container">
+  <div id="tour-news">
+    {% include '@content-types/news/news-latest-two.twig' %}
+  </div>
+</div>
+
+<div class="container-full bg-gray-100 py-5 my-5">
+  <div class="container">
+    <div id="tour-partof">
+      <h2 class="mb-4">DCSL is part of</h2>
+      <div class="row mb-5">
+        <div class="col-md-6">
+          {% include '@content-types/school/school.twig' %}
+        </div>
+        <div class="col-md-6">
+          {% include '@content-types/institute/institute.twig' %}
+        </div>
+        <div class="col-12">
+          <h3>Themes</h3>
+          {% for i in 1..5 %}
+            <a href="#" class="tag tag-primary">Theme {{i}}</a>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+    <div id="tour-contact">
+      <div class="bg-white p-4 p-md-5">
+        {% include '@organisms/contact/contact-banner.twig' %}
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<div class="container">
+  <div class="row">
+    <div class="col-md-6" id="tour-team">
+      {% include '@content-types/basic-page/basic-page.twig' %}
+    </div>
+    <div class="col-md-6" id="tour-sponsors">
+      <h3 class="mb-4">Our sponsors</h3>
+      {% include '@molecules/sponsor/sponsor.twig' %}
+      {% include '@molecules/sponsor/sponsor.twig' %}
+    </div>
+  </div>
+</div>
+
+{% endblock %}

package/dist/components/pages/lab-homepage/lab-homepage.yml

@@ -0,0 +1,2 @@
+title: Lab homepage
+name: lab-homepage

package/dist/components/pages/layout-demo/layout-demo.twig

@@ -0,0 +1,24 @@
+{% set isSpecial = true %}
+
+{% extends "@templates/base/base.twig" %}
+
+{% block content %}
+  <div class="alert alert-info">
+    <h4>container-grid</h4>
+    <p>The <strong>.container-grid</strong> class is used to wrap the whole content of a page. All the direct childs of this wrapper (text blocks for example) will have a maximum width, to ensure a good readability</p>
+  </div>
+
+  <div class="container-full">
+    <div class="alert alert-warning">
+      <h4>container-full</h4>
+      <p>Inside of the <strong>.container-grid</strong>, you can use the <strong>.container-full</strong> class to make a component take the full width page.</p>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="alert alert-success">
+      <h4>container</h4>
+      <p>This <strong>.container</strong> class is the bootstrap defaut one. When used, It will fallback to the default bootstrap behavior, that can be divided with rows, columns, etc... (see <a href="https://getbootstrap.com/docs/4.1/layout/grid/">the Bootstrap documentation)</a></p>
+    </div>
+  </div>
+{% endblock %}

package/dist/components/pages/layout-demo/layout-demo.yml

@@ -0,0 +1,2 @@
+title: Layout demo
+name: layout-demo