diff --git a/app/assets/stylesheets/components/vue-agile/_agile-themes.scss b/app/assets/stylesheets/components/vue-agile/_agile-themes.scss index 69a6f5018..6531f81bb 100644 --- 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,33 +15,50 @@ $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 { @@ -46,8 +66,8 @@ $agile-themes-margin-sides-desktop: 8%; } &__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 index 3e4ef9529..1358543a8 100644 --- 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,