mirror of
https://github.com/gethinode/hinode.git
synced 2025-10-12 04:23:14 +00:00
108 lines
5.3 KiB
HTML
108 lines
5.3 KiB
HTML
<!--
|
|
Copyright © 2024 The Hinode Team / Mark Dumay. All rights reserved.
|
|
Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
|
|
Visit gethinode.com/license for more details.
|
|
|
|
Inspired by the timeline snippet from Siddharth Panchal at https://bootsnipp.com/snippets/Q0ppE
|
|
-->
|
|
|
|
{{ $error := false }}
|
|
|
|
<!-- Validate arguments -->
|
|
{{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "timeline" "args" .Params) }}
|
|
{{ errorf "Invalid arguments: %s" .Position -}}
|
|
{{ $error = true }}
|
|
{{ end }}
|
|
|
|
<!-- Initialize arguments -->
|
|
{{- $page := .Page -}}
|
|
{{- $data := partial "utilities/GetI18nData.html" (dict "page" $page "data" (.Get "data"))}}
|
|
{{ if not $data -}}
|
|
{{ errorf "Invalid timeline data '%s': %s" .Get "data" .Position -}}
|
|
{{ $error = true }}
|
|
{{ end -}}
|
|
|
|
{{ $background := .Get "background" | default "" -}}
|
|
{{- $class := .Get "class" | default "" -}}
|
|
|
|
<!-- Inline partial to render icon -->
|
|
{{- define "partials/timeline-icon.html" -}}
|
|
{{- $col := default 6 .col -}}
|
|
{{- $icon := .icon -}}
|
|
{{- $direction := .direction -}}
|
|
<div class="col-{{ $col }} d-flex justify-content-{{ $direction }} align-items-center">
|
|
<div class="d-flex">
|
|
<div class="d-flex timeline-semi-circle-{{ $direction }} fa-wrapper align-items-center justify-content-center">
|
|
{{ partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid" $icon) "spacing" false) }}
|
|
</div>
|
|
<div class="timeline-connector-{{ $direction }} {{ if eq $direction "start" }} order-first{{ end }}"></div>
|
|
</div>
|
|
</div>
|
|
{{- end -}}
|
|
|
|
<!-- Inline partial to render icon -->
|
|
{{- define "partials/timeline-panel.html" -}}
|
|
{{- $col := default 6 .col -}}
|
|
{{- $page := .page -}}
|
|
{{- $content := .content -}}
|
|
{{- $color := .color -}}
|
|
{{- $title := .title -}}
|
|
{{- $badge := .badge -}}
|
|
{{- $url := .url -}}
|
|
{{- $date := .date -}}
|
|
{{- if and $url (not (hasPrefix $url "http")) -}}
|
|
{{- $url = partial "partials/utilities/URLJoin.html" (dict "base" site.Params.docs.release "path" $url) }}
|
|
{{- end -}}
|
|
{{- $direction := .direction -}}
|
|
|
|
<div class="col-{{ $col }} d-flex align-items-center">
|
|
<div class="d-flex h-100 w-100">
|
|
<div class="timeline-panel-{{ $direction }}"></div>
|
|
<div class="timeline-description-text-{{ $direction }} p-3 w-100">
|
|
<div>
|
|
{{ with $url }}
|
|
<a class="fs-5 fw-bold text-uppercase link-{{ $color }} text-break align-middle" href="{{ . }}">{{ $title }}</a>
|
|
<span class="badge rounded-pill text-bg-{{ $color }} ms-1">{{ if $badge }}<a class="link-bg-{{ $color }}" href="{{ . }}">{{ $badge }}</a>{{ end }}</span>
|
|
{{ else}}
|
|
<span class="fs-5 fw-bold text-uppercase text-{{ $color }} text-break align-middle">{{ $title }}</span>
|
|
<span class="badge rounded-pill text-bg-{{ $color }} ms-1">{{ if $badge }}{{ $badge }}{{ end }}</span>
|
|
{{ end }}
|
|
</div>
|
|
{{ if $date }}
|
|
{{ $datestr := (partial "utilities/date.html" (dict "date" $date "format" "long")) -}}
|
|
<p class="mb-0"><small class="text-body-secondary text-uppercase">{{ $datestr -}}</small></p>
|
|
{{ end }}
|
|
<p class="mt-3 mb-0">{{ $content | $page.RenderString }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{- end -}}
|
|
|
|
<!-- Main code -->
|
|
<!-- Render default timeline -->
|
|
<div class="container p-0 d-none d-md-block mb-5 {{ with $background }} timeline-bg-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}">
|
|
{{ range $index, $item := $data }}
|
|
<div class="row timeline timeline-{{ $item.color }} timeline-dot g-0 ">
|
|
{{ if eq (mod $index 2) 1 }}
|
|
{{ partial "partials/timeline-panel.html" (dict "page" $page "content" $item.content "color" $item.color "title" $item.title "badge" $item.badge "date" $item.date "url" $item.url "direction" "start") }}
|
|
{{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "start") }}
|
|
{{ else }}
|
|
{{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "end") }}
|
|
{{ partial "partials/timeline-panel.html" (dict "page" $page "content" $item.content "color" $item.color "title" $item.title "badge" $item.badge "date" $item.date "url" $item.url "direction" "end") }}
|
|
{{ end }}
|
|
</div>
|
|
<div class="row timeline g-0 p-3"> </div>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<!-- Render timeline for smaller devices -->
|
|
<div class="container p-0 d-block d-md-none small{{ with $background }} timeline-bg-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}">
|
|
{{ range $index, $item := $data }}
|
|
<div class="row timeline-sm timeline-{{ $item.color }} timeline-dot g-0">
|
|
{{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "end" "col" 3) }}
|
|
{{ partial "partials/timeline-panel.html" (dict "page" $page "content" $item.content "color" $item.color "title" $item.title "badge" $item.badge "date" $item.date "url" $item.url "direction" "end" "col" 9) }}
|
|
</div>
|
|
<div class="row timeline-sm g-0 p-3"> </div>
|
|
{{ end }}
|
|
</div>
|