tandem/camper
tandem
/
camper
2
0
Fork 0
Code Issues 7 Pull Requests Packages Projects Releases Wiki Activity

Integrate lodges’ and languages’ submenus to the main menu 

There is a big difference between the item that has the submenu for
lodges and languages: languages is a link to the “alternate” version of
the page, while the lodges has no page to link to.  Therefore, one is an
anchor while the other is a button, to make a semantic difference, but
both have the exact same appearance here.
This commit is contained in:
jordi fita mas 2023-09-11 05:13:57 +02:00
parent e4053cd844
commit b7e130fed2
2 changed files with 65 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/static/public.css
View File

@ -172,15 +172,18 @@ body > a[href="#content"]:focus {
body > header {
position: sticky;
top: 0;
background-color: rgba(var(--clar-rgb), 0.7);
z-index: 999;
padding: 1rem 2.5rem;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: space-between;
}
body > header, nav .has-submenu ul {
background-color: rgba(var(--clar-rgb), 0.7);
backdrop-filter: blur(10px);
}
h1 a span {
display: inline-block;
}
@ -213,7 +216,7 @@ nav ul {
align-items: center;
}
nav a {
nav a, nav button {
font-size: 1.8rem;
font-weight: 500;
text-transform: uppercase;
@ -221,6 +224,40 @@ nav a {
line-height: 6rem;
}
nav button {
cursor: pointer;
background: none;
border: none;
}
nav .has-submenu {
position: relative;
}
nav .has-submenu > a::after, nav .has-submenu > button::after {
content: " ⌄";
position: absolute;
top: -.5rem;
right: -0.05rem;
}
nav .has-submenu ul {
flex-direction: column;
align-items: start;
display: none;
position: absolute;
top: 5rem;
}
nav .has-submenu ul a {
line-height: 4rem;
white-space: nowrap;
}
nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
display: flex;
}
#content {
padding: 2.5rem;
}

50
web/templates/public/layout.gohtml
View File

@ -21,38 +21,34 @@
<a href="#content">{{( gettext "Skip to main content" )}}</a>
<header>
<h1><a href="/{{ currentLocale }}/"><span class="logo">◭</span><span class="name">{{( gettext "Campsite Montagut" )}}</span></a></h1>
{{/*
{{ if .LocalizedAlternates -}}
<nav>
<ul>
{{ range .LocalizedAlternates -}}
<li><a rel="alternate" href="{{ .HRef }}" hreflang="{{ .Lang }}"
lang="{{ .Lang }}">{{ .Endonym }}</a></li>
{{ end }}
</ul>
</nav>
{{- end }}
*/}}
{{ with .Menu -}}
<nav>
<ul>
<li><a href="/{{ currentLocale }}/">{{( pgettext "Home" "title" )}}</a></li>
{{/*
<nav>
<ul>
<li><a href="/{{ currentLocale }}/">{{( pgettext "Home" "title" )}}</a></li>
{{ with .Menu -}}
{{ if .CampsiteTypes -}}
<li>
<button type="button" aria-expanded="false" aria-controls="campsite-types-menu"
>{{( gettext "Singular Lodges" )}}</button>
<ul id="campsite-types-menu">
<li class="has-submenu">
<button type="button">{{( gettext "Singular Lodges" )}}</button>
<ul>
{{ range .CampsiteTypes -}}
<li><a href="{{ .HRef }}">{{ .Label }}</a></li>
{{ end }}
</ul>
</li>
{{- end }}
*/}}
</ul>
</nav>
{{- end }}
{{- end }}
{{ if .LocalizedAlternates -}}
<li class="has-submenu">{{ range .LocalizedAlternates -}}
{{ if eq .Lang currentLocale }}{{ template "alternateAnchor" . }}{{ end }}
{{- end }}
<ul>
{{ range .LocalizedAlternates }}{{ if ne .Lang currentLocale -}}
<li>{{ template "alternateAnchor" . }}</li>
{{ end }}{{ end }}
</ul>
</li>
{{- end }}
</ul>
</nav>
</header>
<main id="content">
{{- template "content" . }}
@ -60,3 +56,7 @@
<footer>© {{( gettext "Campsite Montagut" )}} | 1984–2023</footer>
</body>
</html>
{{ define "alternateAnchor" -}}
<a rel="alternate" href="{{ .HRef }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .Endonym }}</a>
{{- end }}