Merge branch 'release/1.2.1'

epfl-si · Aug 29, 2018 · 5eec4f1 · 5eec4f1
2 parents 4e2828a + 3d98785
commit 5eec4f1
Show file tree

Hide file tree

Showing 22 changed files with 236 additions and 162 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,20 @@
 
 # CHANGELOG
 
+*1.2.1* (2018-08-29
+- ⚠️ breaking markup changes
+    - none
+
+  - ✨ New implementations
+    - d3304126e8429eb7f907c58c767c390177b5017a card-deck looks beeter when on grey background
+    - card deck variants
+
+  - 🛠 Fixes & other
+    - 5e5daf8fb350f96b90f1af6adfb6c9ffb39b6275 faculties page: 3 columns instead of 2
+    - prevent margin between two followed gray containers
+    - added key numbers on example pages
+
+
 *1.2.0* (2018-08-27)
   - ⚠️ breaking markup changes
     - **Organisms** :

diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-1.2.0
+1.2.1
diff --git a/assets/components/content-types/event/event.yml b/assets/components/content-types/event/event.yml
@@ -17,7 +17,7 @@ variants:
     title: Just finished
   - name: wrapper
     title: Slider wrapper
-    wrapper: bg-gray-100
+    wrapper: bg-gray-100 overflow-hidden
 notes: |
 
   ### Basic teaser
diff --git a/assets/components/molecules/card-deck/card-deck-duo-gray.twig b/assets/components/molecules/card-deck/card-deck-duo-gray.twig
@@ -0,0 +1,4 @@
+<div class="card-deck card-deck-line">
+  {% include '@molecules/card/card.twig' %}
+  {% include '@molecules/card/card.twig' %}
+</div>
diff --git a/assets/components/molecules/card-deck/card-deck-duo.twig b/assets/components/molecules/card-deck/card-deck-duo.twig
@@ -1,11 +1,4 @@
-<div class="card-deck card-deck-line">
-  {% include '@molecules/card/card-link.twig' %}
-  {% include '@molecules/card/card-link.twig' %}
-</div>
-<br>
-<hr>
-<br>
 <div class="card-deck card-deck-line">
   {% include '@molecules/card/card.twig' %}
   {% include '@molecules/card/card.twig' %}
-</div>
+</div>
diff --git a/assets/components/molecules/card-deck/card-deck-link-duo-gray.twig b/assets/components/molecules/card-deck/card-deck-link-duo-gray.twig
@@ -0,0 +1,4 @@
+<div class="card-deck card-deck-line">
+  {% include '@molecules/card/card-link.twig' %}
+  {% include '@molecules/card/card-link.twig' %}
+</div>
diff --git a/assets/components/molecules/card-deck/card-deck-link-duo.twig b/assets/components/molecules/card-deck/card-deck-link-duo.twig
@@ -0,0 +1,4 @@
+<div class="card-deck card-deck-line">
+  {% include '@molecules/card/card-link.twig' %}
+  {% include '@molecules/card/card-link.twig' %}
+</div>
diff --git a/assets/components/molecules/card-deck/card-deck-link-single-gray.twig b/assets/components/molecules/card-deck/card-deck-link-single-gray.twig
@@ -0,0 +1,3 @@
+<div class="card-deck card-deck-line">
+  {% include '@molecules/card/card-link.twig' %}
+</div>
diff --git a/assets/components/molecules/card-deck/card-deck-link-single.twig b/assets/components/molecules/card-deck/card-deck-link-single.twig
@@ -0,0 +1,3 @@
+<div class="card-deck card-deck-line">
+  {% include '@molecules/card/card-link.twig' %}
+</div>
diff --git a/assets/components/molecules/card-deck/card-deck-single-gray.twig b/assets/components/molecules/card-deck/card-deck-single-gray.twig
@@ -0,0 +1,3 @@
+<div class="card-deck card-deck-line">
+  {% include '@molecules/card/card-link.twig' %}
+</div>
diff --git a/assets/components/molecules/card-deck/card-deck-single.twig b/assets/components/molecules/card-deck/card-deck-single.twig
@@ -1,9 +1,3 @@
-<div class="card-deck card-deck-line">
-  {% include '@molecules/card/card-link.twig' %}
-</div>
-<br>
-<hr>
-<br>
 <div class="card-deck card-deck-line">
   {% include '@molecules/card/card.twig' %}
-</div>
+</div>
diff --git a/assets/components/molecules/card-deck/card-deck.scss b/assets/components/molecules/card-deck/card-deck.scss
@@ -7,30 +7,6 @@
   flex-wrap: wrap;
 
   @include media-breakpoint-up(lg) {
-    &.card-deck-line {
-
-      &:before {
-        content: ' ';
-        position: absolute;
-        top: 50%;
-        left: 5%;
-        width: 30%;
-        z-index: 0;
-        border-bottom: 1px solid $gray-100;
-      }
-
-      &:after {
-        content: ' ';
-        position: absolute;
-        top: 50%;
-        right: 5%;
-        width: 30%;
-        z-index: 0;
-        border-bottom: 1px solid $gray-100;
-      }
-
-    }
-
     > .card {
       z-index: 1;
       margin: $spacer * 0.5;
@@ -47,7 +23,7 @@
         flex: 0 0 33%;
         margin-left: auto;
       }
-    
+
       &:nth-last-child(n + 2) ~ * {
         flex: 0 0 33%;
         margin-right: auto;
@@ -61,106 +37,162 @@
       }
     }
 
-    /*
-    * for plain cards, we add pseudo elements, allowing the lines not to touch the cards
-    */
-    > div.card {
-      &:first-child:last-child {
-        position: relative;
-
-        &:before {
-          content: ' ';
-          display: block;
-          position: absolute;
-          top: 0;
-          left: calc(#{$spacer * -1} - 1px);
-          width: $spacer;
-          height: 100%;
-          background: white;
-        }
+    &.card-deck-line {
 
-        &:after {
-          content: ' ';
-          display: block;
-          position: absolute;
-          top: 0;
-          right: calc(#{$spacer * -1} - 1px);
-          width: $spacer;
-          height: 100%;
-          background: white;
-        }
+      &:before {
+        content: ' ';
+        position: absolute;
+        top: 50%;
+        left: 5%;
+        width: 30%;
+        z-index: 0;
+        border-bottom: 1px solid $gray-100;
 
+        .bg-gray-100 & {
+          border-bottom-color: $gray-300;
+        }
       }
 
-      // two cards are present
-      &:nth-last-child(n + 2) {
-        &:before {
-          content: ' ';
-          display: block;
-          position: absolute;
-          top: 0;
-          left: calc(#{$spacer * -1} - 1px);
-          width: $spacer;
-          height: 100%;
-          background: white;
+      &:after {
+        content: ' ';
+        position: absolute;
+        top: 50%;
+        right: 5%;
+        width: 30%;
+        z-index: 0;
+        border-bottom: 1px solid $gray-100;
+
+        .bg-gray-100 & {
+          border-bottom-color: $gray-300;
         }
       }
-
-      &:nth-last-child(n + 2) ~ * {
-        &:after {
-          content: ' ';
-          display: block;
-          position: absolute;
-          top: 0;
-          right: calc(#{$spacer * -1} - 1px);
-          width: $spacer;
-          height: 100%;
-          background: white;
+
+      /*
+      * for plain cards, we add pseudo elements, allowing the lines not to touch the cards
+      */
+      > div.card {
+        &:first-child:last-child {
+          position: relative;
+
+          &:before {
+            content: ' ';
+            display: block;
+            position: absolute;
+            top: 0;
+            left: calc(#{$spacer * -1} - 1px);
+            width: $spacer;
+            height: 100%;
+            background: white;
+
+            .bg-gray-100 & {
+              background-color: $gray-100;
+            }
+          }
+
+          &:after {
+            content: ' ';
+            display: block;
+            position: absolute;
+            top: 0;
+            right: calc(#{$spacer * -1} - 1px);
+            width: $spacer;
+            height: 100%;
+            background: white;
+
+            .bg-gray-100 & {
+              background-color: $gray-100;
+            }
+          }
         }
-      }
 
-      // three or more cards are present
-      &:nth-last-child(n + 3),
-      &:nth-last-child(n + 3) ~ * {
-
-        &:before,
-        &:after {
-          content: none;
+        // two cards are present
+        &:nth-last-child(n + 2) {
+          &:before {
+            content: ' ';
+            display: block;
+            position: absolute;
+            top: 0;
+            left: calc(#{$spacer * -1} - 1px);
+            width: $spacer;
+            height: 100%;
+            background: white;
+
+            .bg-gray-100 & {
+              background-color: $gray-100;
+            }
+          }
         }
 
-      }
-    }
+        &:nth-last-child(n + 2) ~ * {
+          &:after {
+            content: ' ';
+            display: block;
+            position: absolute;
+            top: 0;
+            right: calc(#{$spacer * -1} - 1px);
+            width: $spacer;
+            height: 100%;
+            background: white;
+
+            .bg-gray-100 & {
+              background-color: $gray-100;
+            }
+          }
+        }
 
-    /*
-    * Styles for card-links. this is tricky because we already use before and after pseudo elements
-    * on card-links. So to avoid the line touching the card, we add a border
-    */
-    > a.card {
+        // three or more cards are present
+        &:nth-last-child(n + 3),
+        &:nth-last-child(n + 3) ~ * {
 
-      // only one card is present
-      &:first-child:last-child {
-        flex: 0 0 calc(33% + #{$spacer * 1.5});
-        border-left: 1rem solid white;
-        border-right: 1rem solid white;
-      }
+          &:before,
+          &:after {
+            content: none;
+          }
 
-      // two cards are present
-      &:nth-last-child(n + 2) {
-        flex: 0 0 calc(33% + #{$spacer * 1.5});
-        border-left: 1rem solid white;
-      }
-
-      &:nth-last-child(n + 2) ~ * {
-        flex: 0 0 calc(33% + $spacer);
-        border-right: 1rem solid white;
+        }
       }
 
-      // three or more cards are present
-      &:nth-last-child(n + 3),
-      &:nth-last-child(n + 3) ~ * {
-        flex: 1 1 30%;
-        border: none;
+      /*
+      * Styles for card-links. this is tricky because we already use before and after pseudo elements
+      * on card-links. So to avoid the line touching the card, we add a border
+      */
+      > a.card {
+
+        // only one card is present
+        &:first-child:last-child {
+          flex: 0 0 calc(33% + #{$spacer * 1.5});
+          border-left: 1rem solid white;
+          border-right: 1rem solid white;
+          .bg-gray-100 & {
+            border-right-color: $gray-100;
+            border-left-color: $gray-100;
+          }
+        }
+
+        // two cards are present
+        &:nth-last-child(n + 2) {
+          flex: 0 0 calc(33% + #{$spacer * 1.5});
+          border-left: 1rem solid white;
+          .bg-gray-100 & {
+            border-left-color: $gray-100;
+          }
+        }
+
+        &:nth-last-child(n + 2) ~ * {
+          flex: 0 0 calc(33% + $spacer);
+          border-right: 1rem solid white;
+          .bg-gray-100 & {
+            border-right-color: $gray-100;
+          }
+        }
+
+        // three or more cards are present
+        &:nth-last-child(n + 3),
+        &:nth-last-child(n + 3) ~ * {
+          flex: 1 1 30%;
+          border: none;
+        }
       }
     }
   }
-}
+}
diff --git a/assets/components/molecules/card-deck/card-deck.twig b/assets/components/molecules/card-deck/card-deck.twig
@@ -3,11 +3,3 @@
   {% include '@molecules/card/card-link.twig' %}
   {% include '@molecules/card/card-link.twig' %}
 </div>
-<br>
-<hr>
-<br>
-<div class="card-deck">
-  {% include '@molecules/card/card.twig' %}
-  {% include '@molecules/card/card.twig' %}
-  {% include '@molecules/card/card.twig' %}
-</div>