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

Add the language switch on the header’s top most in desktop sizes 

Customer wants the language switch at the same level as the email and
phone links, because that’s what they have on the old website.
This commit is contained in:
jordi fita mas 2023-12-21 22:39:58 +01:00
parent 8b9f3438a0
commit adf87fce94
2 changed files with 70 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/static/public.css
View File

@ -199,13 +199,27 @@ body > header {
} }
body > header > address { body > header > address {
grid-column: 1 / span 2;
margin: 0 0 1em; margin: 0 0 1em;
font-size: 1.3rem;
display: flex; display: flex;
gap: 2em; gap: 2em;
} }
body > header > address, nav:first-of-type a {
font-size: 1.3rem;
}
nav:first-of-type .has-submenu > a {
line-height: 1.2;
}
nav:first-of-type .has-submenu > a::after {
top: .5rem;
}
nav:first-of-type .has-submenu ul {
top: 2rem;
}
body > header > address a { body > header > address a {
display: flex; display: flex;
gap: .5em; gap: .5em;
@ -319,6 +333,10 @@ nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
display: flex; display: flex;
} }
nav:last-of-type > ul > li:last-child {
display: none;
}
.boto-reserva a { .boto-reserva a {
padding-top: 3px; padding-top: 3px;
} }
@ -340,7 +358,7 @@ transition: 0.5s ease;
@media (max-width: 80rem) { @media (max-width: 80rem) {
body > header { body > header {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr auto;
} }
label[for="menuShowHide"] { label[for="menuShowHide"] {
@ -353,7 +371,7 @@ transition: 0.5s ease;
content: "\2630"; content: "\2630";
} }
nav { nav:last-of-type {
display: none; display: none;
grid-column: 1 / span 2; grid-column: 1 / span 2;
} }
@ -366,18 +384,30 @@ transition: 0.5s ease;
content: "✕"; content: "✕";
} }
nav ul { nav:last-of-type ul {
flex-direction: column; flex-direction: column;
align-items: start; align-items: start;
} }
nav .has-submenu ul { nav:last-of-type .has-submenu ul {
display: flex; display: flex;
position: static; position: static;
padding-left: 2rem; padding-left: 2rem;
margin-top: -1rem; margin-top: -1rem;
background: none; background: none;
} }
nav:last-of-type > ul > li:last-child {
display: unset;
}
nav:first-of-type {
display: none;
}
body > header > address {
grid-column: 1 / span 2;
}
} }
#content { #content {
@ -1194,7 +1224,6 @@ body > footer section:nth-child(3) p {
} }
.campsite_type_detail { .campsite_type_detail {
padding-bottom: 2.5rem; padding-bottom: 2.5rem;
} }

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

@ -28,6 +28,21 @@
<a href="mailto:{{ .Email }}">{{ .Email }}</a> <a href="mailto:{{ .Email }}">{{ .Email }}</a>
</address> </address>
{{- end }} {{- end }}
{{ if .LocalizedAlternates -}}
<nav>
<ul>
<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>
</ul>
</nav>
{{- end }}
<h1><a href="/{{ currentLocale }}/"><span class="logo">◭</span><span <h1><a href="/{{ currentLocale }}/"><span class="logo">◭</span><span
class="name">{{( gettext "Campsite Montagut" )}}</span></a></h1> class="name">{{( gettext "Campsite Montagut" )}}</span></a></h1>
<input type="checkbox" id="menuShowHide"> <input type="checkbox" id="menuShowHide">