Merge branch 'release/1.2.0'

CHANGELOG.md

@@ -1,6 +1,50 @@
 
 # CHANGELOG
 
+*1.2.0* (2018-08-27)
+  - ⚠️ breaking markup changes
+    - **Organisms** :
+      - **[footer light:](https://epfl-idevelop.github.io/elements/#/organisms/footer)** margin improvement
+      - **[Contact & variants](https://epfl-idevelop.github.io/elements/#/organisms/contact):** Add schema attributes and refactor default background
+    - **Content-type** :
+      - **[science question:](https://epfl-idevelop.github.io/elements/#/content-types/science-question)** New design
+      - **[bachelor project](https://epfl-idevelop.github.io/elements/#/content-types/bachelor-project):** refactor bachelor-project content-type
+      - **[event & variants](https://epfl-idevelop.github.io/elements/#/content-types/event):** Add schema attributes
+      - **[news & variants](https://epfl-idevelop.github.io/elements/#/content-types/news):** Add schema attributes
+    - **Pages** :
+      - **[Association homepage](https://epfl-idevelop.github.io/elements/#/pages/association-homepage):** Update footer for the light variant
+      - **[Blog homepage](https://epfl-idevelop.github.io/elements/#/pages/blog-homepage):** Update footer for the light variant
+      - **[Event detail page](https://epfl-idevelop.github.io/elements/#/pages/event-detail):** Overhaul of the header and the content
+      - **[Event homepage](https://epfl-idevelop.github.io/elements/#/pages/event-homepage):** Update footer for the light variant
+      - **[Faculties page](https://epfl-idevelop.github.io/elements/#/pages/facultes):** Update the side navigation content
+      - **[Lab homepage](https://epfl-idevelop.github.io/elements/#/pages/lab-homepage):** Update the usage of the contact organism
+      - **[News detail page](https://epfl-idevelop.github.io/elements/#/pages/news-detail):** Add schema attributes
+      - **[News homepage](https://epfl-idevelop.github.io/elements/#/pages/news-homepage):** Update pagination wrapper
+      - **[People list page](https://epfl-idevelop.github.io/elements/#/pages/people-list):** Update the header and breadcrumb
+
+  - ✨ New implementations
+    - add function for async loading toggle
+    - add better release documentation and process
+    - **Atoms** :
+      - add **[loader](https://epfl-idevelop.github.io/elements/#/atoms/loader)** and [browse button async state](https://epfl-idevelop.github.io/elements/#/atoms/nav-toggle)
+    - **Molecules** :
+      - **[Key number](https://epfl-idevelop.github.io/elements/#/molecules/key-number)**
+    - **Organisms** :
+      - **[Key numbers group](https://epfl-idevelop.github.io/elements/#/organisms/key-number-group)**
+    - **Content-types** :
+      - **[Study plan](https://epfl-idevelop.github.io/elements/#/content-types/study-plan)** content type
+    - **Pages** :
+      - add **[about](https://epfl-idevelop.github.io/elements/#/pages/about)** page
+      - add **[education](https://epfl-idevelop.github.io/elements/#/pages/education)** page
+      - add **[innovation](https://epfl-idevelop.github.io/elements/#/pages/innovation)** page
+
+  - 🛠 Fixes & other
+    - error messages cleaning
+    - fix missing round option on social-icon variant
+    - add default profile picture for people details page #182
+    - fix IE grid issue with minmax and sizes
+    - centralise z-index management. cleanup dead code
+
 *1.1.2* (2018-08-20)
   - Add documentation new structure
   - Add branding pages

README.md

@@ -44,12 +44,46 @@ With Docker, you can run:
 - `$ docker-compose up builder` same as `$ yarn build` but in containers
 - `$ docker-compose up server` same as `$ yarn start` but in containers
 
-## Publish
+## Create a new release
+
+#### 1. Git release
+
+This project follows the [git-flow](https://danielkummer.github.io/git-flow-cheatsheet/)'s guidelines. It means you must use the following command to start a new release from your local **`dev`** branch :
+
+```bash
+$ git flow release start x.x.x
+```
+
+#### 2. Changelog & versions
+
+Because a new release can impact a lot of projects who use *Element*, **you must precisely list\* all the updates made on the components markup** in the **`CHANGELOG.md`**.
+
+**Check previous versions to give you an idea of how to write it the right way*
+
+Then, don't forget to **update the version number** in the `VERSION` and the `package.json` files.
+
+Commit everything !
+
+#### 3. Complete the release
+
+First, you must complete the [git-flow](https://danielkummer.github.io/git-flow-cheatsheet/) release process with the following command :
+
+```bash
+$ git flow release finish -p 'x.x.x'
+```
+
+Because the previous command will normally push your release commits and tag, simply **go on Github\* and copy/paste the release's changelog content** in the release's description. (go directly using `https://github.com/epfl-idevelop/elements/releases/edit/x.x.x`)
+
+#### 4. Publish the builds
+
+Complete every commit and tag message if needed. Then put yourself in your local **`master`** branch and type the following command to **start the build publishing task** :
+
+```bash
+$ sh publish.sh x.x.x
+```
+
+That's it ! If everything went fine, **the new release's build is available on the `dist/frontend`** branch thanks to you !
 
-1. From your local `dev` branch, `$ git flow release start x.x.x`
-2. Update `VERSION`, `CHANGELOG.md` and package.json `version`
-3. `$ git flow release finish -p 'x.x.x'`
-4. From your local `master` branch, `$ sh publish.sh x.x.x`
 
 ## Contribute
 

VERSION

@@ -1 +1 @@
-1.1.2
+1.2.0

assets/components/atoms/loader/loader.scss

@@ -0,0 +1,16 @@
+@charset 'utf-8';
+
+@keyframes rotation {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.loader {
+  display: inline-block;
+  width: 0.9rem;
+  height: 0.9rem;
+  border: 3px solid gray('200');
+  border-right-color: gray('600');
+  border-radius: 100%;
+  animation: rotation 1s linear infinite;
+}

assets/components/atoms/loader/loader.twig

@@ -0,0 +1 @@
+<span class="loader"></span>

assets/components/atoms/loader/loader.yml

@@ -0,0 +1,2 @@
+title: Loader
+name: loader

assets/components/atoms/nav-lang/nav-lang.scss

@@ -68,7 +68,7 @@
     bottom: -$mm-lang-height;
     width: $mm-lang-width;
     height: $mm-lang-height;
-    z-index: 999120;
+    z-index: $zindex-mobile-lang;
     background: gray('600');
     transition: bottom 0.3s;
 

assets/components/atoms/nav-toggle/nav-toggle-async.twig

@@ -0,0 +1,6 @@
+<button id="nav-toggle" class="nav-toggle nav-toggle-async btn btn-secondary">
+  {% include '@atoms/loader/loader.twig' %}
+  {% include '@atoms/icon/icon.twig' with { icon: 'icon-browse' } %}
+  {% include '@atoms/icon/icon.twig' with { icon: 'icon-close' } %}
+  Browse
+</button>

assets/components/atoms/nav-toggle/nav-toggle.scss

@@ -4,20 +4,30 @@
   display: none;
   position: relative;
   top: 1px;
-  z-index: 101;
+  z-index: $zindex-toggle;
   margin-right: $grid-gutter-width / 3;
   padding: $spacer / 4 $spacer / 2;
   &:hover { cursor: pointer; }
 
+  .loader {
+    display: none;
+    margin-right: 0.2rem;
+  }
+
+  &.is-loading {
+    .loader { display: inline-block; }
+    .icon { display: none !important; }
+  }
+
   .icon {
     margin-right: 0.2rem;
     font-size: 0.7rem;
 
-    &:first-child {
+    &:first-of-type {
       display: block;
     }
 
-    &:last-child {
+    &:last-of-type {
       display: none;
     }
   }
@@ -32,11 +42,11 @@
 }
 
 .desktop-menu-open .nav-toggle {
-  .icon:first-child {
+  .icon:first-of-type {
     display: none;
   }
 
-  .icon:last-child {
+  .icon:last-of-type {
     display: block;
   }
 }

assets/components/atoms/nav-toggle/nav-toggle.twig

@@ -1,4 +1,5 @@
 <button id="nav-toggle" class="nav-toggle btn btn-secondary">
+  {% include '@atoms/loader/loader.twig' %}
   {% include '@atoms/icon/icon.twig' with { icon: 'icon-browse' } %}
   {% include '@atoms/icon/icon.twig' with { icon: 'icon-close' } %}
   Browse

assets/components/atoms/nav-toggle/nav-toggle.yml

@@ -1,2 +1,10 @@
 title: Nav toggle
-name: nav-toggle
+name: nav-toggle
+variants:
+  - name: async
+    title: Async
+    notes: >
+      If you want an asynchronous transition, you can apply `nav-toggle-async` class on
+      the component. **It will start the loading** state `onClick` instead of opening the navigation.
+      <br /><br />
+      When your content is ready, **you need to trigger the end of the loading** state using `$('#nav-toggle').trigger('loadend');`

assets/components/atoms/select/select.scss

@@ -67,7 +67,7 @@
   overflow: hidden;
   margin-top: -$dropdown-border-width;
   padding: $dropdown-padding-y 0;
-  z-index: 1000;
+  z-index: $zindex-dropdown;
   background: $dropdown-bg;
   border: $dropdown-border-width solid $dropdown-border-color;
   color: $dropdown-link-color;

assets/components/atoms/social-icon/social-icon-round-discrete-link.twig

@@ -1,3 +1,4 @@
 {% include "@atoms/social-icon/social-icon-link.twig" with {
-  discrete: true
+  discrete: true,
+  round: true
 } %}

assets/components/base.scss

@@ -43,6 +43,7 @@
 @import 'atoms/trapeze/trapeze';
 @import 'atoms/definition-list/definition-list';
 @import 'atoms/figure/figure';
+@import 'atoms/loader/loader';
 
 //
 // molecules:
@@ -71,8 +72,8 @@
 @import 'molecules/tabs/tabs';
 @import 'molecules/collapse-group/collapse-group';
 @import 'molecules/card-deck/card-deck';
+@import 'molecules/key-number/key-number';
 
-//
 // organisms:
 @import 'organisms/card-slider/card-slider';
 @import 'organisms/fullwidth-teaser/fullwidth-teaser';
@@ -89,6 +90,7 @@
 @import 'organisms/restauration/restauration';
 @import 'organisms/social-feed-group/social-feed-group';
 @import 'organisms/headlines/headlines';
+@import 'organisms/key-number-group/key-number-group';
 
 //
 // content-types:
@@ -98,6 +100,7 @@
 @import 'content-types/publication/publication';
 @import 'content-types/science-question/science-question';
 @import 'content-types/study-plan/study-plan';
+@import 'content-types/study-plan/study-plan-ie';
 @import 'content-types/press-review/press-review';
 @import 'content-types/section/section';
 @import 'content-types/faculty/faculty';

assets/components/content-types/bachelor-project/bachelor-project.twig

@@ -2,14 +2,12 @@
   <div class="card-body pb-0">
     <div class="card-info">
       <span>Bachelor</span>
-      <span>BioS</span>
     </div>
     <h3 class="h5 card-title">
       <a href="#">Generic user interfaces for data manipulation programs</a>
     </h3>
   </div>
   <div class="card-footer mt-auto">
-    {% include '@molecules/avatar-teaser/avatar-teaser.twig' %}
     <a href="#" class="btn btn-secondary btn-sm">Project details</a>
   </div>
 </div>

assets/components/content-types/event/event-listing.twig

@@ -1,20 +1,23 @@
 <div class="list-group">
   {% for i in 1..5 %}
-    <a href="#" class="list-group-item list-group-item-gray list-group-teaser link-trapeze-vertical">
+    <a href="#" class="list-group-item list-group-item-gray list-group-teaser link-trapeze-vertical" itemscope itemtype="http://schema.org/Event">
       <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">
-          <p class="h5">Startup Acceleration Workshops</p>
+          <p class="h5 card-title" itemprop="name">Startup Acceleration Workshops</p>
           <div class="card-info mt-0">
             {% block date %}
-            <span class="card-info-date">10.01.2018</span>
-            <span>13:00</span>
-            <span>17:30</span>
+            <span class="card-info-date" itemprop="startDate" content="2018-01-10T12:00">10.01.2018</span>
+            <span class="event-time">13:00</span>
+            <span class="event-time">17:30</span>
             {% endblock %}
-            <p>
-              {% block info %}Lieu : <b>ArtLab EPFL</b><br> Catégorie : <b>Événements culturel</b><br>{% endblock %}
+            <p itemprop="location" itemscope itemtype="http://schema.org/Place">
+              {% block info %}
+              Lieu : <b><span itemprop="name">ArtLab EPFL</span></b>
+              <br> Catégorie : <b>Événements culturel</b><br>
+              {% endblock %}
             </p>
           </div>
         </div>

assets/components/content-types/event/event.twig

@@ -1,21 +1,24 @@
-<a href="#" class="{% block classes %}card card-gray link-trapeze-horizontal{% endblock %}">
+<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/event_teaser.png{% endblock %}" class="img-fluid" title="Image title" alt="Image alt description" />
     </picture>
     {% endblock %}
 
-    <h3 class="card-title">{% block title %}Startup Acceleration Workshops{% endblock %}</h3>
+    <h3 class="card-title" itemprop="name">{% block title %}Startup Acceleration Workshops{% endblock %}</h3>
     {% block summary %}{% endblock -%}
     <div class="card-info">
       {% block date %}
-      <span class="card-info-date">10.01.2018</span>
+      <span class="card-info-date" itemprop="startDate" content="2018-01-10T12:00">10.01.2018</span>
       <span>13:00</span>
       <span>17:30</span>
       {% endblock %}
-      <p>
-        {% block info %}Lieu : <b>ArtLab EPFL</b><br> Catégorie : <b>Événements culturel</b><br>{% endblock %}
+      <p itemprop="location" itemscope itemtype="http://schema.org/Place">
+        {% block info %}
+        Lieu : <b><span itemprop="name">ArtLab EPFL</span></b>
+        <br> Catégorie : <b>Événements culturel</b>
+        {% endblock %}
       </p>
     </div>
   </div>

assets/components/content-types/news/news-basic-teaser.twig

@@ -1,16 +1,16 @@
-<a href="#" class="card link-trapeze-horizontal">
+<a href="#" class="card link-trapeze-horizontal" itemscope itemtype="https://schema.org/NewsArticle">
   {% block img %}
     <picture class="card-img-top">
       <img src="./images/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">News title</h3>
+    <h3 class="card-title" itemprop="name">News title</h3>
     <div class="card-info">
-      <span class="card-info-date">11.09.17</span>
-      <span>Recherche</span>
-      <span>Prix et récompenses</span>
+      <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>The EPFL favors closer ties to industry leading research in order to best meet the scientific, technological and societal</p>
+    <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>

assets/components/content-types/news/news-distinction.twig

@@ -4,8 +4,8 @@
       <img src="./images/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">EPFL doctorate Award 2017 – Priscilla Briquez</h3>
-    <p>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 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>

assets/components/content-types/news/news-press-release.twig

@@ -4,16 +4,16 @@
       <img src="./images/event_teaser.png" class="img-fluid" title="professor Xile Hu" alt="a portrait of professor Xile Hu" />
     </picture>
   {% endblock %}
-  <div class="card-body">
+  <div class="card-body" itemscope itemtype="http://schema.org/Article">
     <div class="card-header">
       <strong>Press release</strong>
-      <time datetime="2018-01-31"><span class="sr-only">Published:</span>31.01.18</time>
+      <time datetime="2018-01-31" itemprop="datePublished"><span class="sr-only">Published:</span>31.01.18</time>
     </div>
-    <h3 class="card-title">Two months in Pyeongchang to study Korean snowfalls</h3>
+    <h3 class="card-title" itemprop="name">Two months in Pyeongchang to study Korean snowfalls</h3>
     <div class="card-info">
       <span>ENAC</span>
-      <span>Environment</span>
+      <span itemprop="about">Environment</span>
     </div>
-    <p>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>
+    <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>