epfl-elements 1.0.0 → 4.0.0

package/dist/components/content-types/study-plan/study-plan-master.twig

@@ -0,0 +1,483 @@
+
+<!-- Study Plan Master -->
+
+<div class="study-plan study-plan-master-pdm study-plan-4-semesters table-like mb-5">
+  <h2>Master – 2 semestres + projet de master</h2>
+  <div class="line-up">
+    <div class="first-line">
+      <div class="cours-title">
+        <div class="titre">Cours</div>
+      </div>
+      <div class="langue">
+        <div class="titre">Langue</div>
+      </div>
+      <div class="bachlor">
+        <div class="titre_bachlor bold">Master 1&nbsp;</div>
+        <div class="titre">
+          <div class="cep"><abbr title="Cours">c</abbr></div>
+          <div class="cep"><abbr title="Exercices">e</abbr></div>
+          <div class="cep"><abbr title="Pratiques">p</abbr></div>
+        </div>
+      </div>
+      <div class="bachlor">
+        <div class="titre_bachlor bold">Master 2&nbsp;</div>
+        <div class="titre">
+          <div class="cep"><abbr title="Cours">c</abbr></div>
+          <div class="cep"><abbr title="Exercices">e</abbr></div>
+          <div class="cep"><abbr title="Pratiques">p</abbr></div>
+        </div>
+      </div>
+      <div class="bachlor">
+        <div class="titre_bachlor bold">PDM automne</div>
+        <div class="titre">
+          <div class="cep"><abbr title="Cours">c</abbr></div>
+          <div class="cep"><abbr title="Exercices">e</abbr></div>
+          <div class="cep"><abbr title="Pratiques">p</abbr></div>
+        </div>
+      </div>
+      <div class="bachlor">
+        <div class="titre_bachlor bold">PDM printemps</div>
+        <div class="titre">
+          <div class="cep"><abbr title="Cours">c</abbr></div>
+          <div class="cep"><abbr title="Exercices">e</abbr></div>
+          <div class="cep"><abbr title="Pratiques">p</abbr></div>
+        </div>
+      </div>
+      <div class="examen">
+        <div class="titre_bachlor bold">Examens</div>
+      </div>
+      <div class="credit">
+        <div class="titre_bachlor bold">Crédits</div>
+      </div>
+    </div>
+    <div class="clear">&nbsp;</div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Projet de master en informatique">
+        <div class="cours-name">
+          <a href="#">Projet de master en informatique</a>
+        </div>
+        <div class="cours-info">CS-599 / Section <abbr title="Informatique">IN</abbr></div>
+        <div class="enseignement-name">
+          Profs divers
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="Français">FR</abbr> / <abbr title="English">EN</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Master 1">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Master 2">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="PDM automne">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Pratique: </span>900h&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="PDM printemps">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Pratique: </span>900h&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'été</b><br>Examen oral</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">30</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Stage d'ingénieur crédité avec le PDM (master en Informatique) ">
+        <div class="cours-name">
+          <a href="#">Stage d'ingénieur crédité avec le PDM (master en Informatique) </a> <i>(L'étudiant doit effectuer un stage de 8 semaines pendant l'été ou 6 mois après un semestre de Master.)</i>
+        </div>
+        <div class="cours-info">CS-595 / Section <abbr title="Informatique">IN</abbr></div>
+        <div class="enseignement-name">
+          Profs divers
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="Français">FR</abbr> / <abbr title="English">EN</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Master 1">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Pratique: </span>320h&nbsp;&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Master 2">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Pratique: </span>320h&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="PDM automne">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Pratique: </span>320h&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="PDM printemps">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Pratique: </span>320h&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'été</b><br>Mémoire</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">0</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+</div>
+
+<!-- Study Plan Master -->
+
+<div class="study-plan study-plan-master study-plan-2-semesters table-like mb-5">
+  <h2>Master – 2 semestres</h2>
+  <div class="line-up">
+    <div class="first-line">
+      <div class="cours-title">
+        <div class="titre">Cours</div>
+      </div>
+      <div class="langue">
+        <div class="titre">Langue</div>
+      </div>
+      <div class="bachlor">
+        <div class="titre_bachlor bold">Master 1&nbsp;</div>
+        <div class="titre">
+          <div class="cep"><abbr title="Cours">c</abbr></div>
+          <div class="cep"><abbr title="Exercices">e</abbr></div>
+          <div class="cep"><abbr title="Pratiques">p</abbr></div>
+        </div>
+      </div>
+      <div class="bachlor">
+        <div class="titre_bachlor bold">Master 2&nbsp;</div>
+        <div class="titre">
+          <div class="cep"><abbr title="Cours">c</abbr></div>
+          <div class="cep"><abbr title="Exercices">e</abbr></div>
+          <div class="cep"><abbr title="Pratiques">p</abbr></div>
+        </div>
+      </div>
+      <div class="specialisation">
+        <div class="titre_bachlor bold">Spécialisation</div>
+      </div>
+      <div class="examen">
+        <div class="titre_bachlor bold">Examens</div>
+      </div>
+      <div class="credit">
+        <div class="titre_bachlor bold">Crédits</div>
+      </div>
+    </div>
+    <div class="clear">&nbsp;</div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Advanced algorithms">
+        <div class="cours-name">
+          <a href="#">Advanced algorithms</a>
+        </div>
+        <div class="cours-info">CS-450 / Section <abbr title="Informatique">IN</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Kapralov</a>
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="English">EN</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Master 1">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Master 2">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>4h&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Exercices: </span>3h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="specialisation" data-title="Spécialisation">
+        <div class="spec-text">
+          <ul class="spec">
+            <li>Data Analytics</li>
+            <li>Foundations of software</li>
+            <li>Information Security-SP</li>
+            <li>Networking and Mobility</li>
+            <li>Computer Science Theory</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'été</b><br>Examen écrit</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">7</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Advanced computer architecture">
+        <div class="cours-name">
+          <a href="#">Advanced computer architecture</a>
+        </div>
+        <div class="cours-info">CS-470 / Section <abbr title="Informatique">IN</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Ienne</a>
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="English">EN</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Master 1">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Master 2">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>2h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Pratique: </span>2h&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="specialisation" data-title="Spécialisation">
+        <div class="spec-text">
+          <ul class="spec list-bullet">
+            <li>Computer Engineering-SP</li>
+            <li>Information Security-SP</li>
+            <li>Software Systems</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'été</b><br>Examen oral</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">4</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Computer vision">
+        <div class="cours-name">
+          <a href="#">Computer vision</a>
+        </div>
+        <div class="cours-info">CS-442 / Section <abbr title="Informatique">IN</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Fua</a>
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="English">EN</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Master 1">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Master 2">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>2h&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Exercices: </span>1h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="specialisation" data-title="Spécialisation">
+        <div class="spec-text">
+          <ul class="spec list-bullet">
+            <li>Signals, Images and Interfaces</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'été</b><br>Examen écrit</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">4</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+
+      <div class="cours" data-title="Cryptography and security">
+        <div class="cours-name">
+          <a href="#">Cryptography and security</a>
+        </div>
+        <div class="cours-info">COM-401 / Section <abbr title="Systèmes de communication">SC</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Vaudenay</a>
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="English">EN</abbr></div>
+        &nbsp;
+      </div>
+
+      <div class="bachlor local-color-light bachlor-color" data-title="Master 1">
+        <div class="bachlor-text">
+          <div class="cep"><span class="label sr-only">Cours: </span>4h&nbsp;</div>
+          <div class="cep"><span class="label sr-only">Exercices: </span>2h&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="bachlor local-color bachlor-color" data-title="Master 2">
+        <div class="bachlor-text">
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+          <div class="cep">–&nbsp;</div>
+        </div>
+      </div>
+
+      <div class="specialisation" data-title="Spécialisation">
+        &nbsp;
+      </div>
+
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'hiver</b><br>Examen écrit</div>
+        &nbsp;
+      </div>
+
+      <div class="credit red-color" data-title="Crédits">
+        <div class="credit-time">7</div>
+      </div>
+
+      <button class="btn-collapse">
+        <span class="show">afficher</span>
+        <span class="">masquer</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+      </button>
+
+    </div>
+  </div>
+
+</div>

