epfl-elements 4.5.0 → 4.6.0

package/dist/components/content-types/event/event-listing.twig

@@ -0,0 +1,16 @@
+<div class="list-group list-events {% if hasGrayBackground|default(false) %}list-group-gray{% endif %}">
+
+  {% 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' } %}
+
+  {% for i in 1..3 %}
+    {% include '@molecules/list-group/list-group-event.twig' %}
+  {% endfor %}
+
+  {% if bottomlink|default(true) %}
+    <a href="#" class="list-group-teaser-more">
+      Voir tous les événements
+    </a>
+  {% endif %}
+</div>

package/dist/components/content-types/event/event-wrapper.twig

@@ -0,0 +1 @@
+{% include "@organisms/card-slider/card-slider.twig" %}

package/dist/components/content-types/event/event.twig

@@ -0,0 +1,64 @@
+<a href="#" class="{% block classes %}card card-gray link-trapeze-horizontal{% endblock %}" itemscope itemtype="http://schema.org/Event">
+  <div class="card-body">
+    {% block img -%}
+    <picture class="card-img-top">
+      <img src="{% block img_src %}./images/styleguide/event_teaser.png{% endblock %}" class="img-fluid" title="Image title" alt="Image alt description" />
+    </picture>
+    {% endblock %}
+
+    <h3 class="card-title" itemprop="name">{% block title %}Startup Acceleration Workshops{% endblock %}</h3>
+    {% block summary %}{% endblock -%}
+    <div class="card-info">
+      {% block date %}
+      <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 %}
+      <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 %}
+        {% 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 %}
+</a>

package/dist/components/content-types/event/event.yml

@@ -0,0 +1,26 @@
+title: Event
+name: event
+wrapper: col-md-5 bg-gray-100
+variants:
+  - name: listing
+    title: Listing
+    wrapper: bg-gray-100
+  - name: listing-featured
+    title: Featured events
+    wrapper: bg-gray-100
+  - name: highlight
+    title: Highlight
+    wrapper: col-md-8 bg-gray-100
+  - name: highlight-listing
+    title: Highlight + listing
+    wrapper: bg-gray-100
+  - name: invitation
+    title: Invitation
+  - name: just-finished
+    title: Just finished
+  - name: wrapper
+    title: Slider wrapper
+    wrapper: bg-gray-100 overflow-hidden
+notes: |
+
+  ### Basic teaser

package/dist/components/content-types/graph-search/graph-search.twig

@@ -0,0 +1,37 @@
+<div class="list-group">
+  
+  <div class="list-group-item list-group-item-borderless col-12 col-lg-8">
+    <p class="tag tag-sm bg-light border-light mb-2"><strong>Concepts</strong></p>
+    <h3 class="h5 my-1"><a href="#">Biology</a></h3>
+    <p class="text-small text-muted mb-1">https://graphsearch.epfl.ch/…</p>
+    <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>
+  </div>
+  
+  <div class="list-group-item list-group-item-borderless col-12 col-lg-8">
+    <p class="tag tag-sm bg-light border-light mb-2"><strong>Courses</strong></p>
+    <h3 class="h5 my-1"><a href="#">CH-313 - Chemical biology </a></h3>
+    <p class="text-small text-muted mb-1">https://graphsearch.epfl.ch/…</p>
+    <p>Closely interfacing with bioengineering and medicine, this course provides foundational concepts in applying small-molecule chemical toolsets to probe the functions …</p>
+  </div>
+  
+  <div class="list-group-item list-group-item-borderless col-12 col-lg-8">
+    <p class="tag tag-sm bg-light border-light mb-2"><strong>Publications</strong></p>
+    <h3 class="h5 my-1"><a href="#">Chemical and Biological Gradients along the Damma Glacier Soil Chronosequence, Switzerland</a></h3>
+    <p class="text-small text-muted mb-1">https://graphsearch.epfl.ch/…</p>
+    <p class="text-sm mt-2 mb-1 d-flex align-items-center">
+      <svg class="icon feather align-middle mr-1" aria-hidden="true">
+        <use xlink:href="#calendar"></use>
+      </svg>
+      <span class="align-middle">Published in 2011</span>
+    </p>
+    <p class="text-sm mb-2 d-flex align-items-center">
+      <svg class="icon feather align-middle mr-1" aria-hidden="true">
+        <use xlink:href="#users"></use>
+      </svg>
+      <span class="sr-only">Authors: </span>
+      <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>
+    </p>
+    <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>
+  </div>
+  
+</div>

