From 77dc790b0f2663ae40a997ca61047f69fae88e1d Mon Sep 17 00:00:00 2001 From: Jukka Lampikoski Date: Fri, 13 Mar 2026 18:33:48 +0200 Subject: [PATCH] Add mobile responsiveness + PWA support Mobile (768px): - Tab bar: horizontal scroll with momentum, hidden scrollbar - Header: compact layout, smaller fonts - Tables: horizontal scroll, hide-mobile class for less important cols - Modals: bottom-sheet style, full width - Touch targets: min-height 36px for buttons/selects - Toolbar: stacks vertically - Stat cards: compact Small phone (480px): - Even more compact header and tabs - Smaller table cells - iOS zoom prevention (16px font on inputs) PWA: - manifest.json for Add to Home Screen - apple-mobile-web-app-capable meta tags - theme-color for status bar - overscroll-behavior: none (prevent pull-to-refresh) Co-Authored-By: Claude Opus 4.6 --- index.html | 12 ++- manifest.json | 22 +++++ script.js | 4 +- style.css | 222 ++++++++++++++++++++++++++++++++++++++++++++++---- 4 files changed, 237 insertions(+), 23 deletions(-) create mode 100644 manifest.json diff --git a/index.html b/index.html index f098247..5665828 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,13 @@ - + + + + + Noxus HUB - + @@ -1480,9 +1484,9 @@ Käyttäjätunnus Nimi - Sähköposti + Sähköposti Rooli - Luotu + Luotu Toiminnot diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..7da8ffc --- /dev/null +++ b/manifest.json @@ -0,0 +1,22 @@ +{ + "name": "Noxus HUB", + "short_name": "HUB", + "description": "Noxus HUB - Hallintapaneeli", + "start_url": "/", + "display": "standalone", + "orientation": "any", + "background_color": "#0f3460", + "theme_color": "#0f3460", + "icons": [ + { + "src": "icon-192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "icon-512.png", + "sizes": "512x512", + "type": "image/png" + } + ] +} diff --git a/script.js b/script.js index 0e45faa..c20189e 100644 --- a/script.js +++ b/script.js @@ -1208,9 +1208,9 @@ function renderUserRow(u, companyId) { return ` ${esc(u.username)} ${esc(u.nimi)} - ${esc(u.email || '')} + ${esc(u.email || '')} ${role} - ${esc(u.luotu)} + ${esc(u.luotu)} ${u.id !== currentUser?.id ? `` : ''} diff --git a/style.css b/style.css index 5b86d39..131ae8a 100644 --- a/style.css +++ b/style.css @@ -970,7 +970,9 @@ span.empty { background: #fef2f2; } -/* Responsive */ +/* ==================== RESPONSIVE ==================== */ + +/* Tablet */ @media (max-width: 1024px) { .content-layout { grid-template-columns: 1fr; @@ -989,51 +991,237 @@ span.empty { } } +/* Mobile */ @media (max-width: 768px) { + /* Header: kompakti mobiilissa */ header { - flex-direction: column; - gap: 0.75rem; - padding: 1rem; - text-align: center; + padding: 0.6rem 1rem; + gap: 0.4rem; } - .header-brand { - justify-content: center; + .header-left h1 { + font-size: 1rem; } + .header-brand img { + height: 28px; + } + + .header-right { + gap: 0.3rem; + font-size: 0.8rem; + } + + .header-right .btn-primary, + .header-right .btn-secondary { + padding: 5px 8px; + font-size: 0.75rem; + } + + .user-info { + font-size: 0.78rem; + } + + /* Tab bar: horisontaalinen scroll */ + .tab-bar { + overflow-x: auto; + overflow-y: hidden; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; /* Firefox */ + padding: 0 0.5rem; + top: 44px; /* pienempi header */ + } + + .tab-bar::-webkit-scrollbar { + display: none; + } + + .tab { + padding: 0.6rem 0.9rem; + font-size: 0.78rem; + white-space: nowrap; + flex-shrink: 0; + } + + /* Sub-tab bar: sama horisontaalinen scroll */ + .sub-tab-bar { + overflow-x: auto; + overflow-y: hidden; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + padding: 0 0.5rem; + } + + .sub-tab-bar::-webkit-scrollbar { + display: none; + } + + .sub-tab { + padding: 0.5rem 0.8rem; + font-size: 0.78rem; + white-space: nowrap; + flex-shrink: 0; + } + + /* Main container */ .main-container { - padding: 1rem; + padding: 0.75rem; } + /* Lomakkeet */ .form-grid, .form-grid-liittyma, .detail-grid { grid-template-columns: 1fr; } + /* Yhteenvetopalkki */ .summary-bar { flex-direction: column; gap: 0.25rem; text-align: center; } + /* Taulukot: horisontaalinen scroll */ + .table-card { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + thead th, tbody td { - padding: 9px 10px; - font-size: 0.83rem; + padding: 8px 8px; + font-size: 0.8rem; + } + + /* Toolbar: pinoa mobiilissa */ + .toolbar { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + + .toolbar .search-bar { + width: 100%; + } + + .toolbar .search-bar input { + width: 100%; + } + + /* Modaalit: täysi leveys */ + .modal-content { + max-width: 100%; + max-height: 95vh; + border-radius: 12px 12px 0 0; + margin-top: auto; + } + + .modal { + align-items: flex-end; + padding: 0; + } + + .modal-header { + padding: 1rem; + } + + .modal-header h2 { + font-size: 1.1rem; + } + + /* Modaalin sisältöpadding */ + .modal-content form, + .modal-content .modal-body { + padding: 0.75rem; + } + + /* Stat-kortit mobiilissa */ + .stat-card { + padding: 0.75rem; + } + + .stat-card h3 { + font-size: 0.75rem; + } + + .stat-card .stat-number { + font-size: 1.3rem; + } + + /* Sidebar: kompaktimpi */ + .sidebar-stats .stat-card { + min-width: 100px; + } + + /* Tikettinäkymä: kompaktimpi */ + #ticket-detail-header select { + padding: 5px 6px !important; + font-size: 0.78rem !important; + } + + /* Touch-ystävälliset napit — isommat klikattavat alueet */ + button, .btn-primary, .btn-secondary, select { + min-height: 36px; + } + + /* Piilota vähemmän tärkeät kolumnit */ + .hide-mobile { + display: none !important; } } +/* Pieni puhelin */ @media (max-width: 480px) { - .header-right { - flex-direction: column; - width: 100%; + header { + padding: 0.5rem 0.75rem; } - .header-right .btn-primary, - .header-right .btn-secondary { - width: 100%; - text-align: center; + .header-left h1 { + font-size: 0.9rem; + } + + /* Piilota "Vaihda yritys" teksti, näytä vain ikoni/select */ + .header-right { + flex-wrap: wrap; + gap: 0.25rem; + justify-content: center; + } + + .tab { + padding: 0.5rem 0.7rem; + font-size: 0.72rem; + } + + .tab-bar { + top: 38px; + } + + /* Taulukot: pienempi fontti */ + thead th, + tbody td { + padding: 6px 6px; + font-size: 0.75rem; + } + + /* Actions-sarake: pienemmät napit */ + .actions-cell button { + padding: 3px 5px; + font-size: 0.75rem; + } + + /* Modaalin lomakekentät */ + .modal-content input, + .modal-content select, + .modal-content textarea { + font-size: 16px; /* Estää iOS zoom-in focuksessa */ + } +} + +/* PWA-tyylinen kokemus: estä pull-to-refresh ja bounce */ +@media (max-width: 768px) { + html { + overscroll-behavior: none; } }