Work on thematic areas carousel

unepwcmc · Jan 13, 2020 · d4ae1f9 · d4ae1f9
1 parent 3cbc675
commit d4ae1f9
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/app/assets/stylesheets/components/vue-agile/_agile-themes.scss b/app/assets/stylesheets/components/vue-agile/_agile-themes.scss
@@ -1,6 +1,9 @@
-$agile-themes-margin-sides-mobile: 10%;
-$agile-themes-margin-sides-tablet: 14%;
-$agile-themes-margin-sides-desktop: 8%;
+$agile-themes-slide-padding-desktop: rem-calc(10);
+
+$agile-themes-slides-margin-mobile: 10%;
+$agile-themes-slides-margin-tablet: 14%;
+$agile-themes-slides-margin-desktop: 4%;
+$agile-themes-slides-margin-monitor: calc((100% - #{$site-width-rem} + 2*#{$gutter-large} - 2*#{$agile-themes-slide-padding-desktop} )/2);
 
 &--themes {
   color: $white;
@@ -12,42 +15,59 @@ $agile-themes-margin-sides-desktop: 8%;
     }
 
     &__actions {
-      @include responsive(padding-right, $agile-themes-margin-sides-mobile, $agile-themes-margin-sides-tablet, $agile-themes-margin-sides-desktop);
-      @include responsive(padding-left, $agile-themes-margin-sides-mobile, $agile-themes-margin-sides-tablet, $agile-themes-margin-sides-desktop);
+      @include responsive(padding-right, $agile-themes-slides-margin-mobile, $agile-themes-slides-margin-tablet, $agile-themes-slides-margin-desktop);
+      @include responsive(padding-left, $agile-themes-slides-margin-mobile, $agile-themes-slides-margin-tablet, $agile-themes-slides-margin-desktop);
       width: 100%;
 
       position: absolute;
       top: 50%;
 
       transform: translateY(-50%);
+
+      @include breakpoint($large) {
+        width: $site-width;
+
+        left: 50%;
+
+        transform: translate(-50%);
+      }
     }
 
       &__nav-button--prev { 
         @include button-prev; 
 
         transform: translateX(-50%);
+
+        @include breakpoint($large) { transform: translateX(-100%); }
       }
 
       &__nav-button--next { 
         @include button-next; 
 
         transform: translateX(50%);
+
+        @include breakpoint($large) { transform: translateX(100%); }
       }
 
     &__list {
-      @include responsive(margin-right, $agile-themes-margin-sides-mobile, $agile-themes-margin-sides-tablet, $agile-themes-margin-sides-desktop);
-      @include responsive(margin-left, $agile-themes-margin-sides-mobile, $agile-themes-margin-sides-tablet, $agile-themes-margin-sides-desktop);
+      @include responsive(margin-right, $agile-themes-slides-margin-mobile, $agile-themes-slides-margin-tablet, $agile-themes-slides-margin-desktop);
+      @include responsive(margin-left, $agile-themes-slides-margin-mobile, $agile-themes-slides-margin-tablet, $agile-themes-slides-margin-desktop);
       overflow: visible;
       width: auto;
+
+      @include breakpoint($large) {
+        margin-right: $agile-themes-slides-margin-monitor;
+        margin-left: $agile-themes-slides-margin-monitor;
+      }
     }
 
       &__slides {
         align-items: stretch;
       }
 
         &__slide {
-          @include responsive(padding-right, rem-calc(5), rem-calc(10), rem-calc(10));
-          @include responsive(padding-left, rem-calc(5), rem-calc(10), rem-calc(10));
+          @include responsive(padding-right, rem-calc(5), rem-calc(10), $agile-themes-slide-padding-desktop);
+          @include responsive(padding-left, rem-calc(5), rem-calc(10), $agile-themes-slide-padding-desktop);
         }
 
           &__slide-link {

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -263,7 +263,7 @@ def link_to_page? card
   def get_agile_config_themes
     {
       navButtons: true,
-      infinite: true,
+      infinite: false,
       responsive: [
       {
           breakpoint: 628,