Merge branch 'release/1.1.1'

epfl-si · Aug 13, 2018 · 2bfff14 · 2bfff14
2 parents 1fad691 + 4054d61
commit 2bfff14
Show file tree

Hide file tree

Showing 13 changed files with 135 additions and 34 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,13 @@
 
 # CHANGELOG
 
+*1.1.1* (2018-08-13)
+  - contact compact component
+  - add date in headline
+  - fix visual regression on headline
+  - implement header dropdown
+  - enhance hero component and image size
+
 *1.1.0* (2018-08-10)
   - implement Taggable breadcrumb
   - implement headlines

diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-1.1.0
+1.1.1
diff --git a/assets/components/atoms/definition-list/definition-list.scss b/assets/components/atoms/definition-list/definition-list.scss
@@ -24,6 +24,7 @@
     font-weight: $font-weight-base;
     color: $text-muted;
     padding-right: $grid-gutter-width / 2;
+    &:last-of-type { border-bottom: none; }
 
     &.definition-list-item-full {
       padding-bottom: 0;
@@ -33,10 +34,7 @@
 
   dd {
     grid-column: 2;
-
-    &:last-child {
-      border-bottom: none;
-    }
+    &:last-of-type { border-bottom: none; }
   }
 
   dt,

diff --git a/assets/components/organisms/contact/contact-compact.twig b/assets/components/organisms/contact/contact-compact.twig
@@ -0,0 +1,18 @@
+<div class="card">
+  <div class="card-body">
+    <div class="my-3 d-md-flex align-items-center">
+      <img class="img-fluid rounded-circle mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Heidy Traill">
+      <div class="w-100 mt-2 mt-md-0">
+        <a class="btn btn-block btn-primary mb-2" href="mailto:[email protected]">[email protected]</a>
+        <a class="btn btn-block btn-secondary" href="tel:+41791234567">+41 79 123 45 67</a>
+      </div>
+    </div>
+    <h3><a class="link-pretty" href="#">Heidy Traill</a></h3>
+    <dl class="definition-list definition-list-grid mb-0">
+      <dt>Fonction</dt>
+      <dd>Journaliste, Secouriste</dd>
+      <dt>Bureau</dt>
+      <dd><a class="link-pretty" href="#">BM 4129</a></dd>
+    </dl>
+  </div>
+</div>
diff --git a/assets/components/organisms/contact/contact.yml b/assets/components/organisms/contact/contact.yml
@@ -1,6 +1,8 @@
 title: Contact
 name: contact
 variants:
+  - name: compact
+    title: Contact bloc compact
   - name: banner
     title: Banner
     wrapper: bg-gray-100

diff --git a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss
@@ -96,7 +96,7 @@
   @include media-breakpoint-up(md) {
     padding: 1rem $grid-gutter-width 0;
   }
-  
+
   @include media-breakpoint-up(xl) {
     display: flex;
     flex-direction: column;
@@ -207,7 +207,7 @@
       left: 10%;
       width: 80%;
       justify-content: flex-end;
-      padding-bottom: 3rem;
+      padding-bottom: $spacer * 6;
     }
 
     .fullwidth-teaser-header {

diff --git a/assets/components/organisms/header/header-light.twig b/assets/components/organisms/header/header-light.twig
@@ -7,6 +7,18 @@
     </a>
     <h1>{{site_title}}</h1>
     <ul aria-hidden="true" class="nav-header d-none d-xl-flex">
+      {% if dropdown %}
+      <li class="dropdown">
+        <button class="btn btn-link dropdown-toggle nav-item" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          Canal d'actualités
+        </button>
+        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+          <a class="dropdown-item" href="#">Option 1</a>
+          <a class="dropdown-item" href="#">Option 2</a>
+          <a class="dropdown-item" href="#">Option 3</a>
+        </div>
+      </li>
+      {% endif %}
       <li id="menu-item-888">
         <a class="nav-item" href="/propos-0/">À propos</a>
       </li>

diff --git a/assets/components/organisms/header/header.scss b/assets/components/organisms/header/header.scss
@@ -41,19 +41,21 @@
         padding: 2rem 0.7rem;
         font-weight: bold;
         text-decoration: none;
+      }
 
-        &:after {
-          content: ' ';
-          display: block;
-          position: absolute;
-          top: 1.3rem;
-          left: 0.7rem;
-          width: calc(100% - 1.4rem);
-          height: 3px;
-          background: $red;
-          opacity: 0;
-          transition: opacity 0.3s;
-        }
+      a:after,
+      &.dropdown .btn:before {
+        content: ' ';
+        display: block;
+        position: absolute;
+        top: 1.3rem;
+        left: 0.7rem;
+        width: calc(100% - 1.4rem);
+        height: 3px;
+        background: $red;
+        opacity: 0;
+        transform: none;
+        transition: opacity 0.3s;
       }
 
       a:hover,
@@ -78,6 +80,35 @@
       }
     }
 
