mirror of
https://github.com/docker/docs.git
synced 2026-04-12 06:19:22 +07:00
038e6dc682
- Extract classes to utilities and components. - Reduce number of colors used. - Harmonize button colors. - Restyle admonitions. - Move **Page options** button to main article. - Various color tweaks.
59 lines
1.9 KiB
HTML
59 lines
1.9 KiB
HTML
{{/* - Multi-page guide: render a progress bar - */}}
|
|
<div class="my-4 flex flex-col items-start text-sm">
|
|
{{ $totalPages := len .CurrentSection.Pages }}
|
|
{{/* - initialize the page store
|
|
|
|
$stepper_seen controls the color of the item in the stepper
|
|
|
|
green: "completed" - index is lower than current page
|
|
blue: current page
|
|
gray: next in section
|
|
for the section page, they're all gray
|
|
|
|
default to true if kind = section
|
|
(make all entries gray)
|
|
|
|
-
|
|
*/}}
|
|
{{ page.Store.Set "stepper_seen" .IsSection }}
|
|
{{/* - Loop over the pages in this guide - */}}
|
|
{{ range $i, $e := .CurrentSection.Pages }}
|
|
{{ $isLast := eq (add $i 1) $totalPages }}
|
|
<div class="flex">
|
|
<div class="flex flex-col items-center">
|
|
{{/* - Render the page's index digit (1,2,3,4 etc) - */}}
|
|
<a
|
|
href="{{ .Permalink }}"
|
|
class="{{ if (page.Store.Get "stepper_seen") }}
|
|
bg-gray-400 dark:bg-gray-500
|
|
{{ else if (eq . page) }}
|
|
{{ .Store.Set "stepper_seen" true }} bg-blue-400 dark:bg-blue-800
|
|
{{ else }}
|
|
bg-green-400 dark:bg-green-dark-400
|
|
{{ end }} flex h-8 w-8 items-center justify-center rounded-full text-white no-underline"
|
|
>
|
|
{{ add $i 1 }}
|
|
</a>
|
|
{{/* - Render the vertical border - */}}
|
|
{{ if not $isLast }}
|
|
<div
|
|
class="{{ if (page.Store.Get "stepper_seen") }}
|
|
border-gray-400 dark:border-gray-400
|
|
{{ else if (eq . page) }}
|
|
border-blue-400 dark:border-blue-400
|
|
{{ else }}
|
|
border-green-400 dark:border-green-400
|
|
{{ end }} h-6 border-l-2"
|
|
></div>
|
|
{{ end }}
|
|
</div>
|
|
{{/* - Render the page's title - */}}
|
|
<div class="ml-2 flex h-8 items-center self-start">
|
|
<a href="{{ .Permalink }}">
|
|
{{ .LinkTitle }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|