epfl-elements 5.3.0 → 5.5.0

package/dist/components/atoms/research-icon/research-icon-discrete-link.twig

@@ -0,0 +1,3 @@
+{% include "@atoms/research-icon/research-icon-link.twig" with {
+  discrete_ri: true
+} %}

package/dist/components/atoms/research-icon/research-icon-group.twig

@@ -0,0 +1,21 @@
+{% set round_ri = round_ri ? round_ri : false %}
+{% set discrete_ri = discrete_ri ? discrete_ri : false %}
+{% set negative_ri = negative_ri ? negative_ri : false %}
+
+<ul class="research-icon-list list-inline">
+  <li>
+    {% include '@atoms/research-icon/research-icon-single.twig' with { pretty_name_ri: 'OrcID', icon_ri: 'icon-orcid', round_ri: round_ri, discrete_ri: discrete_ri, negative_ri: negative_ri, url: 'https://orcid.org/' } %}
+  </li>
+  <li>
+    {% include '@atoms/research-icon/research-icon-single.twig' with { pretty_name_ri: 'Google Scholar', icon_ri: 'icon-googlescholar', round_ri: round_ri, discrete_ri: discrete_ri, negative_ri: negative_ri, url: 'https://scholar.google.com/' } %}
+  </li>
+  <li>
+    {% include '@atoms/research-icon/research-icon-single.twig' with { pretty_name_ri: 'Scopus', icon_ri: 'icon-scopus', round_ri: round_ri, discrete_ri: discrete_ri, negative_ri: negative_ri, url: 'https://www.scopus.com/' } %}
+  </li>
+  <li>
+    {% include '@atoms/research-icon/research-icon-single.twig' with { pretty_name_ri: 'Stack Overflow', icon_ri: 'icon-stackoverflow', round_ri: round_ri, discrete_ri: discrete_ri, negative_ri: negative_ri, url: 'https://stackoverflow.com/' } %}
+  </li>
+  <li>
+    {% include '@atoms/research-icon/research-icon-single.twig' with { pretty_name_ri: 'Publons - Web of Science', icon_ri: 'icon-wos', round_ri: round_ri, discrete_ri: discrete_ri, negative_ri: negative_ri, url: 'https://www.webofscience.com/' } %}
+  </li>
+</ul>

package/dist/components/atoms/research-icon/research-icon-link-group.twig

@@ -0,0 +1,21 @@
+{% set round_ri = round_ri ? round_ri : false %}
+{% set discrete_ri = discrete_ri ? discrete_ri : false %}
+{% set negative_ri = negative_ri ? negative_ri : false %}
+
+<ul class="research-icon-list list-inline">
+  <li>
+    {% include '@atoms/research-icon/research-icon-single-link.twig' with { pretty_name_ri: 'OrcID', icon_ri: 'icon-orcid', round_ri: round_ri, discrete_ri: discrete_ri, negative_ri: negative_ri, url: 'https://orcid.org/' } %}
+  </li>
+  <li>
+    {% include '@atoms/research-icon/research-icon-single-link.twig' with { pretty_name_ri: 'Google Scholar', icon_ri: 'icon-googlescholar', round_ri: round_ri, discrete_ri: discrete_ri, negative_ri: negative_ri, url: 'https://scholar.google.com/' } %}
+  </li>
+  <li>
+    {% include '@atoms/research-icon/research-icon-single-link.twig' with { pretty_name_ri: 'Scopus', icon_ri: 'icon-scopus', round_ri: round_ri, discrete_ri: discrete_ri, negative_ri: negative_ri, url: 'https://www.scopus.com/' } %}
+  </li>
+  <li>
+    {% include '@atoms/research-icon/research-icon-single-link.twig' with { pretty_name_ri: 'Stack Overflow', icon_ri: 'icon-stackoverflow', round_ri: round_ri, discrete_ri: discrete_ri, negative_ri: negative_ri, url: 'https://stackoverflow.com/' } %}
+  </li>
+  <li>
+    {% include '@atoms/research-icon/research-icon-single-link.twig' with { pretty_name_ri: 'Publons - Web of Science', icon_ri: 'icon-wos', round_ri: round_ri, discrete_ri: discrete_ri, negative_ri: negative_ri, url: 'https://www.webofscience.com' } %}
+  </li>
+</ul>

