Merge pull request #146 from noesya/hotfix/block-timeline

Fix block timeline

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;

assets/sass/_theme/blocks/timeline.sass

 .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

layouts/partials/blocks/templates/timeline/horizontal.html

@@ -4,10 +4,10 @@
   {{ end -}}
 
   {{ with .block.data }}
-    <div class="events">
+    <div class="timeline-events">
       <ol>
         {{ range .events }}
-          <li class="event">
+          <li class="timeline-event">
             <p class="title">{{- partial "PrepareHTML" .title -}}</p>
             <div class="line"></div>
             <div class="description text">{{- partial "PrepareHTML" .text | markdownify -}}</div>

layouts/partials/blocks/templates/timeline/vertical.html

@@ -6,11 +6,11 @@
   {{ end -}}
 
   {{ with .block.data -}}
-    <div class="events">
+    <div class="timeline-events">
       {{ range .events -}}
-        <article class="event">
+        <article class="timeline-event">
           {{ if .title }}
-            <h3 class="event-title">{{ partial "PrepareHTML" .title }}</h3>
+            <h3 class="title">{{ partial "PrepareHTML" .title }}</h3>
           {{ end }}
           {{ if .text }}
             <p>{{ partial "PrepareText" .text }}</p>