From 5119018feeaa22c47c0e91e15d3b9414dd6e0772 Mon Sep 17 00:00:00 2001 From: grm Date: Wed, 16 Sep 2026 00:20:06 +0300 Subject: Put the header search box in the menu row, and stop saying "Search" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The header search was a band of its own under the menu; now it floats at the right end of the menu row and only gets a thin bar when the header has no menu. The forms are a single input — Enter and the phone keyboard's search key submit a one-field form everywhere — with the placeholder as the label, side boxes start without a heading, and the results page shows a box only when no module does, so a page no longer reads "Search" a dozen times. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A --- internal/web/handlers_layout.go | 4 ---- internal/web/layout.go | 16 ++++++++++++++++ internal/web/static/blog.css | 15 ++++++++++----- internal/web/templates/blog/search.html | 2 +- internal/web/templates/layouts/blog.html | 12 +++++++----- 5 files changed, 34 insertions(+), 15 deletions(-) (limited to 'internal/web') diff --git a/internal/web/handlers_layout.go b/internal/web/handlers_layout.go index d89cd18..db4f47c 100644 --- a/internal/web/handlers_layout.go +++ b/internal/web/handlers_layout.go @@ -126,10 +126,6 @@ func (s *Server) handleModuleAdd(w http.ResponseWriter, r *http.Request) { m.Count = 10 case "tagcloud": m.Title = i18n.T(blogLang, "Tag cloud") - case "search": - if area != "header" { - m.Title = i18n.T(blogLang, "Search") - } } m, err := blogStore(r).CreateModule(r.Context(), m) if err != nil { diff --git a/internal/web/layout.go b/internal/web/layout.go index 0d51068..6f5c84f 100644 --- a/internal/web/layout.go +++ b/internal/web/layout.go @@ -124,6 +124,9 @@ type Layout struct { // A column is laid out when it has something to show — or always, when // the theme keeps the columns' space. HasLeft, HasRight bool + // A header search box sits in the menu row when there is one, so the two + // header modules need to know about each other. + HeaderMenu, HeaderSearch bool } // buildLayout groups modules by area, dropping areas the theme has switched off. @@ -136,6 +139,8 @@ func buildLayout(t Theme, mods []store.Module) Layout { switch m.Area { case "header": l.Header = append(l.Header, m) + l.HeaderMenu = l.HeaderMenu || m.Kind == "menu" + l.HeaderSearch = l.HeaderSearch || m.Kind == "search" case "left": l.Left = append(l.Left, m) case "right": @@ -181,6 +186,17 @@ func (l Layout) NeedsTags() bool { return false } +// HasSearch says whether a visible module offers a search box (the search +// page shows its own only when none does). +func (l Layout) HasSearch() bool { + for _, m := range l.all() { + if m.Kind == "search" { + return true + } + } + return false +} + // MaxRecent is the longest "recent posts" list any visible module wants (0 = none). func (l Layout) MaxRecent() int { n := 0 diff --git a/internal/web/static/blog.css b/internal/web/static/blog.css index e2bf588..4fd7b76 100644 --- a/internal/web/static/blog.css +++ b/internal/web/static/blog.css @@ -80,12 +80,15 @@ img { max-width: 100%; height: auto; } .tc-3 { font-size: 1.2em; } .tc-4 { font-size: 1.45em; } .tc-5 { font-size: 1.75em; } -.site-search { border-bottom: 1px solid rgba(0,0,0,0.1); } -.search-inner { padding: 0.5em 1em; } +/* search box: in the header it floats at the right end of the menu row (its + own thin bar only when there is no menu); in a column it fills the box */ .search-form { margin: 0; } -.search-form input { padding: 0.35em 0.5em; font: inherit; max-width: 100%; } -.search-form button { padding: 0.35em 0.8em; font: inherit; } -.mod-search input { width: 100%; margin-bottom: 0.4em; } +.search-form input { padding: 0.3em 0.5em; font: inherit; font-size: 0.9em; max-width: 100%; border: 1px solid rgba(0,0,0,0.25); border-radius: 3px; background: rgba(255,255,255,0.85); color: #222; } +.site-nav .search-form { float: right; margin: 0.35em 0 0.35em 1em; } +.site-nav .nav-inner { overflow: hidden; } +.site-search { border-bottom: 1px solid rgba(0,0,0,0.1); } +.search-inner { padding: 0.4em 1em; } +.mod-search input { width: 100%; } .search-page { margin-bottom: 1.5em; } .search-results { list-style: none; margin: 0; padding: 0; } .search-results li { margin: 0 0 1.2em; } @@ -104,4 +107,6 @@ img { max-width: 100%; height: auto; } .col-left, .col-right { padding: 0; margin-top: 1.5em; } .col-left { order: 0; } .col-empty { display: none; } /* a reserved-but-empty column has nothing to stack */ + .site-nav .search-form { float: none; margin: 0.35em 0.8em; } + .site-nav .search-form input { width: 100%; } } diff --git a/internal/web/templates/blog/search.html b/internal/web/templates/blog/search.html index b146f5e..7ee05fc 100644 --- a/internal/web/templates/blog/search.html +++ b/internal/web/templates/blog/search.html @@ -1,7 +1,7 @@ {{define "title"}}{{if .Data.q}}{{tf "Results for “%s”" .Data.q}}{{else}}{{t "Search"}}{{end}} · {{.Blog.Title}}{{end}} {{define "content"}}

