diff --git a/frontend/src/pages.jsx b/frontend/src/pages.jsx index 9d3a502..aefc403 100644 --- a/frontend/src/pages.jsx +++ b/frontend/src/pages.jsx @@ -2087,7 +2087,7 @@ export function RoosterScherm({ mode }) { const setWeergave = (v) => { setWeergaveState(v); try { localStorage.setItem("rw_weergave", v); } catch { /* niet beschikbaar */ } }; const [vakkleurVlak, setVakkleurState] = useState(() => { try { return localStorage.getItem("rw_vakkleur") === "vlak"; } catch { return false; } }); const setVakkleur = (v) => { setVakkleurState(v); try { localStorage.setItem("rw_vakkleur", v ? "vlak" : "streep"); } catch { /* niet beschikbaar */ } }; - const [detailsOpen, setDetailsOpenState] = useState(() => { try { return localStorage.getItem("rw_rooster_details") === "1"; } catch { return false; } }); + const [detailsOpen, setDetailsOpenState] = useState(() => { try { return localStorage.getItem("rw_rooster_details") !== "0"; } catch { return true; } }); const setDetailsOpen = (v) => { setDetailsOpenState(v); try { localStorage.setItem("rw_rooster_details", v ? "1" : "0"); } catch { /* niet beschikbaar */ } }; // Printopties const [printOpen, setPrintOpen] = useState(false); @@ -2411,7 +2411,7 @@ export function RoosterScherm({ mode }) { {edit && } {edit && } - {(edit || detailsOpen) && (b.locatie_naam || b.lokaal_naam || b.begeleiders_namen.length > 0) && ( + {(b.locatie_naam || b.lokaal_naam || b.begeleiders_namen.length > 0) && (
{b.locatie_naam && 📍 {b.locatie_naam}} {b.lokaal_naam && 🚪 {b.lokaal_naam}} diff --git a/frontend/src/styles.css b/frontend/src/styles.css index da43b75..23d0297 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -29,7 +29,7 @@ body { margin: 0; font-family: system-ui, "Segoe UI", Roboto, sans-serif; color: } .topbar-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; } .topbar-user { display: flex; align-items: center; gap: 10px; white-space: nowrap; } -.top-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } +.top-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; overflow: visible; scrollbar-width: thin; } .top-tabs-settings { display: flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 10px; border-left: 1px solid var(--line); } /* Instellingen als cog-menu (popover via hover of klik) */ @@ -676,9 +676,9 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px; .voorstel-klas h3 { margin: 8px 0 6px; } /* Groep-dropdowns in de bovenbalk */ -.nav-menu { position: relative; } +.nav-menu { position: relative; flex: 0 0 auto; } .nav-trigger .caret { font-size: 10px; opacity: .65; margin-left: 1px; } -.nav-dropdown { display: none; position: absolute; left: 0; top: 100%; margin-top: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.15); min-width: 210px; padding: 6px; z-index: 60; } +.nav-dropdown { display: none; position: absolute; left: 0; top: 100%; margin-top: 4px; background: var(--panel); border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.16); min-width: 210px; padding: 6px; z-index: 80; } .nav-menu:hover .nav-dropdown, .nav-menu.open .nav-dropdown { display: block; } /* In-pagina tabbalk: icoon altijd, label inklapbaar op smalle schermen */