package/dist/components/atoms/research-icon/research-icon-link.twig

@@ -0,0 +1,9 @@
+{% set pretty_name_ri =  pretty_name_ri ?: 'Scopus' %}
+{% set icon_ri = icon_ri ?: 'icon-scopus' %}
+{% set round_ri = round_ri ? ' research-icon-round' : '' %}
+{% set discrete_ri = discrete_ri ? ' research-icon-discrete' : '' %}
+{% set negative_ri = negative_ri ? ' research-icon-negative' : '' %}
+<a href="#" class="{{ 'research-icon research-' ~ icon_ri ~ round_ri ~ negative_ri ~ discrete_ri }}">
+  {% include '@atoms/icon/icon.twig' with { icon: icon_ri } %}
+  <span class="sr-only">{{ pretty_name_ri }}</span>
+</a>

package/dist/components/atoms/research-icon/research-icon-negative-link.twig

@@ -0,0 +1,3 @@
+{% include "@atoms/research-icon/research-icon-link.twig" with {
+  negative_ri: true
+} %}

package/dist/components/atoms/research-icon/research-icon-negative.twig

@@ -0,0 +1,3 @@
+{% include "@atoms/research-icon/research-icon.twig" with {
+  negative_ri: true
+} %}

package/dist/components/atoms/research-icon/research-icon-round-discrete-link.twig

@@ -0,0 +1,4 @@
+{% include "@atoms/research-icon/research-icon-link.twig" with {
+  discrete_ri: true,
+  round_ri: true
+} %}

package/dist/components/atoms/research-icon/research-icon-round-link.twig

@@ -0,0 +1,3 @@
+{% include "@atoms/research-icon/research-icon-link.twig" with {
+  round_ri: true
+} %}

package/dist/components/atoms/research-icon/research-icon-round.twig

@@ -0,0 +1,3 @@
+{% include "@atoms/research-icon/research-icon.twig" with {
+  round_ri: true
+} %}

package/dist/components/atoms/research-icon/research-icon-single-link-with-details.twig

@@ -0,0 +1,11 @@
+{% set pretty_name_ri = pretty_name_ri ?: 'Scopus' %}
+{% set user_id = user_id ?: 'firstname.name' %}
+{% set icon_ri = icon_ri ?: 'icon-scopus' %}
+{% set round_ri = round_ri ? ' research-icon-round' : '' %}
+{% set discrete_ri = discrete_ri ? ' research-icon-discrete' : '' %}
+{% set negative_ri = negative_ri ? ' research-icon-negative' : '' %}
+{% set url = url or '#' %}
+<a href="{{ url }}" class="{{ 'research-icon research-icon-details research-' ~ icon_ri ~ round_ri ~ negative_ri ~ discrete_ri }}" rel="nofollow" title="{{ pretty_name_ri }}">
+  {% include '@atoms/icon/icon.twig' with { icon: icon_ri } %}
+  <span class="user">{{ user_id }}</span>
+</a>

package/dist/components/atoms/research-icon/research-icon-single-link.twig

@@ -0,0 +1,10 @@
+{% set pretty_name_ri = pretty_name_ri ?: 'Scopus' %}
+{% set icon_ri = icon_ri ?: 'icon-scopus' %}
+{% set round_ri = round_ri ? ' research-icon-round' : '' %}
+{% set discrete_ri = discrete_ri ? ' research-icon-discrete' : '' %}
+{% set negative_ri = negative_ri ? ' research-icon-negative' : '' %}
+{% set url = url ?:  '#' %}
+<a href="{{ url }}" class="{{ 'research-icon research-' ~ icon_ri ~ round_ri ~ negative_ri ~ discrete_ri }}" target="_blank" rel="nofollow noopener">
+  {% include '@atoms/icon/icon.twig' with { icon: icon_ri } %}
+  <span class="sr-only">{{ pretty_name_ri }}</span>
+</a>

