From ae50ec7049de772ce8846d1996b3c6cfdac34777 Mon Sep 17 00:00:00 2001 From: Ian Roddis <31021769+iroddis@users.noreply.github.com> Date: Thu, 2 Jul 2026 13:50:10 -0300 Subject: [PATCH] Fixing time between flyouts --- app/static/css/style.css | 64 ++++++++++++-- app/templates/_nav.html | 177 ++++++++++++++++++++++++++++++++++----- 2 files changed, 212 insertions(+), 29 deletions(-) diff --git a/app/static/css/style.css b/app/static/css/style.css index 94e51d1..4ef253a 100644 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -68,23 +68,65 @@ a:hover { gap: 0.75rem; } +/* Nav icons */ +.nav-icon { + width: 14px; + height: 14px; + stroke: currentColor; + fill: none; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + flex-shrink: 0; + vertical-align: -2px; +} + /* Nav dropdowns */ .nav-group { position: relative; line-height: 1; } +/* Invisible bridge so the hover isn't broken by the gap between trigger and panel */ +.nav-group::after { + content: ''; + position: absolute; + top: 100%; + left: 0; + right: 0; + height: 8px; +} + +/* Fly-out submenus open to the right — bridge the margin-left gap */ +.nav-dropdown .nav-group::after { + top: 0; + bottom: 0; + left: 100%; + right: auto; + height: auto; + width: 4px; +} + .nav-label { cursor: default; color: #a5b4fc; white-space: nowrap; user-select: none; + display: flex; + align-items: center; + gap: 0.35rem; } .nav-label:hover { text-decoration: underline; } +.topbar nav>a { + display: flex; + align-items: center; + gap: 0.35rem; +} + .nav-dropdown { display: none; position: absolute; @@ -94,17 +136,19 @@ a:hover { border: 1px solid var(--border); border-radius: 8px; padding: 0.3rem 0; - min-width: 180px; + min-width: 190px; z-index: 200; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } -.nav-group:hover > .nav-dropdown { +.nav-group:hover>.nav-dropdown { display: block; } .nav-dropdown a { - display: block; + display: flex; + align-items: center; + gap: 0.5rem; padding: 0.38rem 0.9rem; white-space: nowrap; color: #a5b4fc; @@ -122,22 +166,28 @@ a:hover { } /* Second-level group inside a dropdown */ -.nav-dropdown .nav-group > .nav-label { - display: block; +.nav-dropdown .nav-group>.nav-label { padding: 0.38rem 0.9rem; } -.nav-dropdown .nav-group:hover > .nav-label { +.nav-dropdown .nav-group:hover>.nav-label { background: var(--surface-2); text-decoration: none; } -.nav-dropdown .nav-group > .nav-dropdown { +.nav-dropdown .nav-group>.nav-dropdown { top: -0.3rem; left: 100%; margin-left: 2px; } +.nav-chevron { + margin-left: auto; + opacity: 0.6; + font-style: normal; + font-size: 0.7em; +} + /* Cards */ .card { background: var(--surface); diff --git a/app/templates/_nav.html b/app/templates/_nav.html index a468746..51cc99c 100644 --- a/app/templates/_nav.html +++ b/app/templates/_nav.html @@ -5,59 +5,192 @@ {% set can_labels = su or "manufacturers:read" in p or "part_colours:read" in p or "part_types:read" in p or "scope_models:read" in p or "sub_part_types:read" in p %} {% set can_database = su or "imported_parts:read" in p or "augmented_parts:read" in p %} {% set can_parts = can_connections or can_labels or can_database %} + +{# ── SVG icon sprite ───────────────────────────────────────────────────────── #} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +{# ── Nav macro for DRY icon use ────────────────────────────────────────────── #} +{% macro icon(id) %}{% endmacro %} +
{{ app_name }}
{{ user.email }}