diff options
Diffstat (limited to 'src/templates/language.html.tmpl')
| -rw-r--r-- | src/templates/language.html.tmpl | 84 |
1 files changed, 48 insertions, 36 deletions
diff --git a/src/templates/language.html.tmpl b/src/templates/language.html.tmpl index 8c86e11..c3bfa94 100644 --- a/src/templates/language.html.tmpl +++ b/src/templates/language.html.tmpl @@ -1,4 +1,6 @@ {{ define "header" }} +{{ template "header-navbar" . }} + <style> .lang-fade-in-out { transition: opacity 1s; @@ -7,11 +9,28 @@ opacity: 0; } } + + .lang-grid { + --button-min-width: 22ch; + + button { + display: flex; + align-items: center; + padding-block: 1ch; + text-align: left; + + > :first-child { + font-size: 2em; + font-weight: 600; /* Between normal and bold */ + min-width: calc(var(--pico-form-element-spacing-horizontal) + 2ch); + } + } + } </style> <script> (() => { - let i = 0; + let i = -1; let nodes; const Δt = 5000; /* Total time a text is shown */ const Δf = 1000; /* Fade duration */ @@ -19,7 +38,7 @@ {{ $save := . }} {{ $ps := .Printers }} {{ range locales }} - {{ if (and .Enabled (ne .Bcp $save.Printer.Bcp)) }} + {{ if (and .Enabledp (ne .Bcp $save.Printer.Bcp)) }} [ "{{ .Bcp }}", {{ $p := (index $ps .Bcp) }} @@ -31,78 +50,71 @@ {{ end }} ]; - const updateTexts = () => { - nodes.forEach((n, j) => { - const [lang, ...strs] = texts[i]; - n.lang = lang; - n.textContent = strs[j]; - n.classList.remove("hide"); - }); - }; - const change = () => { nodes.forEach(n => n.classList.add("hide")); setTimeout(() => { i = (i + 1) % texts.length; - updateTexts(); + nodes.forEach((n, j) => { + const [lang, ...strs] = texts[i]; + n.lang = lang; + n.textContent = strs[j]; + n.classList.remove("hide"); + }); }, Δf); }; document.addEventListener("DOMContentLoaded", _ => { nodes = $$('.lang-fade-in-out'); - updateTexts(); - /* When you first do a page load there is no fade-in for the initial - text, so we want to trigger a fade-out Δf milliseconds earlier */ - setTimeout(() => { - change(); - setInterval(change, Δt); - }, Δt - Δf); + change(); + setInterval(change, Δt); }); })(); </script> {{ end }} {{ define "content" }} -<header> +<header class="container"> {{ template "navbar" . }} <h1> {{ .Get "Select Your Language" }} - <br><span class="lang-fade-in-out translation"></span> + <br><span class="lang-fade-in-out translation"> </span> </h1> </header> -<main> +<main class="container"> <h2> {{ .Get "Eurozone Languages" }} - <br><span class="lang-fade-in-out translation"></span> + <br><span class="lang-fade-in-out translation"> </span> </h2> - {{ template "langgrid" true }} + {{ template "langgrid" (tuple .Printer true) }} <h2> {{ .Get "Other Languages" }} - <br><span class="lang-fade-in-out translation"></span> + <br><span class="lang-fade-in-out translation"> </span> </h2> - {{ template "langgrid" false }} + {{ template "langgrid" (tuple .Printer false) }} </main> {{ end }} {{ define "langgrid" }} -{{ $ez := . }} +{{ $p := index . 0 }} +{{ $ez := index . 1 }} <form action="/language" method="POST"> - <div class="lang-grid"> + <div class="button-grid lang-grid"> {{ range locales }} - {{ if eq $ez .Eurozone }} + {{ if eq $ez .Eurozonep }} <button type="submit" name="locale" - value={{ .Bcp }} - {{ if not .Enabled }} + value="{{ .Bcp }}" + {{ if not .Enabledp }} disabled {{ end }} > - <span - lang={{ .Bcp }} - data-code={{ .Language | toUpper }} - > - {{ .Name }} + <span>{{ .Language | toUpper }}</span> + <span lang="{{ .Bcp }}"> + {{ .Name }}<br> + <span lang="{{ $p.Bcp }}" class="translation"> + {{ $p.GetC .Name "Language Name" }} + </span> </span> </button> {{ end }} |