diff --git a/assets/js/theme/blocks/timeline.js b/assets/js/theme/blocks/timeline.js index 8a13e87dd..1cab898f3 100644 --- a/assets/js/theme/blocks/timeline.js +++ b/assets/js/theme/blocks/timeline.js @@ -4,8 +4,8 @@ class BlockTimeline { constructor (block) { this.block = block; this.content = this.block.querySelector('.timeline'); - this.list = this.block.querySelector('.events ol'); - this.items = this.list.querySelectorAll('.event'); + this.list = this.block.querySelector('.timeline-events ol'); + this.items = this.list.querySelectorAll('.timeline-event'); this.previous = this.block.querySelector('.previous'); this.next = this.block.querySelector('.next'); this.isManipulated = false; diff --git a/assets/sass/_theme/blocks/timeline.sass b/assets/sass/_theme/blocks/timeline.sass index cb46062f8..e22477227 100644 --- a/assets/sass/_theme/blocks/timeline.sass +++ b/assets/sass/_theme/blocks/timeline.sass @@ -1,8 +1,8 @@ .block-timeline &--vertical - .events + .timeline-events position: relative - .event + .timeline-event position: relative &:not(:last-child) padding-bottom: $spacing2 @@ -28,28 +28,28 @@ margin-bottom: 0 &:last-child::after display: none - &-title + .title @include h4 + p margin-top: $spacing0 @include media-breakpoint-down(desktop) - .event + .timeline-event padding-left: half($grid-gutter-sm) &::after, &::before left: 0 @include in-page-without-sidebar - .events + .timeline-events padding-left: 0 - .event + .timeline-event display: flex &::before, &::after left: col(3) margin-left: half($grid-gutter) &::before transform: translateX(-4px) - &-title + .title width: col(3) text-align: right + p @@ -92,7 +92,7 @@ &:disabled cursor: default opacity: 0.3 - .events + .timeline-events margin-left: half(-$grid-gutter) margin-right: half(-$grid-gutter) // TODO : fixer le px gap en desktop entre chaque event @@ -104,13 +104,12 @@ margin-top: $spacing1 transition: margin 0.4s ease-in-out width: 100% - .event + .timeline-event flex: none padding: 0 half($grid-gutter) scroll-snap-align: start transition: 0.3s opacity width: 50% - .title display: block min-height: var(--min-title-height) @@ -143,21 +142,21 @@ background: transparent @include media-breakpoint-up(desktop) - .events + .timeline-events ol margin-top: $spacing2 - .event + .timeline-event .line width: calc(100% + #{$grid-gutter}) @include media-breakpoint-down(desktop) - .events + .timeline-events position: relative .timeline-arrows left: 0 position: absolute top: calc(#{$spacing2/2} + var(--min-title-height)) - .event + .timeline-event padding-right: 0 width: 75% .line @@ -170,7 +169,7 @@ @include in-page-without-sidebar @include media-breakpoint-up(xxl) - .event + .timeline-event width: 25% @include in-page-with-or-without-sidebar diff --git a/layouts/partials/blocks/templates/timeline/horizontal.html b/layouts/partials/blocks/templates/timeline/horizontal.html index 4fbbf2174..84538d92e 100644 --- a/layouts/partials/blocks/templates/timeline/horizontal.html +++ b/layouts/partials/blocks/templates/timeline/horizontal.html @@ -4,10 +4,10 @@ {{ end -}} {{ with .block.data }} -
+
    {{ range .events }} -
  1. +
  2. {{- partial "PrepareHTML" .title -}}

    {{- partial "PrepareHTML" .text | markdownify -}}
    diff --git a/layouts/partials/blocks/templates/timeline/vertical.html b/layouts/partials/blocks/templates/timeline/vertical.html index cbab7e2d0..496b4c6f3 100644 --- a/layouts/partials/blocks/templates/timeline/vertical.html +++ b/layouts/partials/blocks/templates/timeline/vertical.html @@ -6,11 +6,11 @@ {{ end -}} {{ with .block.data -}} -
    +
    {{ range .events -}} -
    +
    {{ if .title }} -

    {{ partial "PrepareHTML" .title }}

    +

    {{ partial "PrepareHTML" .title }}

    {{ end }} {{ if .text }}

    {{ partial "PrepareText" .text }}