diff options
Diffstat (limited to 'internal/web/templates')
| -rw-r--r-- | internal/web/templates/index.html | 76 | ||||
| -rw-r--r-- | internal/web/templates/reader.html | 9 | ||||
| -rw-r--r-- | internal/web/templates/readings-interlinear.html | 2 | ||||
| -rw-r--r-- | internal/web/templates/readings-vertical.html | 2 | ||||
| -rw-r--r-- | internal/web/templates/readings.html | 2 | ||||
| -rw-r--r-- | internal/web/templates/settings.html | 15 |
6 files changed, 42 insertions, 64 deletions
diff --git a/internal/web/templates/index.html b/internal/web/templates/index.html index b99725d..c706323 100644 --- a/internal/web/templates/index.html +++ b/internal/web/templates/index.html @@ -1,15 +1,12 @@ -{{/* index.html renders the full lectio-web page: top-bar controls (date, - lectionary, version checkboxes, all/gospel toggle, display select, - theme select) and the pre-rendered reading pane (#pane). +{{/* index.html renders the full lectio-web page: essential controls on the left + (date, lectionary, version checkboxes, all/gospel, layout, mono) and, pushed + to the right, the nav + download links. Theme lives only in /settings now. - The controls form (#controls) carries hx-get="/readings" and fires on - any "change" bubbling up from its fields (htmx auto-includes an - hx-get element's enclosing form fields as the request's query - params -- no hx-include needed), so "display" needs no extra wiring - beyond living inside #controls. The date +/- buttons are separate - hx-get elements nested in the same form so their own field values are - included too; they override "date" via hx-vals. The theme <select> - has no server round trip: it swaps the #theme <link>'s href directly. */}} + The controls form (#controls) carries hx-get="/readings" and fires on any + bubbling "change", so the readings pane re-fetches when a field changes. + The date arrows step the date input by a day client-side and dispatch its + change (so navigation is relative to the CURRENT date and updates the shown + day). mono lives OUTSIDE the form so toggling it doesn't refetch readings. */}} <!doctype html> <html lang="{{.Lang}}"> <head> @@ -19,6 +16,16 @@ <link rel="stylesheet" href="/static/base.css"> <link id="theme" rel="stylesheet" href="/theme.css?name={{.Theme}}"> <script src="/static/htmx.min.js"></script> +<script> +function stepDate(n){ + var el=document.querySelector('#controls input[name=date]'); + if(!el||!el.value)return; + var d=new Date(el.value+'T00:00:00'); + d.setDate(d.getDate()+n); + el.value=d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0'); + el.dispatchEvent(new Event('change',{bubbles:true})); +} +</script> </head> <body{{if .Mono}} class="mono"{{end}}> <div class="page"> @@ -28,11 +35,9 @@ version unchecked (show nothing) from a fresh visit (config default). */}} <input type="hidden" name="vset" value="1"> <span class="date-nav"> - <button type="button" hx-get="/readings" hx-target="#pane" - hx-vals='{"date":"{{.PrevDate}}"}'>←</button> + <button type="button" onclick="stepDate(-1)">←</button> <input type="date" name="date" value="{{.Date}}"> - <button type="button" hx-get="/readings" hx-target="#pane" - hx-vals='{"date":"{{.NextDate}}"}'>→</button> + <button type="button" onclick="stepDate(1)">→</button> </span> <label>{{.L.Lectionary}} @@ -61,31 +66,24 @@ </select> </label> - <a class="nav-link" href="/reader">{{.L.NavReader}} →</a> - <a class="nav-link" href="/settings">{{.L.NavSettings}}</a> - <a class="nav-link" href="/bookmarks">{{.L.NavBookmarks}}</a> - </form> - - <label class="theme-picker">{{.L.Theme}} - <select id="theme-select" - onchange="var o=document.getElementById('theme'),n=o.cloneNode(false);n.setAttribute('href','/theme.css?name='+encodeURIComponent(this.value));o.replaceWith(n);"> - {{range .ThemeOpts}} - <option value="{{.Name}}" {{if .Selected}}selected{{end}}>{{.Name}}</option> - {{end}} - </select> - </label> - - <label class="mono-toggle"><input type="checkbox" {{if .Mono}}checked{{end}} - onchange="document.body.classList.toggle('mono', this.checked)"> {{.L.Mono}}</label> + {{/* mono lives in the form but stops its change from bubbling, so toggling + it flips the body class without refetching the readings. */}} + <label class="mono-toggle"><input type="checkbox" {{if .Mono}}checked{{end}} + onchange="event.stopPropagation();document.body.classList.toggle('mono', this.checked)"> {{.L.Mono}}</label> - {{/* Download the current readings; the URL is built from the live control - values at click time so it always matches what's on screen. */}} - <span class="export">{{.L.Export}}: - <a href="#" onclick="location='/export?fmt=txt&'+new URLSearchParams(new FormData(document.getElementById('controls'))).toString();return false;">txt</a> - <a href="#" onclick="location='/export?fmt=md&'+new URLSearchParams(new FormData(document.getElementById('controls'))).toString();return false;">md</a> - <a href="#" onclick="location='/export?fmt=pdf&'+new URLSearchParams(new FormData(document.getElementById('controls'))).toString();return false;">pdf</a> - · <a href="#" onclick="var d=(document.querySelector('#controls [name=date]').value||'').slice(0,7);location='/calendar?month='+d+'&lectionary='+document.querySelector('#controls [name=lectionary]').value;return false;">{{.L.Calendar}}</a> - </span> + {{/* Utility links, pushed to the right (see .controls-side). The export URLs + are built from the live control values at click time. */}} + <span class="controls-side"> + <a class="nav-link" href="/reader">{{.L.NavReader}} →</a> + <a class="nav-link" href="/settings">{{.L.NavSettings}}</a> + <span class="export">{{.L.Export}}: + <a href="#" onclick="location='/export?fmt=txt&'+new URLSearchParams(new FormData(document.getElementById('controls'))).toString();return false;">txt</a> + <a href="#" onclick="location='/export?fmt=md&'+new URLSearchParams(new FormData(document.getElementById('controls'))).toString();return false;">md</a> + <a href="#" onclick="location='/export?fmt=pdf&'+new URLSearchParams(new FormData(document.getElementById('controls'))).toString();return false;">pdf</a> + · <a href="#" onclick="var d=(document.querySelector('#controls [name=date]').value||'').slice(0,7);location='/calendar?month='+d+'&lectionary='+document.querySelector('#controls [name=lectionary]').value;return false;">{{.L.Calendar}}</a> + </span> + </span> + </form> <div id="pane">{{.Reading}}</div> diff --git a/internal/web/templates/reader.html b/internal/web/templates/reader.html index 36cc8a1..9fa857d 100644 --- a/internal/web/templates/reader.html +++ b/internal/web/templates/reader.html @@ -70,15 +70,6 @@ <div id="pane">{{.Reading}}</div> </div> - <label class="theme-picker">{{.L.Theme}} - <select id="theme-select" - onchange="var o=document.getElementById('theme'),n=o.cloneNode(false);n.setAttribute('href','/theme.css?name='+encodeURIComponent(this.value));o.replaceWith(n);"> - {{range .ThemeOpts}} - <option value="{{.Name}}" {{if .Selected}}selected{{end}}>{{.Name}}</option> - {{end}} - </select> - </label> - <label class="mono-toggle"><input type="checkbox" {{if .Mono}}checked{{end}} onchange="document.body.classList.toggle('mono', this.checked)"> {{.L.Mono}}</label> diff --git a/internal/web/templates/readings-interlinear.html b/internal/web/templates/readings-interlinear.html index 5b71318..89ad656 100644 --- a/internal/web/templates/readings-interlinear.html +++ b/internal/web/templates/readings-interlinear.html @@ -16,7 +16,7 @@ <div class="display-interlinear"> {{range .Verses}} <div class="ilverse"> - <span class="vnum">{{.VNum}}</span> + <span class="vnum">{{.VNum}}</span>{{if .Marked}}<span class="vmark">*</span>{{end}} {{range .Lines}} <div class="illine"><span class="version-label">{{.Label}}</span> <span>{{.Text}}</span></div> {{end}} diff --git a/internal/web/templates/readings-vertical.html b/internal/web/templates/readings-vertical.html index d9896c1..72327d7 100644 --- a/internal/web/templates/readings-vertical.html +++ b/internal/web/templates/readings-vertical.html @@ -16,7 +16,7 @@ {{if .Refrain}} <p class="block refrain">{{.Text}}</p> {{else if .VNum}} - <p class="block verse"><span class="vnum">{{.VNum}}</span><span class="vtext">{{.Text}}</span></p> + <p class="block verse"><span class="vnum">{{.VNum}}</span><span class="vtext">{{.Text}}</span>{{if .Marked}}<span class="vmark">*</span>{{end}}</p> {{else}} <p class="block">{{.Text}}</p> {{end}} diff --git a/internal/web/templates/readings.html b/internal/web/templates/readings.html index a1cbcdb..b760892 100644 --- a/internal/web/templates/readings.html +++ b/internal/web/templates/readings.html @@ -13,7 +13,7 @@ {{if .Refrain}} <p class="block refrain">{{.Text}}</p> {{else if .VNum}} - <p class="block verse"><span class="vnum">{{.VNum}}</span><span class="vtext">{{.Text}}</span></p> + <p class="block verse"><span class="vnum">{{.VNum}}</span><span class="vtext">{{.Text}}</span>{{if .Marked}}<span class="vmark">*</span>{{end}}</p> {{else}} <p class="block">{{.Text}}</p> {{end}} diff --git a/internal/web/templates/settings.html b/internal/web/templates/settings.html index 3ae2f41..8e18278 100644 --- a/internal/web/templates/settings.html +++ b/internal/web/templates/settings.html @@ -23,6 +23,8 @@ <form class="settings" method="post" action="/settings"> + <div class="row"><button type="submit">{{.L.WebSave}}</button></div> + <label>{{.L.Lectionary}} <select name="lectionary"> <option value="new" {{if eq .Cfg.Lectionary "new"}}selected{{end}}>{{.L.OptModern}}</option> @@ -77,30 +79,17 @@ <div class="row"> <label><input type="checkbox" name="all" {{if .Cfg.All}}checked{{end}}> {{.L.OptAll}}</label> - <label><input type="checkbox" name="offline" {{if .Cfg.Offline}}checked{{end}}> {{.L.WebOffline}}</label> <label><input type="checkbox" name="web_mono" {{if .Cfg.WebMono}}checked{{end}}> {{.L.Mono}}</label> </div> - <label>{{.L.WebWidth}} - <input type="number" name="width" value="{{.Cfg.Width}}"> - </label> - <label>{{.L.WebPort}} <input type="number" name="web_port" value="{{.Cfg.WebPort}}"> </label> - <label>{{.L.WebPager}} - <input type="text" name="pager" value="{{.Cfg.Pager}}"> - </label> - <label>books.ini <textarea name="books" rows="20">{{.Books}}</textarea> </label> - <div class="row"> - <button type="submit">{{.L.WebSave}}</button> - </div> - </form> </div> |