/* ============================================================ MOBILE NAVIGATION — sticky app-bar + slide-in drawer Alleen actief onder 900px. Op desktop volledig verborgen. Markup zit in includes/mobile_nav.php, geladen vanuit layout_head.php direct na . ============================================================ */ /* ============================================================ BREAKPOINT-STANDAARD (project-breed) We hanteren twee mobiele breakpoints. Gebruik deze in alle nieuwe CSS — niet 768px, 480px, of andere maten. @media (max-width: 900px) → "compact": tablet portrait + telefoon. Mobiele nav-bar, drawer, page-header overflow, body-padding voor fixed bar, touch targets, form-layout 1-koloms. @media (max-width: 640px) → "phone": echte telefoon. Verberg .btn-label op page-header acties, icon-only knoppen vierkant (40x40px), en eventuele micro-tweaks. Uitzondering: de Bibliotheek mobile-cards switchen bij 768px omdat de DataTables-tabel daar zijn nuttige limiet bereikt. Volg dit patroon NIET voor nieuwe modules zonder reden. Quick check vóór nieuwe @media-regels: - "Past dit beter op 900 of 640?" → kies één van de twee - Andere waardes alleen als er een echt gerechtvaardigd visueel/functioneel moment is (zoals de bibliotheek-tabel) ============================================================ */ /* Default: alles verborgen — desktop ziet niks van de mobile nav */ .mobile-nav-bar, .mobile-nav-overlay, .mobile-nav-drawer { display: none; } /* ============================================================ PAGE-HEADER OVERFLOW-MENU — desktop defaults Op desktop: - .overflow-toggle (⋮ knop) is verborgen - .overflow-actions wrapper "verdwijnt" via display: contents, waardoor zijn kinderen (de niet-primary knoppen) gewoon naast de primary knoppen inline flexen. Onder 900px (in het @media-blok hieronder) wordt dit omgezet naar het bottom-sheet patroon. ============================================================ */ .overflow-toggle { display: none; } .overflow-actions { display: contents; } .overflow-overlay { display: none; } /* Mobile-only utility — desktop default: verborgen */ .mobile-only { display: none; } /* Mobile-action-label: tekst die alleen in de mobile bottom-sheet verschijnt. Desktop default: verborgen (knoppen blijven icon-only). */ .mobile-action-label { display: none; } /* ============================================================ MOBIEL: alles aan onder 900px ============================================================ */ @media (max-width: 900px) { /* ---------------------------------------- Sticky app-bar bovenin ---------------------------------------- */ .mobile-nav-bar { display: flex; align-items: center; gap: 8px; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 56px; padding: 0 8px 0 4px; background: #ffffff; border-bottom: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } /* Compenseer voor de fixed app-bar zodat content er niet onder verdwijnt */ body.app-layout-v1 { padding-top: 56px; } .mobile-nav-toggle, .mobile-nav-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; border: none; background: transparent; color: #0f172a; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .mobile-nav-toggle:hover, .mobile-nav-toggle:active, .mobile-nav-close:hover, .mobile-nav-close:active { background: #f1f5f9; } .mobile-nav-toggle i, .mobile-nav-close i { width: 24px; height: 24px; } .mobile-nav-title { flex: 1 1 auto; text-align: center; font-weight: 700; font-size: 1rem; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px; } .mobile-nav-spacer { width: 44px; flex-shrink: 0; } /* ---------------------------------------- Backdrop achter de drawer ---------------------------------------- */ .mobile-nav-overlay:not([hidden]) { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: 1100; animation: mobileNavFadeIn 0.2s ease; } @keyframes mobileNavFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ---------------------------------------- Drawer — slidet vanaf links ---------------------------------------- */ .mobile-nav-drawer { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; width: min(85vw, 320px); background: #ffffff; z-index: 1200; transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 2px 0 16px rgba(15, 23, 42, 0.15); overflow-y: auto; overscroll-behavior: contain; } .mobile-nav-drawer.is-open { transform: translateX(0); } .mobile-nav-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 8px 12px 16px; border-bottom: 1px solid #e2e8f0; flex-shrink: 0; } .mobile-nav-drawer-title { font-weight: 700; font-size: 1.05rem; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------------------------------------- Menu-items ---------------------------------------- */ .mobile-nav-list { flex: 1 1 auto; display: flex; flex-direction: column; padding: 8px 0; } .mobile-nav-item { display: flex; align-items: center; gap: 14px; padding: 14px 20px; color: #334155; text-decoration: none; font-size: 1rem; font-weight: 500; min-height: 48px; transition: background 0.1s ease; } .mobile-nav-item:hover, .mobile-nav-item:active { background: #f1f5f9; color: #0f172a; } .mobile-nav-item i { width: 20px; height: 20px; color: #64748b; flex-shrink: 0; } /* ---------------------------------------- Footer met user + uitloggen ---------------------------------------- */ .mobile-nav-drawer-footer { flex-shrink: 0; padding: 12px 16px 20px; border-top: 1px solid #e2e8f0; } .mobile-nav-user { font-size: 0.85rem; color: #64748b; margin-bottom: 10px; } .mobile-nav-logout { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fef2f2; color: #991b1b; border-radius: 10px; text-decoration: none; font-weight: 600; min-height: 44px; } .mobile-nav-logout:hover, .mobile-nav-logout:active { background: #fee2e2; } .mobile-nav-logout i { width: 18px; height: 18px; } /* ---------------------------------------- Body scroll-lock terwijl drawer open is ---------------------------------------- */ body.mobile-nav-locked { overflow: hidden; } /* ---------------------------------------- Utility: verberg element op mobiel. Bruikbaar op knoppen/elementen die alleen op desktop nut hebben (kolomselectors, bulk-acties, tabel-tooling, etc). ---------------------------------------- */ .mobile-hidden { display: none !important; } /* ---------------------------------------- Utility: toon element alleen op mobiel. Tegenhanger van .mobile-hidden. Bruikbaar voor mobile-only banners ("deze pagina is nog niet geoptimaliseerd voor mobiel"-meldingen). ---------------------------------------- */ .mobile-only { display: block; } /* ---------------------------------------- Overflow ⋮-menu in page-header op mobiel. Werkt voor ALLE pagina's: niet-primary acties verhuizen automatisch naar een bottom-sheet die opent als je op ⋮ tikt. Markup: includes/page_header.php ---------------------------------------- */ .overflow-toggle { display: inline-flex !important; } .overflow-actions { display: flex; flex-direction: column; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; padding: 14px 16px 20px; background: #ffffff; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.18); transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); max-height: 80vh; overflow-y: auto; overscroll-behavior: contain; } .overflow-actions.is-open { transform: translateY(0); } /* Knoppen in de sheet altijd full-width met label zichtbaar */ .overflow-actions .button { width: 100%; justify-content: flex-start; } .overflow-actions .button.has-icon .btn-label { display: inline-block !important; } /* Tekst-spans die alleen in de bottom-sheet zichtbaar zijn (voor icon-only knoppen die in pageActions als raw HTML zijn gedefinieerd en geen automatische label-rendering hebben). Op desktop blijft de knop icon-only. */ .overflow-actions .mobile-action-label { display: inline-block !important; font-size: 14px; } .overflow-overlay:not([hidden]) { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: 1100; animation: mobileNavFadeIn 0.2s ease; } /* ---------------------------------------- Page-header op mobiel niet sticky maken: de mobile-nav-bar is al fixed bovenin, een tweede sticky element botst daarmee. Plus: negatieve margins resetten zodat de header niet onder de fixed bar duikt. ---------------------------------------- */ .page-header, .page-header-home { position: static; margin: 0 0 16px; padding: 0; background: none; border-bottom: none; } /* ---------------------------------------- Touch targets — minimum 44x44px op mobiel Apple HIG / Material Design richtlijn om miss-clicks te voorkomen op kleine schermen. ---------------------------------------- */ .button { min-height: 44px; } .button.icon-only, .button.has-icon.icon-only { min-width: 44px; min-height: 44px; } .page-header-actions .button { min-height: 40px; padding: 6px 12px; } /* Form inputs — font-size 16px voorkomt iOS auto-zoom bij focus */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea { min-height: 44px; font-size: 16px; } textarea { min-height: 88px; } /* Checkboxes en radios visueel groter */ input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; } /* Filter-chips iets ruimer voor vingertoegang */ .bib-filter-chip { min-height: 36px; padding: 8px 14px; } } /* ============================================================ iOS PWA — safe-area-inset voor notch / status-bar Werkt alleen als PWA in standalone mode draait ============================================================ */ @supports (padding: max(0px)) { @media (max-width: 900px) { .mobile-nav-bar { padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); } body.app-layout-v1 { padding-top: calc(56px + env(safe-area-inset-top)); } .mobile-nav-drawer { padding-top: env(safe-area-inset-top); } } } /* ============================================================ PHONE (<640px) — icon-knoppen vierkant maken Onder 640px verbergt de bestaande CSS .btn-label op page-header acties. Zonder eigen fix krijgt de knop wel mijn 44px hoogte maar te brede padding (rechthoek). Hier dwingen we 44x44 af voor pure icon-knoppen. ============================================================ */ @media (max-width: 640px) { .page-header-actions .button.has-icon { min-width: 40px; min-height: 40px; padding: 6px; } }