package/dist/components/atoms/research-icon/research-icon-single.twig

@@ -0,0 +1,9 @@
+{% set pretty_name_ri = pretty_name_ri ?: 'scopus' %}
+{% set icon_ri = icon_ri ?: 'icon-scopus' %}
+{% set round_ri = round_ri ? ' research-icon-round' : '' %}
+{% set discrete_ri = discrete_ri ? ' research-icon-discrete' : '' %}
+{% set negative_ri = negative_ri ? ' research-icon-negative' : '' %}
+<span class="{{ 'research-icon research-' ~ icon_ri ~ round_ri ~ negative_ri }}">
+  {% include '@atoms/icon/icon.twig' with { icon: icon_ri } %}
+  <span class="sr-only">{{ pretty_name }}</span>
+</span>

package/dist/components/atoms/research-icon/research-icon.twig

@@ -0,0 +1,9 @@
+{% set pretty_name_ri = pretty_name_ri ?: 'Scopus' %}
+{% set icon_ri = icon_ri ?: 'icon-scopus' %}
+{% set round_ri = round_ri ? ' research-icon-round' : '' %}
+{% set discrete_ri = discrete_ri ? ' research-icon-discrete' : '' %}
+{% set negative_ri = negative_ri ? ' research-icon-negative' : '' %}
+<span class="{{ 'research-icon research-' ~ icon_ri ~ round_ri ~ negative_ri }}">
+  {% include '@atoms/icon/icon.twig' with { icon: icon_ri } %}
+  <span class="sr-only">{{ pretty_name }}</span>
+</span>

package/dist/components/atoms/research-icon/research-icon.yml

@@ -0,0 +1,29 @@
+title: Research icon
+name: research-icon
+variants:
+  - name: link
+    title: Link
+  - name: group
+    title: Group
+  - name: link-group
+    title: Link Group
+  - name: negative
+    title: Negative
+  - name: round
+    title: Round
+  - name: discrete-link
+    title: Discrete Link
+  - name: round-link
+    title: Round Link
+  - name: round-discrete-link
+    title: Round Discrete Link
+  - name: negative-link
+    title: Negative Link
+notes: |
+
+  Icons to accomodate research boxes. The available research ids are:
+  * `orcid`
+  * `googlescholar`
+  * `scopus`
+  * `stackoverflow`
+  * `wos`

package/dist/components/atoms/select/select-multiple.twig

@@ -1,6 +1,6 @@
 <div class="form-group">
   <label>Pick a restaurant</label>
-  <select class="select-multiple" multiple="multiple" data-placeholder="Restaurant list">
+  <select class="select-multiple" multiple="multiple" data-placeholder="Restaurant list" data-filter="true">
     <option value="1">Chuck Testa's tavern</option>
     <option value="2">The Sage Cattabriga-Alosa hideout</option>
     <option value="3">Nikola Tesla Drive-in</option>
@@ -9,5 +9,10 @@
     <option value="5">The Hydron Collider</option>
     <option value="6">There's no place like 127.0.0.1</option>
     <option value="7">The Shake Shack Space bar</option>
+    <optgroup label="EPFL">
+      <option value="8">Holy Cow</option>
+      <option value="9">Panares Gourmet</option>
+      <option value="10">Satellite</option>
+    </optgroup>
   </select>
 </div>

package/dist/components/atoms/social-icon/social-icon-group.twig

@@ -18,6 +18,9 @@
   <li>
     {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Mastodon', icon: 'icon-mastodon', round: round, discrete: discrete, negative: negative } %}
   </li>
+  <li>
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Matrix', icon: 'icon-matrix', round: round, discrete: discrete, negative: negative } %}
+  </li>
   <li>
     {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'TikTok', icon: 'icon-tiktok', round: round, discrete: discrete, negative: negative } %}
   </li>

package/dist/components/atoms/social-icon/social-icon-link-group.twig