{{if .Data.q}}{{tf "Results for “%s”" .Data.q}}{{else}}{{t "Search"}}{{end}}

-
{{template "searchform" .}}
+{{if not .Data.layout.HasSearch}}
{{template "searchform" .}}
{{end}} {{if not .Data.q}}

{{t "Type a word or two to find posts."}}

{{else if not .Data.hits}}

{{tf "Nothing matched “%s”." .Data.q}}

{{else}} diff --git a/internal/web/templates/layouts/blog.html b/internal/web/templates/layouts/blog.html index 3e854f6..6e8b819 100644 --- a/internal/web/templates/layouts/blog.html +++ b/internal/web/templates/layouts/blog.html @@ -58,7 +58,7 @@ {{- 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"}}
{{template "menulinks" $r}}
+{{- else if eq $m.Kind "menu"}}{{if eq $m.Area "header"}}
{{if $r.Data.layout.HeaderSearch}}{{template "searchform" $r}}{{end}}{{template "menulinks" $r}}
{{else}}
{{template "modtitle" $m}}
{{template "menulinks" $r}}
{{end}} {{- else if eq $m.Kind "recent"}}
{{template "modtitle" $m}}
    {{range $i, $p := $r.Data.recent}}{{if lt $i $m.Count}}
  • {{$p.Title}}
    • {{end}}{{end}}
@@ -76,7 +76,7 @@ {{- else if eq $m.Kind "tagcloud"}}
{{template "modtitle" $m}}

{{range $r.Data.tagcloud}}{{.Name}} {{else}}{{t "No tags yet."}}{{end}}

-{{- else if eq $m.Kind "search"}}{{if eq $m.Area "header"}}
{{template "searchform" $r}}
+{{- else if eq $m.Kind "search"}}{{if eq $m.Area "header"}}{{if not $r.Data.layout.HeaderMenu}}
{{template "searchform" $r}}
{{end}} {{else}}
{{template "modtitle" $m}}{{template "searchform" $r}}
{{end}} {{- else if eq $m.Kind "html"}}{{if not $m.Body}}{{else if or (eq $m.Area "above") (eq $m.Area "below")}}
{{html $m.Body}}
{{else}}
{{template "modtitle" $m}}{{html $m.Body}}
{{end}} @@ -87,9 +87,11 @@
{{- end}}{{end}} -{{/* The search box: a plain GET form, so it works without JavaScript. .Data.q - only exists on the search page, hence the with. */}} -{{define "searchform"}}
{{end}} +{{/* The search box: a plain GET form, so it works without JavaScript. Just the + input — Enter (or the phone keyboard's search key) submits a one-field + form everywhere, and the placeholder is the label, so the page does not + say "Search" over and over. .Data.q only exists on the search page. */}} +{{define "searchform"}}
{{end}} {{define "modtitle"}}{{if .Title}}

{{.Title}}

{{end}}{{end}} -- cgit v1.2.3