diff options
Diffstat (limited to 'internal/web/templates/dashboard/design.html')
| -rw-r--r-- | internal/web/templates/dashboard/design.html | 26 |
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}}>☰</option> - <option value="text"{{if eq $t.NavFoldLabel "text"}} selected{{end}}>{{t "Menu"}}</option> - <option value="both"{{if eq $t.NavFoldLabel "both"}} selected{{end}}>☰ {{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)); }); |