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

Make the menu work as a menu

This commit is contained in:
jordi fita mas 2023-01-22 22:30:15 +01:00
parent 5505fa41c3
commit 1675ada70b
2 changed files with 54 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
web/static/numerus.css
View File

@ -152,7 +152,7 @@
--numerus--color--hay: #ffe673; --numerus--color--hay: #ffe673;
--numerus--text-color: var(--numerus--color--black); --numerus--text-color: var(--numerus--color--black);
--numerus--background-color: var(--numerus--color-white); --numerus--background-color: var(--numerus--color--white);
--numerus--font-family: 'JetBrains Mono'; --numerus--font-family: 'JetBrains Mono';
--numerus--header--background-color: #ede9e5; --numerus--header--background-color: #ede9e5;
@ -168,8 +168,8 @@ html {
} }
body { body {
color: var(--numerus--text-color);
background-color: var(--numerus--background-color); background-color: var(--numerus--background-color);
color: var(--numerus--text-color);
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1.5; line-height: 1.5;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -234,16 +234,21 @@ header {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: var(--numerus--header--background-color); background-color: var(--numerus--header--background-color);
padding: 1rem 3rem; padding: 0rem 3rem;
} }
nav { main {
padding: 3rem;
}
.relative {
position: relative; position: relative;
} }
nav > button { #profilebutton {
width: 7rem; width: 7rem;
height: 7rem; height: 7rem;
margin: 1rem 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -251,25 +256,50 @@ nav > button {
border: none; border: none;
} }
nav button { #profilebutton, #profilemenu button {
cursor: pointer; cursor: pointer;
} }
nav ul { #profilemenu {
list-style: none; list-style: none;
padding: none;
position: absolute; position: absolute;
right: -1.875em; right: -1.875em;
top: calc(100% + 1rem); top: 100%;
padding: 1rem 2rem; padding: 1rem 2rem;
background-color: var(--numerus--color--white); background-color: var(--numerus--color--white);
display: none;
opacity: 0;
z-index: 10;
} }
nav ul li + li { header div:hover #profilemenu {
opacity: 1;
display: initial;
}
header .overlay {
background-color: var(--numerus--header--background-color);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
display: none;
pointer-events: none;
mix-blend-mode: multiply;
}
header div:hover + .overlay {
display: block;
opacity: 1;
}
#profilemenu li + li {
border-top: 1px solid var(--numerus--color--black); border-top: 1px solid var(--numerus--color--black);
} }
nav ul button, nav ul a { #profilemenu button, #profilemenu a {
font-size: 2rem; font-size: 2rem;
font-style: italic; font-style: italic;
height: 8rem; height: 8rem;
@ -283,12 +313,12 @@ nav ul button, nav ul a {
text-transform: initial; text-transform: initial;
} }
nav ul i[class^='ri-'] { #profilemenu i[class^='ri-'] {
margin-right: 2rem; margin-right: 2rem;
color: var(--numerus--color--dark-gray); color: var(--numerus--color--dark-gray);
} }
nav ul button:hover, nav ul a:hover { #profilemenu button:hover, #profilemenu a:hover {
background-color: var(--numerus--color--light-gray); background-color: var(--numerus--color--light-gray);
} }

17
web/template/app.html
View File

@ -9,13 +9,18 @@
<body> <body>
<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 role="navigation"> <div class="relative">
<button aria-haspopup="true"><i class="ri-eye-close-line ri-3x"></i></button> <button id="profilebutton" aria-controls="profilemenu" aria-haspopup="true"><i class="ri-eye-close-line ri-3x"></i></button>
<ul> <ul id="profilemenu" role="menu" aria-labelledby="profilebutton">
<li><a href="/profile"><i class="ri-account-circle-line"></i> {{( gettext "Account" )}}</a></li> <li role="presentation">
<li><form method="POST" action="/logout"><button type="submit"><i class="ri-logout-circle-line"></i> {{( pgettext "Logout" "action" )}}</button></form></li> <a role="menuitem" href="/profile"><i class="ri-account-circle-line"></i> {{( gettext "Account" )}}</a>
</li>
<li role="presentation">
<form method="POST" action="/logout"><button type="submit" role="menuitem"><i class="ri-logout-circle-line"></i> {{( pgettext "Logout" "action" )}}</button></form>
</li>
</ul> </ul>
</nav> </div>
<div class="overlay"></div>
</header> </header>
<main> <main>
{{- template "content" . }} {{- template "content" . }}