diff --git a/src/voxip_kiosk/web/static/app.css b/src/voxip_kiosk/web/static/app.css index 7d57dff..25e5ffc 100644 --- a/src/voxip_kiosk/web/static/app.css +++ b/src/voxip_kiosk/web/static/app.css @@ -42,6 +42,16 @@ h2 { font-size: 1.1rem; margin: 0 0 .9rem; } .mainnav a:hover, .mainnav button:hover { background: var(--navy-2); color: #fff; } .mainnav a[aria-current="page"] { background: var(--navy-2); color: #fff; } .nav-logout { margin: 0; } +.nav-menu { position: relative; } +.nav-menu summary { list-style: none; color: #d6e2f3; padding: .45rem .7rem; border-radius: 6px; font-size: .95rem; cursor: pointer; user-select: none; } +.nav-menu summary::-webkit-details-marker { display: none; } +.nav-menu summary:hover, .nav-menu[open] summary { background: var(--navy-2); color: #fff; } +.nav-menu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; padding: .3rem 0; background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(11, 37, 69, .15); z-index: 20; } +.nav-menu-list form { margin: 0; } +.mainnav .nav-menu-list button { display: block; width: 100%; text-align: left; padding: .55rem .9rem; border-radius: 0; color: var(--text); } +.mainnav .nav-menu-list button:hover { background: #f1f4f8; color: var(--text); } +.mainnav .nav-menu-list button.danger { color: #b03030; } +.nav-menu-list hr { border: 0; border-top: 1px solid var(--border); margin: .3rem 0; } .nav-toggle { display: none; background: none; border: 1px solid rgba(255, 255, 255, .3); border-radius: 8px; width: 44px; height: 40px; cursor: pointer; } .nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { display: block; width: 20px; height: 2px; background: #fff; margin: 0 auto; position: relative; content: ""; } .nav-toggle .bars::before { position: absolute; top: -6px; } @@ -51,7 +61,12 @@ h2 { font-size: 1.1rem; margin: 0 0 .9rem; } .nav-toggle { display: block; } .mainnav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: .75rem; } .mainnav.open { display: flex; } - .mainnav a, .mainnav button { padding: .75rem; text-align: left; width: 100%; } + .mainnav a, .mainnav button, .nav-menu summary { padding: .75rem; text-align: left; width: 100%; } + .nav-menu-list { position: static; min-width: 0; margin: .25rem 0 0 .75rem; background: none; border: 0; border-left: 1px solid rgba(255, 255, 255, .2); border-radius: 0; box-shadow: none; } + .mainnav .nav-menu-list button { color: #d6e2f3; } + .mainnav .nav-menu-list button:hover { background: var(--navy-2); color: #fff; } + .mainnav .nav-menu-list button.danger { color: #ffb4b4; } + .nav-menu-list hr { border-top-color: rgba(255, 255, 255, .2); } } /* --- layout ------------------------------------------------------------------ */ diff --git a/src/voxip_kiosk/web/static/app.js b/src/voxip_kiosk/web/static/app.js index 5da7fff..b7dd1f0 100644 --- a/src/voxip_kiosk/web/static/app.js +++ b/src/voxip_kiosk/web/static/app.js @@ -16,6 +16,17 @@ }); } + // Actions menu: close after choosing an item, on a click outside it or on Escape + const menu = $("[data-nav-menu]"); + if (menu) { + document.addEventListener("click", (event) => { + if (menu.open && (!menu.contains(event.target) || event.target.closest(".nav-menu-list button"))) menu.open = false; + }); + document.addEventListener("keydown", (event) => { + if (event.key === "Escape" && menu.open) menu.open = false; + }); + } + // Confirmation dialog for dangerous actions (forms with data-confirm) const dialog = $("#confirm-dialog"); $$("form[data-confirm]").forEach((form) => { diff --git a/src/voxip_kiosk/web/templates/_macros.html b/src/voxip_kiosk/web/templates/_macros.html index 8b9a5af..d651140 100644 --- a/src/voxip_kiosk/web/templates/_macros.html +++ b/src/voxip_kiosk/web/templates/_macros.html @@ -2,10 +2,10 @@ {{ label }} {%- endmacro %} -{% macro action(url, label, cls="btn-primary", confirm=None, confirm_title=None, big=False) -%} -
+{% macro menu_action(url, label, confirm=None, confirm_title=None, danger=False) -%} + - +
{%- endmacro %} diff --git a/src/voxip_kiosk/web/templates/base.html b/src/voxip_kiosk/web/templates/base.html index 7ed1757..8e15f38 100644 --- a/src/voxip_kiosk/web/templates/base.html +++ b/src/voxip_kiosk/web/templates/base.html @@ -1,3 +1,4 @@ +{% from "_macros.html" import menu_action with context %} @@ -27,6 +28,16 @@ Netwerk Logboek Wachtwoord +