package/dist/components/content-types/graph-search/graph-search.yml

@@ -0,0 +1,2 @@
+title: Graph Search
+name: graph-search

package/dist/components/content-types/institute/institute.twig

@@ -0,0 +1,12 @@
+<div class="card">
+  <div class="card-body">
+    <h3 class="h5 card-title"><a href="#">Institut d'ingénierie de l'environnement – IIE</a></h3>
+    <div class="card-info">
+      <span>Faculté de l’Environnement Naturel, Architectural et Construit </span>
+    </div>
+    <p>L’objectif principal de l’Institut d’architecture et de la ville (IA) est le développement de la recherche. Une tâche fondamentale qui sous-entend que l’architecture, la qualité de la construction, l’insertion dans le milieu environnant, le respect des paysages naturels et urbains ainsi que celui du patrimoine culturel sont prioritairement d’intérêt général.</p>
+  </div>
+  <div class="card-footer mt-auto">
+    <a href="#" class="btn btn-secondary btn-sm">Découvrir</a>
+  </div>
+</div>

package/dist/components/content-types/institute/institute.yml

@@ -0,0 +1,3 @@
+title: Institute
+name: institute
+wrapper: col-md-6

package/dist/components/content-types/laboratory/laboratory.twig

@@ -0,0 +1,16 @@
+<div class="card">
+  <a href="#" class="card-img-top">
+    <picture>
+      <img src="./images/styleguide/event_teaser.png" class="img-fluid" title="professor Xile Hu" alt="a portrait of professor Xile Hu" />
+    </picture>
+  </a>
+  <div class="card-body">
+    <p class="small text-muted">BioS</p>
+    <h3 class="h5 card-title"><a href="#">BioNanoPhotonic Systems Laboratory</a></h3>
+    {% include '@molecules/avatar-teaser/avatar-teaser.twig' %}
+    <p>Optical nanobiosensors, lab-on-a-chip devices, ultra-sensitive spectroscopy, nanoplasmonics, metamaterials</p>
+  </div>
+  <div class="card-footer mt-auto">
+    <a href="#" class="btn btn-secondary btn-sm">Voir plus</a>
+  </div>
+</div>

package/dist/components/content-types/laboratory/laboratory.yml

@@ -0,0 +1,3 @@
+title: Laboratory
+name: laboratory
+wrapper: col-md-6

package/dist/components/content-types/news/news-basic-teaser.twig

@@ -0,0 +1,16 @@
+<a href="#" class="card link-trapeze-horizontal" itemscope itemtype="https://schema.org/NewsArticle">
+  {% block img %}
+    <picture class="card-img-top">
+      <img src="./images/styleguide/event_teaser.png" class="img-fluid" title="professor Xile Hu" alt="a portrait of professor Xile Hu" />
+    </picture>
+  {% endblock %}
+  <div class="card-body">
+    <h3 class="card-title" itemprop="name">News title</h3>
+    <div class="card-info">
+      <span class="card-info-date" itemprop="datePublished" content="2017-09-11T12:00">11.09.17</span>
+      <span itemprop="about">Recherche</span>
+      <span itemprop="about">Prix et récompenses</span>
+    </div>
+    <p itemprop="description">The EPFL favors closer ties to industry leading research in order to best meet the scientific, technological and societal</p>
+  </div>
+</a>

package/dist/components/content-types/news/news-distinction.twig

@@ -0,0 +1,11 @@
+<a href="#" class="card card-distinction link-trapeze-horizontal">
+  {% block img %}
+    <picture class="card-img-top">
+      <img src="./images/styleguide/event_teaser.png" class="img-fluid" title="professor Xile Hu" alt="a portrait of professor Xile Hu" />
+    </picture>
+  {% endblock %}
+  <div class="card-body" itemscope itemtype="http://schema.org/Article">
+    <h3 class="card-title" itemprop="name">EPFL doctorate Award 2017 – Priscilla Briquez</h3>
+    <p itemprop="description">Text teaser — EPFL biologists and geneticists have uncovered how the circadian clock orchestrates the 24-hour cycle of gene expression by regulating the structure of chromatin, the tightly wound DNA-protein complex of the cell</p>
+  </div>
+</a>

