Update JS settings and improve button rendering by add a class attrib…

…ute for all slides
apparena · Oct 17, 2017 · 8627ca1 · 8627ca1
1 parent 2f36043
commit 8627ca1
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/source/_patterns/02-organisms/slider/references-slider.mustache b/source/_patterns/02-organisms/slider/references-slider.mustache
@@ -11,7 +11,7 @@
                             <img class="reference-screen-mobile" data-lazy="{{screens.mobile}}" alt="{{#title}}{{title}}{{/title}}">
                         {{/screens.mobile}}
                     </div>
-                    <div class="reference-quote text-center">
+                    <div class="reference-quote text-center hidden-xs-down">
                         <blockquote>
                             {{#title}}<h3>{{title}}</h3>{{/title}}
                             <p class="quote">" {{quote}} "</p>
@@ -55,6 +55,7 @@
         jQuery(document).ready(function () {
             jQuery('.o-references-slider .reference-slider').slick({
                 accessibility: false,
+                adaptiveHeight: true,
                 arrows: true,
                 asNavFor: '.references-slider-logo-slider',
                 cssEase: 'ease',
@@ -76,6 +77,7 @@
             });
             jQuery('.references-slider-logo-slider').slick({
                 accessibility: false,
+                adaptiveHeight: true,
                 arrows: false,
                 asNavFor: '.reference-slider',
                 centerMode: false,

diff --git a/source/_patterns/02-organisms/slider/references-slider.scss b/source/_patterns/02-organisms/slider/references-slider.scss
@@ -64,7 +64,7 @@
 
   .slick-prev,
   .slick-next {
-    z-index: 999;
+    z-index: 9999;
     position: absolute;
     display: block;
     height: auto;
@@ -198,8 +198,6 @@
 
   .reference-slider {
 
-    height: $reference-height;
-
     .slick-prev, .slick-next {
       // position arrows in the middle of relevant image
       top: 300px; // half of mobile image height
@@ -216,7 +214,6 @@
         width: 100%;
         overflow: hidden;
         @media (min-width: map_get($grid-breakpoints, 'lg')) {
-          height: $reference-height;
           width: 100% - percentage($reference-quote-width);
           float: right;
         }
@@ -249,7 +246,6 @@
         display: table;
         overflow: hidden;
         @media (min-width: map_get($grid-breakpoints, 'lg')) {
-          height: $reference-height;
           width: percentage($reference-quote-width);
           float: left;
         }
@@ -331,7 +327,7 @@
     //display: table; // center vertical-alignment of client logos - doesn't work though
     .references-slider-logo {
       padding: 1rem;
-      height: 90px;
+      max-height: 90px;
       //display: table-cell;
       //vertical-align: middle;
       text-align: center;