| ${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;
}
}
|