package/dist/components/content-types/news/news-highlighted-carousel.twig

@@ -0,0 +1,11 @@
+{% set id %}carouselNews{% endset %}
+{% set extraClass %}carousel-highlighted-news{% endset %}
+{% extends "@molecules/carousel/carousel-base.twig" %}
+
+{% block slide %}
+  {% for i in 1..4 %}
+  <div class="carousel-item {% if loop.index0 == 0 %}active{% endif %}">
+    {% include '@organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig' %}
+  </div>
+  {% endfor %}
+{% endblock %}

package/dist/components/content-types/news/news-highlighted.twig

@@ -0,0 +1 @@
+{% include '@organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig' %}

package/dist/components/content-types/news/news-latest-two.twig

@@ -0,0 +1,11 @@
+<h2 class="mt-5 mb-4">The last news</h2>
+<div class="row">
+  {% for i in 1..2 %}
+    <div class="col-md-6">
+      {% include '@content-types/news/news-basic-teaser.twig' %}
+    </div>
+  {% endfor %}
+</div>
+<p class="text-center">
+  <a href="#">See all news</a>
+</p>

package/dist/components/content-types/news/news-press-release.twig

@@ -0,0 +1,19 @@
+<a href="#" class="card link-trapeze-horizontal">
+  {% block img %}
+    <picture class="card-img-top">
+      <img src="./images/styleguide/event_teaser.png" class="img-fluid" title="professor Xile Hu" alt="a portrait of professor Xile Hu" />
+    </picture>
+  {% endblock %}
+  <div class="card-body" itemscope itemtype="http://schema.org/Article">
+    <div class="card-header">
+      <strong>Press release</strong>
+      <time datetime="2018-01-31" itemprop="datePublished"><span class="sr-only">Published:</span>31.01.18</time>
+    </div>
+    <h3 class="card-title" itemprop="name">Two months in Pyeongchang to study Korean snowfalls</h3>
+    <div class="card-info">
+      <span>ENAC</span>
+      <span itemprop="about">Environment</span>
+    </div>
+    <p itemprop="description">Text teaser — EPFL biologists and geneticists have uncovered how the circadian clock orchestrates the 24-hour cycle of gene expression by regulating the structure of chromatin, the tightly wound DNA-protein complex of the cell</p>
+  </div>
+</a>

package/dist/components/content-types/news/news.twig

@@ -0,0 +1,25 @@
+<div class="list-group">
+  {% for i in 1..4 %}
+    <a href="#" class="list-group-item list-group-teaser link-trapeze-vertical">
+      <div class="list-group-teaser-container">
+        <div class="list-group-teaser-thumbnail">
+          {% include '@atoms/picture/picture.twig' with {'variant':'news-thumb'} %}
+        </div>
+        <div class="list-group-teaser-content" itemscope itemtype="http://schema.org/Article">
+          <p class="h5" itemprop="name">Physics: new e-books for the AIAA Education Series</p>
+          <p>
+            <time datetime="2018-03-26" itemprop="datePublished"><span class="sr-only">Published:</span>26.03.2018</time>
+            <span class="text-muted" itemprop="description">— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ad populum me vocas, eum. Quid enim me prohiberet
+              Epicureum esse, si probarem, quae ille diceret?</span>
+          </p>
+        </div>
+      </div>
+    </a>
+  {% endfor %}
+
+  {% if bottomlink %}
+    <a href="#" class="list-group-teaser-more">
+      Afficher plus d'actualités
+    </a>
+  {% endif %}
+</div>

package/dist/components/content-types/news/news.yml

