diff --git a/assets/js/theme/blocks/draggableBlocks.js b/assets/js/theme/blocks/draggableBlocks.js index 5d7dafc05392ee371cea9b7a802c514c8f890cb0..fcde80907af054d6068d5a757e9358fadcd7e148 100644 --- a/assets/js/theme/blocks/draggableBlocks.js +++ b/assets/js/theme/blocks/draggableBlocks.js @@ -1,4 +1,4 @@ -const draggableBlocks = document.querySelectorAll('.block-timeline--horizontal, .block-posts--scrollable'); +const draggableBlocks = document.querySelectorAll('.block-timeline--horizontal, .block-posts--carousel'); class DraggableBlock { constructor (block) { diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass index e202a63539355ac22bfe91d12c5e05837dfe9ce7..d8a42be91626f1c75dd0f870aea0751e022db7f1 100644 --- a/assets/sass/_theme/_configuration.sass +++ b/assets/sass/_theme/_configuration.sass @@ -491,5 +491,5 @@ $arrow-ease-transition-2: cubic-bezier(0, 0.65, 0.4, 1) !default $icon-burger-margin-right: -12px $icon-close-margin-right: -12px $icon-toc-margin-right: -14px -$icon-arrow-previous-margin-left: -22px // cf. testimonial +$icon-arrow-previous-margin-left: -18px // cf. testimonial $icon-social-margin-right: -14px diff --git a/assets/sass/_theme/blocks/posts.sass b/assets/sass/_theme/blocks/posts.sass index 734570f13af6d77173dd624ea605e1260048a583..b59c42ddb81591f6918062afbc1f1b590b70a0a7 100644 --- a/assets/sass/_theme/blocks/posts.sass +++ b/assets/sass/_theme/blocks/posts.sass @@ -289,11 +289,11 @@ margin-right: auto .post width: columns(4) - &--scrollable + &--carousel @include draggable-block .container padding-right: 0 - .scrollable + .carousel padding-bottom: $spacing-3 &:hover cursor: grab @@ -306,33 +306,41 @@ gap: unset .post margin: 0 calc(var(--grid-gutter) / 2) + .actions-arrows + justify-content: space-between @include media-breakpoint-down(desktop) - .scrollable + .carousel gap: half(var(--grid-gutter)) - .draggable-content - display: flex - flex-direction: column - .actions-arrows - order: -1 .post width: columns(10) .grab-item:last-of-type margin-right: half(var(--grid-gutter)) + .actions-arrows + margin-right: var(--grid-gutter) + @include media-breakpoint-up(desktop) + .next + margin-right: pxToRem(-27) // Marge négative pour aligner correctement le picto à la colonne @include in-page-with-sidebar .post width: columns(3) [itemprop="headline"] @include h4 + .carousel + .actions-arrows + width: offset(6) @include in-page-without-sidebar .block-content display: flex gap: var(--grid-gutter) .top width: columns(3) - .scrollable + .carousel width: columns(9) .post width: columns(4) + .carousel + .actions-arrows + width: offset(8) // Move this part to blocks/categories when categories block is ready .block-posts diff --git a/assets/sass/_theme/utils/blocks.sass b/assets/sass/_theme/utils/blocks.sass index e929425363c0bd4076814927cb97ce91cc44e4ab..7343e4ae3510aee699d508250f1e900ebd75c694 100644 --- a/assets/sass/_theme/utils/blocks.sass +++ b/assets/sass/_theme/utils/blocks.sass @@ -25,13 +25,14 @@ pointer-events: none .actions-arrows display: flex - padding-left: calc(var(--grid-gutter) / 2) + margin-left: calc(var(--grid-gutter) / 2) > button @include button-reset background: none border: none color: $block-timeline-horizontal-color cursor: pointer + padding: 0 &:first-child @include icon-block(arrow-previous, before) margin-left: $icon-arrow-previous-margin-left diff --git a/layouts/partials/blocks/templates/posts/scrollable.html b/layouts/partials/blocks/templates/posts/carousel.html similarity index 87% rename from layouts/partials/blocks/templates/posts/scrollable.html rename to layouts/partials/blocks/templates/posts/carousel.html index c36e1226db1dc2c046c0255a49465efc4f74548c..df63993734923de3d7540d0fe99b159564eb0ca0 100644 --- a/layouts/partials/blocks/templates/posts/scrollable.html +++ b/layouts/partials/blocks/templates/posts/carousel.html @@ -1,8 +1,8 @@ {{ $heading_level := .heading_level | default 3 }} {{ $heading := printf "h%d" $heading_level }} -<div class="scrollable draggable-container"> - <div class="scrollable-posts draggable-content"> +<div class="carousel draggable-container"> + <div class="carousel-posts draggable-content"> <ul class="posts"> {{ range $post := .posts -}} {{ with site.GetPage (printf "/posts/%s" $post) }}