tandem
/
numerus
2
0
Fork 0
Code Issues 39 Pull Requests Packages Projects 1 Releases 1 Wiki Activity

Move top-level navigation bar inside body’s header 

This is mostly to save on vertical space, since the header was almost
useless but took a lot of screen real estate.
This commit is contained in:
jordi fita mas 2024-09-04 12:38:37 +02:00
parent 292720de28
commit 6ef551a846
2 changed files with 24 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/static/numerus.css
View File

@ -284,32 +284,31 @@ header {
background-color: var(--numerus--header--background-color); background-color: var(--numerus--header--background-color);
} }
header, body > nav a { header, header nav a {
padding: 0 3rem; padding: 0 3rem;
} }
body > nav { header nav ul {
border-bottom: 1px solid var(--numerus--color--light-gray);
}
body > nav ul {
display: flex; display: flex;
list-style: none; list-style: none;
padding: 0; padding: 0;
} }
body > nav li { header nav li {
flex: 1; flex: 1;
} }
body > nav a { header nav a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
min-height: 8rem;
display: flex; display: flex;
align-items: center; align-items: center;
} }
header nav a[aria-current] {
text-decoration: underline;
}
main { main {
padding: 2rem 3rem; padding: 2rem 3rem;
} }
@ -551,31 +550,27 @@ ul[role="menu"].action-menu li i[class^='ri-'] {
/* menu tauler */ /* menu tauler */
#profile-menu summary:hover, #profile-menu summary:focus, ul[role="menu"].action-menu button:hover, ul[role="menu"].action-menu a:hover, body > nav a { #profile-menu summary:hover, #profile-menu summary:focus, ul[role="menu"].action-menu button:hover, ul[role="menu"].action-menu a:hover, header nav a {
color: var(--numerus--text-color); color: var(--numerus--text-color);
text-decoration: none; text-decoration: none;
transition: 0.25s ease; transition: 0.25s ease;
} }
#profile-menu summary:hover, #profile-menu summary:focus, ul[role="menu"].action-menu button:hover, ul[role="menu"].action-menu a:hover, body > nav ul:hover a { #profile-menu summary:hover, #profile-menu summary:focus, ul[role="menu"].action-menu button:hover, ul[role="menu"].action-menu a:hover, header nav ul:hover a {
color: #ccc; color: #ccc;
} }
#profile-menu summary:hover, #profile-menu summary:focus, ul[role="menu"].action-menu button:hover, ul[role="menu"].action-menu a:hover, body > nav ul:hover a:hover { #profile-menu summary:hover, #profile-menu summary:focus, ul[role="menu"].action-menu button:hover, ul[role="menu"].action-menu a:hover, header nav ul:hover a:hover {
color: var(--numerus--text-color); color: var(--numerus--text-color);
text-decoration: none; text-decoration: none;
} }
#profile-menu summary:active, #profile-menu summary:active, ul[role="menu"].action-menu button:active, ul[role="menu"].action-menu a:active, body > nav ul:active li:active a:active { #profile-menu summary:active, #profile-menu summary:active, ul[role="menu"].action-menu button:active, ul[role="menu"].action-menu a:active, header nav ul:active li:active a:active {
color: var(--numerus--text-color); color: var(--numerus--text-color);
text-decoration: none; text-decoration: none;
} }
body > nav a[aria-current] {
text-decoration: underline;
}
/* menu tauler final */ /* menu tauler final */
main > nav { main > nav {
@ -10312,7 +10307,7 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
header, body > nav a { header, header nav a {
padding: 0; padding: 0;
} }

22
web/template/app.gohtml
View File

@ -13,6 +13,17 @@
<body class="filters-visible"> <body class="filters-visible">
<header> <header>
<h1><img src="/static/numerus.svg" alt="Numerus" width="261" height="33"></h1> <h1><img src="/static/numerus.svg" alt="Numerus" width="261" height="33"></h1>
<nav aria-label="{{( pgettext "Main" "title" )}}" data-hx-target="main" data-hx-boost="true">
<ul>
<li><a{{if requestURIMatches (companyURI "/") }} aria-current="page"{{ end }} href="{{ companyURI "/" }}">{{( pgettext "Dashboard" "nav" )}}</a></li>
<li><a{{if requestURIHasPrefix (companyURI "/quotes") }} aria-current="page"{{ end }} href="{{ companyURI "/quotes" }}">{{( pgettext "Quotations" "nav" )}}</a></li>
<li><a{{if requestURIHasPrefix (companyURI "/invoices") }} aria-current="page"{{ end }} href="{{ companyURI "/invoices" }}">{{( pgettext "Invoices" "nav" )}}</a></li>
<li><a{{if requestURIHasPrefix (companyURI "/expenses") }} aria-current="page"{{ end }} href="{{ companyURI "/expenses" }}">{{( pgettext "Expenses" "nav" )}}</a></li>
<li><a{{if requestURIHasPrefix (companyURI "/payments") }} aria-current="page"{{ end }} href="{{ companyURI "/payments" }}">{{( pgettext "Payments" "nav" )}}</a></li>
<li><a{{if requestURIHasPrefix (companyURI "/products") }} aria-current="page"{{ end }} href="{{ companyURI "/products" }}">{{( pgettext "Products" "nav" )}}</a></li>
<li><a{{if requestURIHasPrefix (companyURI "/contacts") }} aria-current="page"{{ end }} href="{{ companyURI "/contacts" }}">{{( pgettext "Contacts" "nav" )}}</a></li>
</ul>
</nav>
<details id="profile-menu" class="menu"> <details id="profile-menu" class="menu">
<summary aria-label="{{( gettext "Profile menu" )}}"> <summary aria-label="{{( gettext "Profile menu" )}}">
<i class="ri-user-6-line ri-3x"></i> <i class="ri-user-6-line ri-3x"></i>
@ -72,17 +83,6 @@
</ul> </ul>
</details> </details>
</header> </header>
<nav aria-label="{{( pgettext "Main" "title" )}}" data-hx-target="main" data-hx-boost="true">
<ul>
<li><a{{if requestURIMatches (companyURI "/") }} aria-current="page"{{ end }} href="{{ companyURI "/" }}">{{( pgettext "Dashboard" "nav" )}}</a></li>
<li><a{{if requestURIHasPrefix (companyURI "/quotes") }} aria-current="page"{{ end }} href="{{ companyURI "/quotes" }}">{{( pgettext "Quotations" "nav" )}}</a></li>
<li><a{{if requestURIHasPrefix (companyURI "/invoices") }} aria-current="page"{{ end }} href="{{ companyURI "/invoices" }}">{{( pgettext "Invoices" "nav" )}}</a></li>
<li><a{{if requestURIHasPrefix (companyURI "/expenses") }} aria-current="page"{{ end }} href="{{ companyURI "/expenses" }}">{{( pgettext "Expenses" "nav" )}}</a></li>
<li><a{{if requestURIHasPrefix (companyURI "/payments") }} aria-current="page"{{ end }} href="{{ companyURI "/payments" }}">{{( pgettext "Payments" "nav" )}}</a></li>
<li><a{{if requestURIHasPrefix (companyURI "/products") }} aria-current="page"{{ end }} href="{{ companyURI "/products" }}">{{( pgettext "Products" "nav" )}}</a></li>
<li><a{{if requestURIHasPrefix (companyURI "/contacts") }} aria-current="page"{{ end }} href="{{ companyURI "/contacts" }}">{{( pgettext "Contacts" "nav" )}}</a></li>
</ul>
</nav>
<main> <main>
{{- template "breadcrumbs" . }} {{- template "breadcrumbs" . }}
{{- template "content" . }} {{- template "content" . }}