+    .dropdown {
+      align-items: center;
+
+      .btn {
+        padding: 0.7rem;
+        font-size: inherit;
+        font-weight: bold;
+        text-decoration: none;
+      }
+
+      .btn:before {
+        top: 0 !important;
+        border: none;
+        border-radius: 0;
+      }
+
+      .btn:hover:before,
+      .btn:focus:before {
+        opacity: 1;
+      }
+    }
+
+    .dropdown-item {
+      padding: 0.25rem 1.25rem;
+      font-weight: $font-weight-normal;
+      &:after { content: none; }
+      &:hover { color: $black; }
+    }
+
     .icon { font-size: 0.9em; }
   }
 

diff --git a/assets/components/organisms/hero/hero.scss b/assets/components/organisms/hero/hero.scss
@@ -9,13 +9,13 @@
 
 .hero-content-container {
   @include media-breakpoint-up(md) {
-    flex: 0 0 50%;
+    flex: 1 0 50%;
     position: relative;
-    margin-top: ($grid-gutter-width * 4);
+    margin-top: $grid-gutter-width * 4;
   }
 
   @include media-breakpoint-up(lg) {
-    flex: 0 0 30%;
+    flex: 1 0 30%;
   }
 }
 
@@ -29,15 +29,44 @@
 
 .hero-title {
   @include media-breakpoint-up(md) {
-    max-width: 90%;
     display: inline-block;
+    max-width: 100%;
+    min-width: 75%;
     margin-bottom: 0;
-    padding-top: ($grid-gutter-width / 2);
-    padding-bottom: ($grid-gutter-width / 2);
+    padding-top: $grid-gutter-width / 2;
+    padding-bottom: $grid-gutter-width / 2;
+    text-align: right;
+  }
+}
+
+.hero-content {
+  @include media-breakpoint-up(md) {
+    width: 110%;
   }
 }
 
 .hero-img {
+  picture {
+    display: block;
+    height: 100%;
+    max-height: 100%;
+  }
+
+  img {
+    object-fit: cover;
+    object-position: center center;
+    font-family: 'object-fit: cover;'; /* stylelint-disable-line */
+    width: 100%;
+    height: 100%;
+  }
+
+  @include media-breakpoint-up(xxl) {
+    picture {
+      height: 80vh;
+      max-height: 80vh;
+    }
+  }
+
   @include media-breakpoint-up(md) {
     flex: 0 0 85%;
     margin-left: -35%;
@@ -46,10 +75,4 @@
   @include media-breakpoint-up(lg) {
     margin-left: -15%;
   }
-
-
-  img {
-    max-width: 100%;
-    height: auto;
-  }
 }
diff --git a/assets/components/pages/news-homepage/news-homepage.twig b/assets/components/pages/news-homepage/news-homepage.twig
@@ -3,7 +3,10 @@
 {% extends "@templates/base/base.twig" %}
 
 {% block header %}
-  {% include '@organisms/header/header-light.twig' with { site_title: 'Actu' } %}
+  {% include '@organisms/header/header-light.twig' with {
+    site_title: 'Actu',
+    dropdown: true
+  } %}
 {% endblock %}
 
 {% block content %}

diff --git a/assets/components/pages/people-list/people-list.twig b/assets/components/pages/people-list/people-list.twig
@@ -10,7 +10,13 @@
 </div>
 
 <div class="container mt-5">
-  Insérer le composant "Contact block listing"
+  <div class="row">
+    {% for i in 1..8 %}
+      <div class="col-md-6">
+        {% include '@organisms/contact/contact-compact.twig' %}
+      </div>
+    {% endfor %}
+  </div>
 </div>
 {% endblock %}
 

diff --git a/assets/config/data.json b/assets/config/data.json
@@ -117,6 +117,7 @@
       "cards": [
         {
           "title": "La valse quantique des électrons dessine les puces de demain",
+          "date": "16.09.17",
           "info": ["Actualité", "Nanotechnologies"],
           "content": "Des chercheurs de l’EPFL ont réussi à mesurer certaines propriétés quantiques d’électrons de semi-conducteurs à deux dimensions. Leurs travaux dans le domaine de la spintronique pourraient notamment aboutir à la fabrication de puces plus petites et dégageant moins de chaleur."
         },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "epfl-elements",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "license": "MIT",
   "main": "index.html",
   "repository": {