aboutsummaryrefslogtreecommitdiffstats
path: root/internal/web/templates/dashboard
diff options
context:
space:
mode:
authorgrm <grm@eyesin.space>2026-09-19 00:04:08 +0300
committergrm <grm@eyesin.space>2026-09-19 00:04:08 +0300
commitc42c56108ebac6673ec5c86f9f0d51f31e8eb2bd (patch)
tree61e20aa8973a3ef628f62063da65245c62ac23af /internal/web/templates/dashboard
parent96336d8bacd2bdf81acf9a18e2fe57be9d4e9b4f (diff)
downloadblogspace-c42c56108ebac6673ec5c86f9f0d51f31e8eb2bd.tar.gz
blogspace-c42c56108ebac6673ec5c86f9f0d51f31e8eb2bd.tar.bz2
blogspace-c42c56108ebac6673ec5c86f9f0d51f31e8eb2bd.zip
Remove the menu fold
The header menu no longer folds into a ☰ button: the nav_fold and nav_fold_label options, Layout.Fold/BurgerAt, the burger markup and its checkbox, the fold rules in blog.css and the measuring script on the public page are gone, and the Design tab's preview only sizes its frame again. The public page runs no script of its own once more. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A
Diffstat (limited to 'internal/web/templates/dashboard')
-rw-r--r--internal/web/templates/dashboard/design.html26
1 files changed, 4 insertions, 22 deletions
diff --git a/internal/web/templates/dashboard/design.html b/internal/web/templates/dashboard/design.html
index 039eabe..1af90c4 100644
--- a/internal/web/templates/dashboard/design.html
+++ b/internal/web/templates/dashboard/design.html
@@ -158,7 +158,7 @@
<div class="navpreview jsonly">
<p class="muted small">{{t "Preview"}}: <button type="button" class="mini" data-pv="wide" aria-pressed="true">{{t "Wide screen"}}</button> <button type="button" class="mini" data-pv="phone" aria-pressed="false">{{t "Phone"}}</button> <span class="pvstatus"></span></p>
<iframe class="navpreview-frame" sandbox="allow-same-origin" scrolling="no" title="{{t "Preview"}}"></iframe>
- <p class="muted small">{{t "Your header with the menu as set here; the phone view shows the folded menu. Nothing is saved until you press Save."}}</p>
+ <p class="muted small">{{t "Your header with the menu as set here, on a wide screen or a phone. Nothing is saved until you press Save."}}</p>
</div>
<div class="row">
<label>{{t "Alignment"}} <span class="muted">({{t "menu in the header"}})</span><br><select name="nav_align">
@@ -198,17 +198,6 @@
<label for="nav-hover-custom" class="check">{{t "Change colour when the mouse is over a link"}}</label>
<label class="hover-color">{{t "Hover colour"}}<br><input type="color" name="nav_hover" value="{{if $t.NavHover}}{{$t.NavHover}}{{else}}{{$t.NavText}}{{end}}"></label>
</div>
- <h3>{{t "When the menu does not fit"}}</h3>
- <div class="hoverpick">
- <input type="checkbox" name="nav_fold" id="nav-fold"{{if $t.NavFold}} checked{{end}}>
- <label for="nav-fold" class="check">{{t "Fold the header menu into a button when its links do not fit on one line"}}</label>
- <label class="hover-color">{{t "Button"}}<br><select name="nav_fold_label">
- <option value="icon"{{if eq $t.NavFoldLabel "icon"}} selected{{end}}>&#9776;</option>
- <option value="text"{{if eq $t.NavFoldLabel "text"}} selected{{end}}>{{t "Menu"}}</option>
- <option value="both"{{if eq $t.NavFoldLabel "both"}} selected{{end}}>&#9776; {{t "Menu"}}</option>
- </select></label>
- </div>
- <p class="muted small">{{t "The button sits at the right of the title or logo just above the menu, or in the menu bar itself when nothing is above it, and opens the links as a list. Readers whose browser runs no scripts get it on phones."}}</p>
</div>
<div class="card" id="content">
@@ -380,18 +369,11 @@
.then(function () { pvBusy = false; if (pvAgain) { pvAgain = false; preview(); } });
}
function schedule() { clearTimeout(pvTimer); pvTimer = setTimeout(preview, 300); }
- function fitFrame() { // the frame runs no scripts, so fold the menu the way the blog's own script does, and size the frame to the header
- try {
- var d = frame.contentDocument, h = d.querySelector(".site-header.nav-fold"), links = h ? h.querySelectorAll(".site-nav .nav-inner a") : [];
- if (links.length) {
- h.classList.remove("nav-auto"); h.classList.remove("nav-folded");
- for (var i = 1; i < links.length; i++) if (links[i].offsetTop !== links[0].offsetTop) { h.classList.add("nav-folded"); break; }
- }
- frame.style.height = d.body.scrollHeight + "px";
- } catch (e) {}
+ function fitFrame() { // the frame is as tall as the header
+ try { frame.style.height = frame.contentDocument.body.scrollHeight + "px"; } catch (e) {}
}
if (frame) {
- frame.addEventListener("load", function () { fitFrame(); try { frame.contentDocument.addEventListener("change", fitFrame); } catch (e) {} }); // change: the fold button opened or closed the panel
+ frame.addEventListener("load", fitFrame);
qa("[data-pv]").forEach(function (b) { b.addEventListener("click", function () {
frame.classList.toggle("phone", b.getAttribute("data-pv") === "phone");
qa("[data-pv]").forEach(function (o) { o.setAttribute("aria-pressed", String(o === b)); });