@@ -0,0 +1,21 @@
+title: News
+name: news
+variants:
+  - name: highlighted
+    title: Highlighted
+  - name: highlighted-carousel
+    title: Highlighted Carousel
+  - name: latest-two
+    title: Latest two
+  - name: basic-teaser
+    title: Basic teaser
+    wrapper: col-md-6
+  - name: press-release
+    title: Press release
+    wrapper: col-md-6
+  - name: distinction
+    title: Distinction
+    wrapper: col-md-6
+notes: |
+
+  ### Listing

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

@@ -0,0 +1,25 @@
+<div class="press-teaser">
+  <h4 class="mb-4"><time datetime="2018-01-19">19.01.2018</time></h4>
+  {% for i in [1,2,3] %}
+    <button
+      class="collapse-title collapse-title-desktop {{ i != 1 ? 'collapsed' : ''}}"
+      type="button"
+      data-toggle="collapse"
+      data-target="#collapse-{{i}}"
+      aria-expanded="{{ i == 1 ? 'true' : 'false'}}"
+      aria-controls="collapse-{{i}}"
+    >
+      Piloter un drone avec un joystick
+    </button>
+    <div class="collapse collapse-item collapse-item-desktop {{ i == 1 ? 'show' : ''}}" id="collapse-{{i}}">
+      <div class="pb-4">
+        <p>
+          Le prototype de joystick imaginé par la start-up de l'EPFL MotionPilot permet de piloter un drone d’une seule main, de manière intuitive, rapporte L'Agefi.
+        </p>
+        <a href="#">Détails du communiqué</a><br>
+        <a href="#">Communiqué réservé aux journalistes</a>
+        <small>{% include "@atoms/icon/icon.twig" with { icon: 'icon-lock' } %}</small>
+      </div>
+    </div>
+  {% endfor %}
+</div>

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

@@ -0,0 +1,3 @@
+title: Press review
+name: press-review
+wrapper: col-md-6

package/dist/components/content-types/program/program.twig

@@ -0,0 +1,10 @@
+<a href="#" class="card link-trapeze-horizontal">
+  <div class="card-body">
+    <div class="card-header">
+      <span>Bachelor</span>
+    </div>
+    <h3 class="h5 card-title">Génie Électrique et Électronique</h3>
+    <hr>
+    <p class="card-text">L’électricité est un élément indispensable de notre vie quotidienne : il est difficile de s’en passer ne serait-ce qu’un seul jour. C’est une ressource unique, dotée d’une double propriété : elle est à la fois énergie et vecteur d’information. Le génie électrique et électronique se trouve constamment à la croisée de ces deux domaines.</p>
+  </div>
+</a>

package/dist/components/content-types/program/program.yml

@@ -0,0 +1,3 @@
+title: Program
+name: program
+wrapper: col-md-6

package/dist/components/content-types/project/project.twig

@@ -0,0 +1,11 @@
+<h2 class="mb-4">Our current projects</h2>
+<div class="row">
+  {% for i in 1..3 %}
+    <div class="col-md-4">
+      {% include '@content-types/research-project/research-project.twig' %}
+    </div>
+  {% endfor %}
+</div>
+<p class="text-center">
+  <a href="#">See all projects</a>
+</p>

package/dist/components/content-types/project/project.yml

@@ -0,0 +1,2 @@
+title: Project
+name: project

package/dist/components/content-types/project-list/project-list.twig