package/dist/components/content-types/study-plan/study-plan-mineur.twig

@@ -0,0 +1,135 @@
+
+<!-- Study Plan Mineurs -->
+
+<div class="study-plan table-like" style="--table-columns: minmax(300px, 4fr) 1fr minmax(auto, 2fr) 1fr">
+  <h2>Mineur : Informatique</h2>
+
+  <div class="line-up">
+    <div class="first-line">
+      <div class="cours-title">
+        <div class="titre">Cours</div>
+      </div>
+      <div class="langue">
+        <div class="titre">Langue</div>
+      </div>
+      <div class="examen">
+        <div class="titre_bachlor bold">Examen</div>
+        <div class="titre">&nbsp;</div>
+      </div>
+      <div class="credit">
+        <div class="titre_bachlor bold">Crédits</div>
+        <div class="titre">&nbsp;</div>
+      </div>
+    </div>
+    <div class="clear">&nbsp;</div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+      <div class="cours" data-title="Advanced algorithms">
+        <div class="cours-name">
+          <a href="#">Advanced algorithms</a>
+        </div>
+        <div class="cours-info">CS-450 / Section <abbr title="Informatique">IN</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Svensson</a>
+          &nbsp;
+        </div>
+      </div>
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="English">EN</abbr></div>
+        &nbsp;
+      </div>
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'été</b><br>Examen écrit</div>
+        &nbsp;
+      </div>
+      <div class="credit red-color">
+        <div class="credit-time">7</div>
+      </div>
+    </div>
+    <div class="clear">&nbsp;</div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+      <div class="cours" data-title="Advanced computer architecture">
+        <div class="cours-name">
+          <a href="#">Advanced computer architecture</a>
+        </div>
+        <div class="cours-info">CS-470 / Section <abbr title="Informatique">IN</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Ienne</a>
+          &nbsp;
+        </div>
+      </div>
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="English">EN</abbr></div>
+        &nbsp;
+      </div>
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'été</b><br>Examen oral</div>
+        &nbsp;
+      </div>
+      <div class="credit red-color">
+        <div class="credit-time">4</div>
+      </div>
+    </div>
+    <div class="clear">&nbsp;</div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+      <div class="cours" data-title="Advanced computer graphics">
+        <div class="cours-name">
+          <a href="#">Advanced computer graphics</a>
+        </div>
+        <div class="cours-info">CS-440 / Section <abbr title="Informatique">IN</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Jakob</a>
+          &nbsp;
+        </div>
+      </div>
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="English">EN</abbr></div>
+        &nbsp;
+      </div>
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'été</b><br>Examens pendant le semestre</div>
+        &nbsp;
+      </div>
+      <div class="credit red-color">
+        <div class="credit-time">6</div>
+      </div>
+    </div>
+    <div class="clear">&nbsp;</div>
+  </div>
+
+  <div class="line-down">
+    <div class="line">
+      <div class="cours" data-title="Architecture des systems-on-chip">
+        <div class="cours-name">
+          <a href="#">Architecture des systems-on-chip</a>
+        </div>
+        <div class="cours-info">CS-209 / Section <abbr title="Informatique">IN</abbr></div>
+        <div class="enseignement-name">
+          <a href="#">Ienne</a>
+          &nbsp;
+        </div>
+      </div>
+      <div class="langue" data-title="Langue">
+        <div class="langue"><abbr title="Français">FR</abbr></div>
+        &nbsp;
+      </div>
+      <div class="examen" data-title="Examens">
+        <div class="exam-text"><b>Session d'été</b><br>Examens pendant le semestre</div>
+        &nbsp;
+      </div>
+      <div class="credit red-color">
+        <div class="credit-time">4</div>
+      </div>
+    </div>
+    <div class="clear">&nbsp;</div>
+  </div>
+
+</div>

