Merge branch 'release/1.1.0'

epfl-si · Aug 10, 2018 · 1fad691 · 1fad691
2 parents 7e9d604 + 13e8ebd
commit 1fad691
Show file tree

Hide file tree

Showing 130 changed files with 1,721 additions and 420 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,40 @@
 
 # CHANGELOG
 
+*1.1.0* (2018-08-10)
+  - implement Taggable breadcrumb
+  - implement headlines
+  - refactor homepage and full-width teaser usage
+  - use object-fit property for fullwidth teasers
+  - decrease fullwidth teaser content width
+  - add fallback grey background for highlights without image 
+  - implement card-deck component
+  - Create the following pages:
+    - Association homepage
+    - Association list
+    - Basic page
+    - Blog homepage
+    - Campus
+    - Event detail
+    - Event homepage
+    - Event list
+    - Facultés
+    - Lab homepage
+    - News detail
+    - News homepage
+    - People detail
+    - People list
+    - Programs
+    - Research
+  - implement nice focus for collapse component
+  - add close icon for browse button
+  - document the layout system via a page (Layout demo)
+  - fix missing tablesaw css
+  - implement card deck special design with 1 or 2 cards
+  - visual improvement to hero component
+  - fine tunng main nav visual
+  - allow iframe and embed to be full width in container-grid
+  - implement left highlight
+
 *1.0.0* (2018-07-25)
   - First release with all the current state
diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-1.0.0
+1.1.0
diff --git a/assets/components/atoms/collapse/collapse.scss b/assets/components/atoms/collapse/collapse.scss
@@ -41,9 +41,29 @@ $collapse-chevron-size: 12px;
   border: none;
   transition: box-shadow 0.25s;
 
+  &:before {
+    content: ' ';
+      position: absolute;
+      top: 0;
+      left: $spacer * -0.3;
+      width: $spacer * 0.6;
+      height: 100%;
+      background: $primary;
+      opacity: 0;
+      transition: 
+        opacity 0.3s,
+        transform 0.2s;
+      z-index: -1;
+  }
+
   &:focus {
     outline: none;
-    box-shadow: 0 0 0 2px $red;
+    position: relative;
+
+    &:before {
+      transform: translateX($spacer * -0.7);
+      opacity: 1;
+    }
   }
 
   &.collapse-title-desktop {

diff --git a/assets/components/atoms/drawer/drawer.scss b/assets/components/atoms/drawer/drawer.scss
@@ -61,6 +61,7 @@
       position: absolute;
       top: 50%;
       right: 0;
+      font-size: 1.1rem;
       transform: translateY(-50%);
       transform-origin: 50% 50%;
     }

diff --git a/assets/components/atoms/nav-toggle/nav-toggle.scss b/assets/components/atoms/nav-toggle/nav-toggle.scss
@@ -2,20 +2,41 @@
 
 .nav-toggle {
   display: none;
-  z-index: 101;
   position: relative;
+  top: 1px;
+  z-index: 101;
   margin-right: $grid-gutter-width / 3;
   padding: $spacer / 4 $spacer / 2;
   &:hover { cursor: pointer; }
 
   .icon {
     margin-right: 0.2rem;
     font-size: 0.7rem;
+
+    &:first-child {
+      display: block;
+    }
+
+    &:last-child {
+      display: none;
+    }
   }
 
   @include media-breakpoint-up(xl) {
     display: flex;
     justify-content: center;
     align-items: center;
+
+    .bg-gray-100 &:after { background: gray('100'); }
+  }
+}
+
+.desktop-menu-open .nav-toggle {
+  .icon:first-child {
+    display: none;
+  }
+
+  .icon:last-child {
+    display: block;
   }
 }
diff --git a/assets/components/atoms/nav-toggle/nav-toggle.twig b/assets/components/atoms/nav-toggle/nav-toggle.twig
@@ -1,4 +1,5 @@
 <button id="nav-toggle" class="nav-toggle btn btn-secondary">
   {% include '@atoms/icon/icon.twig' with { icon: 'icon-browse' } %}