@@ -0,0 +1,82 @@
+<div class="container">
+  <h2>Current projects</h2>
+
+  {% for i in 1..3 %}
+  <section class="collapse-container">
+    <header class="collapse-title collapse-title-desktop collapsed" data-toggle="collapse" data-target="#project-available-{{loop.index}}" aria-expanded="false" aria-controls="project-available-{{loop.index}}">
+      <p class="title">Lorem ipsum dolor sit amet, consectetur adipising elit</p>
+      <ul class="project-data list-inline has-sep small text-muted">
+        <li>ID: 9762</li>
+        <li><span class="sr-only">Semester: </span>Fall 2020</li>
+        <li><span class="sr-only">Type(s): </span>MS, PdM</li>
+        <li><span class="sr-only">Section(s): </span>GM, MT, EL</li>
+        <li class="available"><span class="sr-only">Status: </span>Available</li>
+        <li><span class="sr-only">Professor: </span>Jane Doe</li>
+      </ul>
+    </header>
+
+    <div class="collapse collapse-item collapse-item-desktop" id="project-available-{{loop.index}}">
+      <div class="project-thumb alignright">
+        {% include '@atoms/picture/picture-thumb-square.twig' %}
+      </div>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus fringilla est, quis facilisis nunc suscipit ut. Sed dignissim orci non risus convallis consequat. Etiam sit amet feugiat orci, eget eleifend metus. Nam sagittis purus nec purus posuere viverra eu eu leo. Suspendisse nec arcu pharetra, dictum ante vel, bibendum mauris. Integer lacus augue, tincidunt sodales diam quis, pellentesque dictum nisl. Etiam aliquam eros ac urna tincidunt auctor.</p>
+      <p>Integer auctor dictum felis eget interdum. Aenean arcu est, bibendum sit amet elit id, accumsan sollicitudin orci. Aenean tincidunt fringilla justo. Aliquam faucibus odio sem. Quisque neque magna, mattis id lectus eu, fermentum lacinia est. Fusce tincidunt tincidunt luctus. Nam sed vestibulum sapien. Maecenas vel rhoncus risus. Pellentesque facilisis tellus vitae nunc pulvinar, vitae tempus odio consequat.</p>
+
+      <dl class="definition-list definition-list-grid">
+        <dt>Requirements</dt>
+        <dd>Background in System and Control Theory, experience with C++ and Matlab (or Python).
+Knowledge of ROS and mathematical optimization will be a big plus.</dd>
+        <dt>Professor</dt>
+        <dd>Jane Doe</dd>
+        <dt>Supervisor</dt>
+        <dd>John Doe</dd>
+      </dl>
+    </div>
+  </section>
+  {% endfor %}
+
+  <h2>Past projects</h2>
+
+  {% for i in 1..3 %}
+  <section class="collapse-container">
+    <header class="collapse-title collapse-title-desktop collapsed" data-toggle="collapse" data-target="#project-completed-{{loop.index}}" aria-expanded="false" aria-controls="project-completed-{{loop.index}}">
+      <p class="title">Lorem ipsum dolor sit amet, consectetur adipising elit</p>
+      <ul class="project-data list-inline has-sep small text-muted">
+        <li>ID: 9762</li>
+        <li><span class="sr-only">Semester: </span>Fall 2020</li>
+        <li><span class="sr-only">Type(s): </span>MS, PdM</li>
+        <li><span class="sr-only">Section(s): </span>GM, MT, EL</li>
+        <li class="completed"><span class="sr-only">Status: </span>Completed</li>
+        <li><span class="sr-only">Professor: </span>Jane Doe</li>
+      </ul>
+      <div class="project-data project-completed small text-muted">
+        <span class="project-team">Team: <a href="#">John Doe</a>, <a href="#">Jane Doe</a>, <a href="#">John Doe</a></span>
+        <div class="actions">
+          <a class="btn btn-secondary btn-sm" href="#">{% include "@atoms/icon/icon.twig" with { icon:  'download', icon_classes:'feather' } %} Report (PDF)</a>
+          <a class="btn btn-secondary btn-sm" href="#">{% include "@atoms/icon/icon.twig" with { icon:  'download', icon_classes:'feather' } %} Presentation (PDF)</a>
+          <a class="btn btn-secondary btn-sm" href="#">{% include "@atoms/icon/icon.twig" with { icon:  'download', icon_classes:'feather' } %} Archive (Zip)</a>
+        </div>
+      </div>
+    </header>
+
+    <div class="collapse collapse-item collapse-item-desktop" id="project-completed-{{loop.index}}">
+      <div class="project-thumb alignright">
+        {% include '@atoms/picture/picture-thumb-square.twig' %}
+      </div>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus fringilla est, quis facilisis nunc suscipit ut. Sed dignissim orci non risus convallis consequat. Etiam sit amet feugiat orci, eget eleifend metus. Nam sagittis purus nec purus posuere viverra eu eu leo. Suspendisse nec arcu pharetra, dictum ante vel, bibendum mauris. Integer lacus augue, tincidunt sodales diam quis, pellentesque dictum nisl. Etiam aliquam eros ac urna tincidunt auctor.</p>
+      <p>Integer auctor dictum felis eget interdum. Aenean arcu est, bibendum sit amet elit id, accumsan sollicitudin orci. Aenean tincidunt fringilla justo. Aliquam faucibus odio sem. Quisque neque magna, mattis id lectus eu, fermentum lacinia est. Fusce tincidunt tincidunt luctus. Nam sed vestibulum sapien. Maecenas vel rhoncus risus. Pellentesque facilisis tellus vitae nunc pulvinar, vitae tempus odio consequat.</p>
+
+      <dl class="definition-list definition-list-grid">
+        <dt>Requirements</dt>
+        <dd>Background in System and Control Theory, experience with C++ and Matlab (or Python).
+Knowledge of ROS and mathematical optimization will be a big plus.</dd>
+        <dt>Professor</dt>
+        <dd>Jane Doe</dd>
+        <dt>Supervisor</dt>
+        <dd>John Doe</dd>
+      </dl>
+    </div>
+  </section>
+  {% endfor %}
+
+</div>