@@ -15,6 +15,11 @@
   <li>
     {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Mastodon', icon: 'icon-mastodon', round: round, discrete: discrete, negative: negative, url: 'https://social.epfl.ch/@epfl/' } %}
   </li>
+    {%  if social_matrix %}
+  <li>
+    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Get in touch on Matrix', icon: 'icon-matrix', round: round, discrete: discrete, negative: negative, url: 'https://matrix.to/#/@username:epfl.ch' } %}
+  </li>
+  {% endif %}
   {%  if social_tiktok %}
   <li>
     {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on TikTok', icon: 'icon-tiktok', round: round, discrete: discrete, negative: negative, url: 'https://www.tiktok.com/@epflstudents' } %}

package/dist/components/atoms/social-icon/social-icon-link.twig

@@ -1,5 +1,5 @@
-{% set pretty_name = pretty_name ?: 'X' %}
-{% set icon = icon ?: 'icon-x' %}
+{% set pretty_name = pretty_name ?: 'Mastodon' %}
+{% set icon = icon ?: 'icon-mastodon' %}
 {% set round = round ? ' social-icon-round' : '' %}
 {% set discrete = discrete ? ' social-icon-discrete' : '' %}
 {% set negative = negative ? ' social-icon-negative' : '' %}

package/dist/components/atoms/social-icon/social-icon-single-link-with-details.twig

@@ -1,6 +1,6 @@
-{% set pretty_name = pretty_name ?: 'X' %}
+{% set pretty_name = pretty_name ?: 'Mastodon' %}
 {% set user_id = user_id ?: 'firstname.name' %}
-{% set icon = icon ?: 'icon-x' %}
+{% set icon = icon ?: 'icon-mastodon' %}
 {% set round = round ? ' social-icon-round' : '' %}
 {% set discrete = discrete ? ' social-icon-discrete' : '' %}
 {% set negative = negative ? ' social-icon-negative' : '' %}

package/dist/components/atoms/social-icon/social-icon-single-link.twig

@@ -1,5 +1,5 @@
-{% set pretty_name = pretty_name ?: 'Follow us on X' %}
-{% set icon = icon ?: 'icon-x' %}
+{% set pretty_name = pretty_name ?: 'Follow us on Mastodon' %}
+{% set icon = icon ?: 'icon-mastodon' %}
 {% set round = round ? ' social-icon-round' : '' %}
 {% set discrete = discrete ? ' social-icon-discrete' : '' %}
 {% set negative = negative ? ' social-icon-negative' : '' %}

package/dist/components/atoms/social-icon/social-icon-single.twig

@@ -1,5 +1,5 @@
-{% set pretty_name = pretty_name ?: 'X' %}
-{% set icon = icon ?: 'icon-x' %}
+{% set pretty_name = pretty_name ?: 'Mastodon' %}
+{% set icon = icon ?: 'icon-mastodon' %}
 {% set round = round ? ' social-icon-round' : '' %}
 {% set discrete = discrete ? ' social-icon-discrete' : '' %}
 {% set negative = negative ? ' social-icon-negative' : '' %}

package/dist/components/atoms/social-icon/social-icon.twig

@@ -1,5 +1,5 @@
-{% set pretty_name = pretty_name ?: 'X' %}
-{% set icon = icon ?: 'icon-x' %}
+{% set pretty_name = pretty_name ?: 'Mastodon' %}
+{% set icon = icon ?: 'icon-mastodon' %}
 {% set round = round ? ' social-icon-round' : '' %}
 {% set discrete = discrete ? ' social-icon-discrete' : '' %}
 {% set negative = negative ? ' social-icon-negative' : '' %}

package/dist/components/atoms/social-icon/social-icon.yml

@@ -27,6 +27,7 @@ notes: |
   * `instagram`
   * `linkedin`
   * `mastodon`
+  * `matrix`
   * `tiktok`
   * `whatsapp`
   * `x`

package/dist/components/molecules/map/map-overlay.twig

@@ -0,0 +1,7 @@
+<h4 class="sr-only">Access map</h4>
+<figure class="media-map">
+  {% include '@atoms/picture/picture.twig' %}
+  <figcaption class="media-map-over">
+    <a href="#" class="btn btn-primary btn-block">Itinéraire vers le bureau BP (1er étage)</a>
+  </figcaption>
+</figure>

package/dist/components/molecules/map copy/map-overlay.twig

@@ -0,0 +1,7 @@
+<h4 class="sr-only">Access map</h4>
+<figure class="media-map">
+  {% include '@atoms/picture/picture.twig' %}
+  <figcaption class="media-map-over">
+    <a href="#" class="btn btn-primary btn-block">Itinéraire vers le bureau BP (1er étage)</a>
+  </figcaption>
+</figure>

package/dist/components/molecules/map copy/map.twig

@@ -0,0 +1,5 @@
+<iframe
+  height="350px"
+  width="100%"
+  src="https://plan.epfl.ch/iframe/?room==sv 1717&map_zoom=10">
+</iframe>

package/dist/components/molecules/map copy/map.yml

@@ -0,0 +1,20 @@
+title: Map
+name: map
+notes: |
+  The following is an example URL that loads the Plan Embed API:
+  `https://plan.epfl.ch/iframe/?room==ROOM&map_zoom=ZOOM`
+
+   Replace :
+  * ROOM (example → SV 1717)
+  * ZOOM (example → 10)
+
+  To use the Plan Embed API on your web page, set the URL you've built as the
+  value of an iframe's `src` attribute. Control the map's size with the iframe's
+  `height` and `width` attributes.
+
+  The iframe is only allowed on the epfl.ch domain.
+wrapper: 'tlbx-hidden'
+variants:
+  - name: overlay
+    title: Overlapping Figure Caption
+    wrapper: ' '

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

@@ -17,7 +17,7 @@
 
 {% 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>
+  <h1 class="h3 my-0">Laboratory page (<a href="#/doc/user%20documentation--create%20a%20page.md" target="_blank" onclick="window.open('#/doc/user%20documentation--create%20a%20page.md')">doc</a>)</h1>
   <button class="btn btn-sm btn-primary" id="tour-start">Start the tour !</button>
 </div>
 {% endblock %}

package/dist/css/elements.css

@@ -10193,6 +10193,10 @@ table {
   background: #ff0000 !important;
 }
 
+.introjs-bullets ul li:before {
+  content: none;
+}
+
 .focused, .btn {
   position: relative;
 }
@@ -12301,6 +12305,126 @@ picture .img-fluid {
   background: linear-gradient(#ff0000, #ff0000) 0/var(--sx) 100% no-repeat #c1c1c1;
 }
 
+.research-icon {
+  display: inline-block;
+  padding: 0.7rem;
+  background: #e6e6e6;
+  border-radius: 0.17rem;
+  line-height: 0;
+}
+.research-icon .icon {
+  top: 0;
+  font-size: 24px;
+  color: #fff;
+}
+
+.research-icon-details {
+  min-height: 2.6em;
+  -webkit-text-decoration: none !important;
+  text-decoration: none !important;
+  vertical-align: bottom;
+}
+.research-icon-details:hover {
+  background: #707070;
+  color: white;
+}
+.research-icon-details .user {
+  position: relative;
+  top: 2px;
+  line-height: 24px;
+  vertical-align: bottom;
+}
+.research-icon-details .icon + .user {
+  margin-left: 0.25em;
+  top: -1px;
+  line-height: 1em;
+}
+
+a.research-icon {
+  margin-bottom: 0.3rem;
+  transition: transform 0.2s ease, background-color 0.2s ease, background-image 0.2s ease;
+}
+a.research-icon:hover, a.research-icon:focus {
+  transform: translateY(-0.2rem);
+  box-shadow: 0;
+}
+
+.research-icon-orcid {
+  background-color: #000000;
+}
+
+.research-icon-googlescholar {
+  background-color: #4287f6;
+}
+
+.research-icon-scopus {
+  background-color: #fe8300;
+}
+
+.research-icon-stackoverflow {
+  background-color: #f58025;
+}
+
+.research-icon-wos {
+  background-color: #5D33BF;
+}
+
+.research-icon-round {
+  border-radius: 100% !important;
+  padding: 0.8rem;
+}
+.research-icon-round:before {
+  border-radius: 100% !important;
+}
+
+.research-icon-negative {
+  padding: 0.5rem;
+  background: transparent;
+  transition: background 0.2s;
+}
+.research-icon-negative .icon {
+  font-size: 1.5rem;
+  color: #212121;
+  transition: fill 0.2s;
+}
+.research-icon-negative:hover {
+  background: #ff0000 !important;
+}
+.research-icon-negative:hover .icon {
+  color: #fff !important;
+}
+
+.research-icon-discrete .icon {
+  transition: fill 0.2s ease;
+}
+.research-icon-discrete:not(:hover) {
+  background: #e6e6e6;
+}
+.research-icon-discrete:not(:hover) .icon {
+  color: #707070;
+}
+
+.research-icon-list {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  margin: 0;
+}
+.research-icon-list li {
+  margin-bottom: 0.25rem;
+}
+.research-icon-list li .research-icon {
+  margin: 0;
+}
+.research-icon-list li:not(:last-child) {
+  margin-right: 0.25rem;
+}
+@media (min-width: 992px) {
+  .research-icon-list li {
+    margin-bottom: 0;
+  }
+}
+
 .custom-select {
   border-color: #8e8e8e;
 }
@@ -12370,6 +12494,35 @@ picture .img-fluid {
   height: 25px;
 }
 
+.ms-search {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  margin: 0;
+  min-height: 30px;
+  padding: 0.5em 1em;
+  white-space: nowrap;
+  z-index: 10000;
+  box-sizing: border-box;
+}
+.ms-search input {
+  width: 100%;
+  height: auto !important;
+  margin: 0;
+  min-height: 28px;
+  padding: 0 5px;
+  outline: 0;
+  border: 1px solid #8e8e8e;
+  border-radius: 2px;
+  box-shadow: none;
+}
+.ms-search input:focus, .ms-search input.focus, .ms-search input:focus-visible {
+  border-color: #212121 !important;
+  box-shadow: none !important;
+  outline: 2px solid #707070;
+  outline-offset: 2px;
+}
+
 .ms-drop {
   display: none;
   position: absolute;
@@ -12417,6 +12570,9 @@ picture .img-fluid {
 .ms-drop ul > li.group {
   clear: both;
 }
+.ms-drop ul > li.group ~ li.option-level-1:not(.hide-radio) > label {
+  padding-left: 3em;
+}
 .ms-drop ul > li.option-divider {
   padding: 0;
   border-top: 1px solid #c1c1c1;
@@ -12436,13 +12592,17 @@ picture .img-fluid {
 .ms-drop label.optgroup {
   font-weight: 700;
 }
+.ms-drop label.optgroup input[type=checkbox] {
+  margin-right: 0.6em;
+}
 .ms-drop input[type=checkbox] {
   vertical-align: middle;
-  margin-right: 0.5em;
+  margin-right: 0.3em;
   margin-bottom: 0.25em;
 }
 .ms-drop .ms-no-results {
   display: none;
+  padding: 0 1em;
 }
 
 hr {
@@ -12532,6 +12692,10 @@ a.social-icon:hover, a.social-icon:focus {
   background-color: #6364ff;
 }
 
+.social-icon-matrix {
+  background-color: #000000;
+}
+
 .social-icon-bluesky {
   background-color: #1185fe;
 }
@@ -14773,7 +14937,6 @@ ol.flickity-page-dots li:before {
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
-  font-family: "object-fit: cover;"; /* stylelint-disable-line */
 }
 
 .media-map-over {
@@ -15766,7 +15929,6 @@ ol.flickity-page-dots li:before {
        object-fit: cover;
     -o-object-position: top center;
        object-position: top center;
-    font-family: "object-fit: cover;"; /* stylelint-disable-line */
     width: 100%;
     height: 100%;
     max-width: none;
@@ -17120,7 +17282,6 @@ a.nav-arrow:hover .icon-container {
      object-fit: cover;
   -o-object-position: center center;
      object-position: center center;
-  font-family: "object-fit: cover;"; /* stylelint-disable-line */
   width: 100%;
   height: 100%;
 }