package/dist/components/content-types/study-plan/study-plan.twig

@@ -0,0 +1,5 @@
+{% include '@content-types/study-plan/study-plan-bachelor.twig' %}
+
+{% include '@content-types/study-plan/study-plan-master.twig' %}
+
+{% include '@content-types/study-plan/study-plan-mineur.twig' %}

package/dist/components/content-types/study-plan/study-plan.yml

@@ -0,0 +1,10 @@
+title: Study plan
+name: study-plan
+notes: |
+  The study plan is a special case of table. The markup cannot be changed and we put in place a CSS Grid layout to display the content.
+
+  Please override the columns width (if they do not fit your needs) by using a CSS variable: `<div class="study-plan table-like" style="--table-columns: 1fr minmax(200px, 3fr) minmax(auto, 1fr) minmax(200px, 3fr) 3fr 1fr">`.
+
+  The default behaviour is kept on IE, the content stays readable (the table might be a bit wonky when some columns are missing though).
+
+  On mobile, the tables are scrollable horizontally.

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

@@ -0,0 +1,17 @@
+<article 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="#">Archivistique, bibliothéconomie et sciences de l'information</a></h3>
+    <div class="card-info card-info-bordered">
+      <span>MAS CAS FCO</span>
+    </div>
+    <p>Activités et fonctions des services d'archives et bibliothèques; Systèmes d'information et Records Management.</p>
+  </div>
+  <div class="card-footer mt-auto">
+    <a href="#" class="btn btn-secondary btn-sm mt-auto">Button</a>
+  </div>
+</article>

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

@@ -0,0 +1,3 @@
+title: Training
+name: training
+wrapper: col-md-6