+  {% include '@atoms/icon/icon.twig' with { icon: 'icon-close' } %}
   Browse
 </button>
diff --git a/assets/components/atoms/picture/picture-cover.twig b/assets/components/atoms/picture/picture-cover.twig
@@ -1,18 +1,19 @@
+{% set cover_path = cover_path|default("https://via.placeholder.com/") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/1920x1080.jpg 1x,https://via.placeholder.com/2880x1620.jpg 2x">
+    srcset="{{cover_path}}1920x1080.jpg 1x,{{cover_path}}2880x1620.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/1140x641.jpg 1x,https://via.placeholder.com/2280x1283.jpg 2x">
+    srcset="{{cover_path}}1140x641.jpg 1x,{{cover_path}}2280x1283.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/960x540.jpg 1x,https://via.placeholder.com/1920x1080.jpg 2x">
+    srcset="{{cover_path}}960x540.jpg 1x,{{cover_path}}1920x1080.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/720x405.jpg 1x,https://via.placeholder.com/1440x810.jpg 2x">
+    srcset="{{cover_path}}720x405.jpg 1x,{{cover_path}}1440x810.jpg 2x">
   <source
     media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/540x304.jpg 1x,https://via.placeholder.com/1080x608.jpg 2x">
-  <img src="https://via.placeholder.com/1920x1080.jpg" class="img-fluid" alt="Cover description">
+    srcset="{{cover_path}}540x304.jpg 1x,{{cover_path}}1080x608.jpg 2x">
+  <img src="{{cover_path}}1920x1080.jpg" class="img-fluid" alt="Cover description">
 </picture>
diff --git a/assets/components/atoms/tag/tag.twig b/assets/components/atoms/tag/tag.twig
@@ -1,30 +1,13 @@
 <h5>non-link</h5>
 <span class="tag tag-plain">Plain</span>
-<span class="tag tag-primary">Primary</span>
-<span class="tag tag-secondary">Secondary</span>
-<span class="tag tag-success">Success</span>
-<span class="tag tag-danger">Danger</span>
-<span class="tag tag-warning">Warning</span>
-<span class="tag tag-info">Info</span>
 <span class="tag tag-light">Light</span>
-<span class="tag tag-dark">Dark</span>
+
 <hr>
 <h5>link</h5>
-<a href="#" class="tag tag-plain">Plain</a>
 <a href="#" class="tag tag-primary">Primary</a>
 <a href="#" class="tag tag-secondary">Secondary</a>
-<a href="#" class="tag tag-success">Success</a>
-<a href="#" class="tag tag-danger">Danger</a>
-<a href="#" class="tag tag-warning">Warning</a>
-<a href="#" class="tag tag-info">Info</a>
-<a href="#" class="tag tag-light">Light</a>
-<a href="#" class="tag tag-dark">Dark</a>
 <hr>
 <h5>removable</h5>
-<span class="tag tag-plain">
-  Plain
-  <a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a>
-</span>
 <span class="tag tag-primary">
   Primary
   <a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a>
@@ -33,35 +16,10 @@
   Secondary
   <a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a>
 </span>
-<span class="tag tag-success">
-  Success
-  <a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a>
-</span>
-<span class="tag tag-danger">
-  Danger
-  <a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a>
-</span>
-<span class="tag tag-warning">
-  Warning
-  <a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a>
-</span>
-<span class="tag tag-info">
-  Info
-  <a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a>
-</span>
-<span class="tag tag-light">
-  Light
-  <a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a>
-</span>
 <hr>
 <h5>small</h5>
 <span class="tag tag-sm tag-plain">Plain</span>
 <span class="tag tag-sm tag-primary">Primary</span>
 <span class="tag tag-sm tag-secondary">Secondary</span>
-<span class="tag tag-sm tag-success">Success</span>
-<span class="tag tag-sm tag-danger">Danger</span>
-<span class="tag tag-sm tag-warning">Warning</span>
-<span class="tag tag-sm tag-info">Info</span>
 <span class="tag tag-sm tag-light">Light</span>
-<span class="tag tag-sm tag-dark">Dark</span>
 <hr>
diff --git a/assets/components/base.js b/assets/components/base.js
@@ -2,6 +2,7 @@
 
 import objectFitImages from 'object-fit-images';
 import upload from './atoms/upload/upload';
+import breadcrumb from './molecules/breadcrumb/breadcrumb';
 import datepicker from './molecules/datepicker/datepicker';
 import datepickerEvent from './molecules/datepicker/datepicker-fancy';
 import popover from './atoms/popover/popover';
@@ -31,6 +32,7 @@ const init = () => {
   nav();
   cardSlider();
   drawer();
+  breadcrumb();
 
   guide();
 

diff --git a/assets/components/base.scss b/assets/components/base.scss
@@ -9,6 +9,7 @@
 @import '../config/typography';
 @import '../config/layout';
 @import '../config/helpers';
+@import '../config/wordpress';
 @import '../../node_modules/tablesaw/src/tables.stack-mixin.scss';
 
 // Don't edit the following sections, they should always be preceded by a blank
@@ -69,6 +70,7 @@
 @import 'molecules/tables/tables';
 @import 'molecules/tabs/tabs';
 @import 'molecules/collapse-group/collapse-group';
+@import 'molecules/card-deck/card-deck';
 
 //
 // organisms:
@@ -86,6 +88,7 @@
 @import 'organisms/newsletter-sign-up/newsletter-sign-up';
 @import 'organisms/restauration/restauration';
 @import 'organisms/social-feed-group/social-feed-group';
+@import 'organisms/headlines/headlines';
 
 //
 // content-types:
@@ -107,3 +110,4 @@
 @import 'content-types/association/association';
 @import 'content-types/program/program';
 @import 'content-types/bachelor-project/bachelor-project';
+@import 'content-types/project/project';
diff --git a/assets/components/content-types/event/event-highlight-listing.twig b/assets/components/content-types/event/event-highlight-listing.twig
@@ -0,0 +1,16 @@
+<div class="row align-items-center">
+  <div class="col-md-6">
+    <h2>Les prochains événements</h2>
+  </div>
+  <div class="col-md-6 text-right">
+    <a href="#">Voir tous les événements de la faculté</a>
+  </div>
+</div>
+<div class="row mt-2">
+  <div class="col-md-6">
+    {% include '@content-types/event/event-highlight.twig' %}
+  </div>
+  <div class="col-md-6">
+    {% include '@content-types/event/event-listing.twig' %}
+  </div>
+</div>
diff --git a/assets/components/content-types/event/event-listing.twig b/assets/components/content-types/event/event-listing.twig
@@ -0,0 +1,30 @@
+<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">
+      <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>
+          <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>
+            {% endblock %}
+            <p>
+              {% block info %}Lieu : <b>ArtLab EPFL</b><br> Catégorie : <b>Événements culturel</b><br>{% endblock %}
+            </p>
+          </div>
+        </div>
+      </div>
+    </a>
+  {% endfor %}
+
+  {% if bottomlink %}
+    <a href="#" class="list-group-teaser-more">
+      Afficher plus d'événements
+    </a>
+  {% endif %}
+</div>
diff --git a/assets/components/content-types/event/event.yml b/assets/components/content-types/event/event.yml
@@ -2,17 +2,22 @@ title: Event
 name: event
 wrapper: col-md-5 bg-gray-100
 variants:
+  - name: listing
+    title: Listing
+    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
-
 notes: |
 
   ### Basic teaser
diff --git a/assets/components/content-types/news/news-latest-two.twig b/assets/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 class="link-pretty" href="#">See all news</a>
+</p>