package/dist/components/content-types/project-list/project-list.yml

@@ -0,0 +1,2 @@
+title: Project list
+name: project-list

package/dist/components/content-types/publication/publication.twig

@@ -0,0 +1,68 @@
+{% set bottomlink = bottomlink|default(true) %}
+
+<div class="infoscienceBox no-tex2jax_process">
+  <div class="list-group my-3">
+  <h1 class="h2 mt-3">2018</h1>
+  {% for i in 1..4 %}
+    {% if i % 2 %}
+      {% if i < 3 %}
+  <h2 class="h2 mt-3">Theses</h2>
+      {% else %}
+  <h2 class="h3 mt-1 mb-2">Journal Articles</h2>
+      {% endif %}
+    {% endif %}
+        <div class="list-group-item list-group-item-publication">
+        <div class="row">
+          <div class="col-md-10">
+            {% if i > 2 %}
+              {% if i > 3 %}
+              <a href="https://infoscience.epfl.ch/record/254912/files/Graphical%20Abstract.jpg" target="_blank"><img style="max-width:80px;" src="https://infoscience.epfl.ch/record/254912/files/Graphical%20Abstract.jpg" class="float-left mr-3 infoscience_publication_illustration" alt="publication thumbnail"></a>
+              {% else %}
+              <a href="https://infoscience.epfl.ch/record/232935/files/heroguel_controlled_2017_jcat_2.jpg" target="_blank"><img style="max-width:80px;" src="https://infoscience.epfl.ch/record/232935/files/heroguel_controlled_2017_jcat_2.jpg" class="float-left mr-3 infoscience_publication_illustration" alt="publication thumbnail"></a>
+              {% endif %}
+            {% endif %}
+            <h4 class="h5 tex2jax_process infoscience_title">Measuring Latency: Am I doing it right?</h4>
+            <p class="text-muted small mb-2 infoscience_authors">
+            {% if i > 1 %}
+              <a class="text-muted infoscience_author" href="https://infoscience.epfl.ch/search?p=John++Doe" target="_blank">John Doe</a>;
+              <a class="text-muted infoscience_author" href="https://infoscience.epfl.ch/search?p=John++Doe" target="_blank">John Doe</a>;
+              <a class="text-muted infoscience_author" href="https://infoscience.epfl.ch/search?p=John++Doe" target="_blank">John Doe</a>;
+              <a class="text-muted infoscience_author" href="https://infoscience.epfl.ch/search?p=John++Doe" target="_blank">John Doe</a>;
+              <a class="text-muted infoscience_author" href="https://infoscience.epfl.ch/search?p=John++Doe" target="_blank">John Doe</a>
+              <span class="infoscience_more_authors_element">et al.&nbsp;</span>
+            {% else %}
+              <a class="text-muted infoscience_author" href="https://infoscience.epfl.ch/search?p=John++Doe" target="_blank">John Doe</a> /
+              <a class="text-muted infoscience_author" href="https://infoscience.epfl.ch/search?p=John++Doe" target="_blank">John Doe (Dir.)</a>
+            {% endif %}
+            </p>
+            <p class="text-muted small mb-0 infoscience_abstract tex2jax_process">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <span class="text-muted small mb-0 infoscience_host">
+              <p class="text-muted small mb-0 infoscience_journal_publisher"><i>Journal of Lightwave Technology</i></p>
+              <p class="text-muted small mb-0 infoscience_publication_date">2018-03-01</p>
+              <span class="text-muted small mb-0 infoscience_journal_volume">Vol. 23</span>, <span class="text-muted small mb-0 infoscience_journal_number">num. 3</span>,  <span class="text-muted small mb-0 infoscience_journal_page">p. 139-148. </span>
+            </span>
+            <p class="text-muted small mb-0 infoscience_doi">DOI : 10.1109/JLT.2017.1386235</p>
+          </div>
+          <div class="col-md-2 text-right mt-4 mt-md-0">
+            <p class="infoscience_detailed_record_link">
+              <a href="#" class="btn btn-secondary btn-sm" target="_blank">Detailed record</a>
+            </p>
+            <p class="text-muted small mb-0">
+            {% if i % 2 %}
+              <a class="text-muted" href="#" target="_blank">Full text</a> &#8211;
+              <a class="text-muted" href="#" target="_blank">View at publisher</a>
+            {% endif %}
+            </p>
+          </div>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+  {% if bottomlink %}
+  <p class="text-center">
+    <a href="#" target="_blank">See all publications</a>
+  </p>
+  {% endif %}
+</div>

