{{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."}}

diff --git a/internal/web/templates/layouts/blog.html b/internal/web/templates/layouts/blog.html index 7ee0b54..d55512a 100644 --- a/internal/web/templates/layouts/blog.html +++ b/internal/web/templates/layouts/blog.html @@ -13,10 +13,7 @@ {{$l := .Data.layout}} -{{if or $l.Header .Data.theme.HeaderImage}}{{if .Data.theme.HeaderOn}}{{end}}{{end}} +{{if or $l.Header .Data.theme.HeaderImage}}{{if .Data.theme.HeaderOn}}{{template "siteheader" .}}{{end}}{{end}}

@@ -43,6 +40,37 @@ {{end}} +{{/* The header: the banner, then its modules in order. With the menu folding + (Layout.Fold) a hidden checkbox comes first: it is the open/closed state, + so the burger label toggles the menu with no script and in old browsers + (`:checked ~` reaches every block after it). Folding itself is decided by + the script below — any link on a second line means the menu does not fit — + which drops nav-auto, the no-script fallback blog.css folds on phones. */}} +{{define "siteheader"}}{{$l := .Data.layout}}{{$t := .Data.theme}}{{if $l.Fold}}{{end}}{{end}} + +{{/* The fold button, a label for the checkbox above. */}} +{{define "burger"}}{{t "Menu"}}{{end}} + {{define "notices"}}{{if .}}

{{end}} @@ -53,14 +81,14 @@ {{/* One layout module. .m is the store.Module, .root the page data; the same kind renders differently in the header (big blocks) and elsewhere (boxes). */}} -{{define "module"}}{{$m := .m}}{{$r := .root}}{{$t := $r.Data.theme}}{{$rc := $t.RuleClass}} -{{- if eq $m.Kind "title"}}

+{{define "module"}}{{$m := .m}}{{$r := .root}}{{$t := $r.Data.theme}}{{$rc := $t.RuleClass}}{{$b := .burger}} +{{- if eq $m.Kind "title"}}

{{end}} -

-{{- else if eq $m.Kind "logo"}}{{if $t.Logo}}{{if eq $m.Area "header"}} +

+{{- else if eq $m.Kind "logo"}}{{if $t.Logo}}{{if eq $m.Area "header"}} {{else}}

{{end}}{{end}} -{{- else if eq $m.Kind "menu"}}{{if eq $m.Area "header"}}

+{{- else if eq $m.Kind "menu"}}{{if eq $m.Area "header"}}

{{if $b}}{{template "burger" $t}}{{end}}{{if $r.Data.layout.HeaderSearch}}{{template "searchform" $r}}{{end}}{{template "menulinks" $r}}

{{$p.Title}}

diff --git a/internal/web/theme.go b/internal/web/theme.go index 031f8fd..a43603b 100644 --- a/internal/web/theme.go +++ b/internal/web/theme.go @@ -54,6 +54,10 @@ type Theme struct { NavSize string `json:"nav_size"` // normal | small | large NavGap string `json:"nav_gap"` // normal | tight | wide (space around each link) NavActive string `json:"nav_active"` // underline | bold | box | none: how the current page's link is marked + // NavFold folds the header menu into a button when its links do not fit + // the bar (see Layout.BurgerAt); NavFoldLabel is what the button shows. + NavFold bool `json:"nav_fold"` + NavFoldLabel string `json:"nav_fold_label"` // icon | text | both NavBg string `json:"nav_bg"` NavText string `json:"nav_text"` NavHover string `json:"nav_hover"` // "" = same as NavText @@ -118,7 +122,7 @@ func DefaultTheme() Theme { ContentStyle: "card", ContentPadding: "normal", Font: "sans", HeadingFont: "same", FontSize: "normal", HeaderImageHeight: "medium", HeaderAlign: "left", HeaderBg: "#2f3a4a", HeaderText: "#ffffff", TitleSize: "normal", HeaderRule: "none", - NavAlign: "left", NavBold: true, NavUnderline: "hover", NavSize: "normal", NavGap: "normal", NavActive: "underline", NavBg: "#ffffff", NavText: "#222222", + NavAlign: "left", NavBold: true, NavUnderline: "hover", NavSize: "normal", NavGap: "normal", NavActive: "underline", NavFoldLabel: "icon", NavBg: "#ffffff", NavText: "#222222", ShowDates: true, DateFormat: "long", PostsPerPage: postsPerPageChoices[0], ListStyle: "full", PostImage: "top", TitleRule: "none", PostNotices: true, FooterBg: "#2f3a4a", FooterColor: "#d0d5dc", FooterAlign: "center", LogoSize: "medium", @@ -213,6 +217,7 @@ func (t *Theme) normalize() { t.NavSize = pick(t.NavSize, "normal", "small", "large") t.NavGap = pick(t.NavGap, "normal", "tight", "wide") t.NavActive = pick(t.NavActive, "underline", "bold", "box", "none") + t.NavFoldLabel = pick(t.NavFoldLabel, "icon", "text", "both") t.NavBg = color(t.NavBg, d.NavBg) t.NavText = color(t.NavText, d.NavText) t.NavHover = optColor(t.NavHover) @@ -287,6 +292,8 @@ func ThemeFromForm(cur Theme, f url.Values) Theme { t.NavSize = get("nav_size") t.NavGap = get("nav_gap") t.NavActive = get("nav_active") + t.NavFold = on("nav_fold") + t.NavFoldLabel = get("nav_fold_label") t.NavBg = get("nav_bg") t.NavText = get("nav_text") t.NavHover = hover("nav_hover") @@ -591,7 +598,7 @@ a:hover {{"{"}}{{if .LinkHover}} color:{{.LinkHover}};{{end}}{{if eq .LinkUnderl .site-header a { color:{{.HeaderText}}; } .header-image img { max-height:{{.HeaderImageMaxHeight}}; } .site-nav { background:{{.NavBg}}; } -.site-nav a { color:{{.NavText}}; } +.site-nav a, .site-nav .nav-burger { color:{{.NavText}}; } {{- if .NavHover}} .site-nav a:hover { color:{{.NavHover}}; } {{- end}} diff --git a/internal/web/web_test.go b/internal/web/web_test.go index 45bdf22..12e30f2 100644 --- a/internal/web/web_test.go +++ b/internal/web/web_test.go @@ -126,7 +126,7 @@ func TestThemeNormalizeAndCSS(t *testing.T) { } // The menu links' weight, case and underline are body classes blog.css draws; the theme CSS only colours them. css = DefaultTheme().CSS() - if !strings.Contains(css, ".site-nav a { color:#222222; }") || strings.Contains(css, "font-weight") || strings.Contains(css, "text-transform") { + if !strings.Contains(css, ".site-nav a, .site-nav .nav-burger { color:#222222; }") || strings.Contains(css, "font-weight") || strings.Contains(css, "text-transform") { t.Errorf("nav css: %s", css) } if css := DefaultTheme().CSS(); strings.Contains(css, "@font-face") || strings.Contains(css, "h1, h2") { @@ -170,6 +170,80 @@ func TestNavStyles(t *testing.T) { } } +// The header menu folds into a button (theme nav_fold) carried by the title +// or logo block just above it, else by the menu bar; the checkbox that is the +// open/closed state comes first in the header so the CSS can reach both. +func TestHeaderFold(t *testing.T) { + hdr := func(kinds ...string) []store.Module { + var mods []store.Module + for _, k := range kinds { + mods = append(mods, store.Module{Area: "header", Kind: k}) + } + return mods + } + th := DefaultTheme() + if l := buildLayout(th, hdr("title", "menu")); l.Fold { + t.Errorf("fold is off by default: %+v", l) + } + th.NavFold = true + for _, c := range []struct { + kinds []string + logo bool + at int // -1: no fold + }{ + {[]string{"title", "menu"}, false, 0}, {[]string{"menu", "title"}, false, 0}, {[]string{"logo", "menu"}, false, 1}, {[]string{"logo", "menu"}, true, 0}, + {[]string{"search", "menu"}, false, 1}, {[]string{"title", "search", "menu"}, false, 2}, {[]string{"title"}, false, -1}, {nil, false, -1}, + } { + th.Logo = "" + if c.logo { + th.Logo = uuid.New().String() + } + l := buildLayout(th, hdr(c.kinds...)) + if l.Fold != (c.at >= 0) || (l.Fold && l.BurgerAt != c.at) { + t.Errorf("%v (logo %v): fold %v at %d, want %d", c.kinds, c.logo, l.Fold, l.BurgerAt, c.at) + } + } + th.HeaderOn = false + if l := buildLayout(th, hdr("title", "menu")); l.Fold { + t.Errorf("no header, nothing to fold: %+v", l) + } + th.HeaderOn = true + + tpl, err := newTemplates(false).get("en", "blog/page.html") + if err != nil { + t.Fatal(err) + } + render := func(th Theme, mods []store.Module) string { + var b strings.Builder + l := buildLayout(th, mods) + v := view{Blog: &store.Blog{Title: "Gizmo"}, Data: map[string]any{"theme": th, "layout": l, "menu": []store.MenuItem{{Label: "Home", URL: "/"}, {Label: "About", URL: "/about"}}}} + if err := tpl.ExecuteTemplate(&b, "siteheader", v); err != nil { + t.Fatal(err) + } + return b.String() + } + burger := `Menu` + off := DefaultTheme() + out := render(off, hdr("title", "menu")) + if strings.Contains(out, "nav-toggle") || strings.Contains(out, "nav-burger") || strings.Contains(out, "nav-fold") || strings.Contains(out, "

`) + if !strings.HasPrefix(out, `

{{t "When the menu does not fit"}}