jukka/intra.noxus.fi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add mobile responsiveness + PWA support

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
2026-03-13 18:33:48 +02:00
parent 45de863d07
commit 77dc790b0f
4 changed files with 237 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@@ -2,9 +2,13 @@
<html lang="fi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#0f3460">
<link rel="manifest" href="manifest.json">
<title>Noxus HUB</title>
<link rel="stylesheet" href="style.css?v=20260313w">
<link rel="stylesheet" href="style.css?v=20260313x">
</head>
<body>
<!-- Login -->
@@ -1480,9 +1484,9 @@
<tr>
<th>Käyttäjätunnus</th>
<th>Nimi</th>
<th>Sähköposti</th>
<th class="hide-mobile">Sähköposti</th>
<th>Rooli</th>
<th>Luotu</th>
<th class="hide-mobile">Luotu</th>
<th>Toiminnot</th>
</tr>
</thead>