package/dist/components/content-types/publication/publication.yml

@@ -0,0 +1,2 @@
+title: Publication
+name: publication

package/dist/components/content-types/research-field/research-field.twig

@@ -0,0 +1,11 @@
+<a href="#" class="card link-trapeze-horizontal">
+  {% block img %}
+    <picture class="card-img-top">
+      <img src="./images/styleguide/event_teaser.png" class="img-fluid" title="professor Xile Hu" alt="a portrait of professor Xile Hu" />
+    </picture>
+  {% endblock %}
+  <div class="card-body">
+    <h3 class="h5 card-title text-arrow mb-0">Analytical Chemistry</h3>
+  </div>
+</a>
+<!-- 🛠 Research field component -->

package/dist/components/content-types/research-field/research-field.yml

@@ -0,0 +1,3 @@
+title: Research field
+name: research-field
+wrapper: col-md-6

package/dist/components/content-types/research-project/research-project.twig

@@ -0,0 +1,21 @@
+<div class="card">
+  <a href="#" class="card-img-top">
+    <picture>
+      <img src="./images/styleguide/event_teaser.png" class="img-fluid" title="professor Xile Hu" alt="a portrait of professor Xile Hu" />
+    </picture>
+  </a>
+  <div class="card-body">
+    <h3 class="h5 card-title">
+      <a href="#">Avançon bridge GFRP</a>
+    </h3>
+    <div class="card-info">
+      <span>Composite construction laboratoire CCLAB</span>
+    </div>
+    <p>Avançon bridge GFRP-balsa sandwich bridge deck adhesively bonded onto steel girders, replacing a one-lane concrete bridge
+      by a new two-lane bridge without increasing total load</p>
+  </div>
+  <div class="card-footer mt-auto">
+    <a href="#" class="btn btn-secondary btn-sm">Voir plus</a>
+  </div>
+</div>
+<!-- 🛠 Research project component -->

package/dist/components/content-types/research-project/research-project.yml

@@ -0,0 +1,3 @@
+title: Research project
+name: research-project
+wrapper: col-md-6

package/dist/components/content-types/school/school.twig

@@ -0,0 +1,13 @@
+<a href="#" class="card card-overlay link-trapeze-horizontal">
+  <picture class="card-img">
+    <img class="img-fluid" src="./images/styleguide/event_teaser.png" alt="a portrait of professor Xile Hu">
+  </picture>
+  <div class="card-img-overlay">
+    <h3 class="h4 card-title">
+      <span class="text-padded">Faculté de l’Environnement Naturel, Architectural et Construit</span>
+    </h3>
+    <p class="h4">
+      <strong class="text-padded">ENAC</strong>
+    </p>
+  </div>
+</a>

package/dist/components/content-types/school/school.yml

@@ -0,0 +1,3 @@
+title: School
+name: school
+wrapper: col-md-6