Initial version of timeline

This commit is contained in:
2024-11-10 03:14:08 -08:00
parent 9740585b42
commit 533b45a6f4
5 changed files with 228 additions and 10 deletions

View File

@@ -40,6 +40,12 @@
{{ partial "image" (dict "Src" .image "Alt" "Banner" "Class" "w-1/3 h-1/3" ) }}
</figure>
{{ end }}
<!-- timeline -->
{{ if .timeline }}
{{ partial "components/timeline.html" . }}
{{ end }}
<!-- timeline -->
<h2 class="{{ .title_class }}">
{{ .title | markdownify }}
</h2>
@@ -72,18 +78,18 @@
<!-- testimonials -->
{{ if .testimonials }}
{{ partial "components/testimonials.html" . }}
{{ end }}
{{ end }}
<!-- testimonials -->
<!-- img_grid -->
{{ if .img_grid }}
{{ partial "components/img_grid.html" . }}
{{ end }}
<!-- /img_grid -->
<!-- card_grid -->
{{ if .card_grid }}
{{ partial "components/card_grid.html" . }}
{{ end }}
<!-- img_grid -->
<!-- card_grid -->
<p class="mb-8 text-lg about-content">
{{ .content | markdownify }}

View File

@@ -0,0 +1,61 @@
{{ if .timeline }}
{{ if .timeline.enable }}
{{ $default_day := .timeline.default_day }}
<div
class="container relative mx-auto px-4 {{ .timeline.section_class }} timeline_grid_container {{ .timeline.timeline_class }}"
data-day-target="{{ .timeline.default_day }}">
{{ if .timeline.title }}<p class="{{ .timeline.title_class }}">{{ .timeline.title }}</p>{{ end }}
{{ if .timeline.top_text }}<p class="{{ .timeline.top_text_class }}">{{ .timeline.top_text | markdownify }}</p>{{ end }}
<div class="flex flex-wrap justify-center mx-auto columns-1 max-w-3xl min-w-32">
{{ $event_class := .timeline.event_title_class }}
{{ $event_title_class := .timeline.event_title_class }}
{{ $event_subtitle_class := .timeline.event_subtitle_class }}
{{ $event_time_class := .timeline.time_class }}
{{ $event_img_class := .timeline.img_class }}
{{ $day_date_class := .timeline.day_date_class }}
<div class="day-listing-container flex justify-center items-center w-full mb-8">
<div class="space-x-4">
{{ $day_listing_class := .timeline.day_listing_class }}
{{ $day_listing_inactive_class := .timeline.day_listing_inactive_class }}
{{ range $i, $day := .timeline.days }}
<span
class="day_listing {{ $day.listing_class }} {{ $day_listing_class }} {{ if ne $day.title $default_day }} inactive {{ else }} active {{ end }}"
data-day-target="{{ $day.title }}">{{ $day.title }}</span>
{{ end }}
</div>
</div>
<div class="day-container w-full">
{{ range $day := .timeline.days }}
<div class="day-events w-full {{ if ne $day.title $default_day }} hidden {{ end }}" data-day-title="{{ $day.title }}">
<p class="{{ $day_date_class }} {{ $day.date_class }}">{{ $day.date }}</p>
{{ range $event := $day.events }}
<div class=" {{ $event_class }} {{ $event.class }} p-2 row col-12">
<div class="col-5">
<p class="{{ $event_time_class }} {{ $event.time_class}} text-right">{{ $event.time }}</p>
</div>
<div class="col-7" {{ if $event.modal_target }} data-modal-show="{{ $event.modal_target }}" {{ end }}>
{{ if $event.link }}
<a href="{{ $event.link }}">
{{ end }}
<p class="{{ $event_title_class}} {{ $event.title_class }}">
{{ $event.title | markdownify }}
</p>
<p class="{{ $event_subtitle_class}} {{ $event.subtitle_class}}">
{{ $event.subtitle | markdownify }}
</p>
{{ if $event.link }}
</a>
{{ end }}
</div>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
<p class="{{ .timeline.bottom_text_class}}">{{ .timeline.bottom_text | markdownify }}</p>
</div>
{{ end }}
{{ end }}