Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix block timeline #146

Merged
merged 3 commits into from
Sep 14, 2023
Merged

Fix block timeline #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2a39c87
fix timeline class names
alexisben Sep 14, 2023
25f3117
keep events class
alexisben Sep 14, 2023
03a11ac
fix js
alexisben Sep 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions assets/js/theme/blocks/timeline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
29 changes: 14 additions & 15 deletions assets/sass/_theme/blocks/timeline.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
.block-timeline
&--vertical
.events
.timeline-events
position: relative
.event
.timeline-event
position: relative
&:not(:last-child)
padding-bottom: $spacing2
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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)
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down
4 changes: 2 additions & 2 deletions layouts/partials/blocks/templates/timeline/horizontal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions layouts/partials/blocks/templates/timeline/vertical.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down