Mediusa/FlockRadar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mobile): perfect responsive layout, zero horizontal overflow, and polished mobile nav (v23)

Browse Source
This commit is contained in:
Mediusa
2026-09-12 11:59:28 -07:00
parent eed7c328ed
commit 01dfd20ddd
3 changed files with 100 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+81 -22
View File
@@ -2506,24 +2506,48 @@ body {
width: 100%;
}
/* Ultra-Compact Site Nav */
/* Ultra-Compact Site Nav */
.site-nav {
padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));
padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
min-height: 48px;
overflow: hidden;
max-width: 100vw;
}
.nav-content {
flex-wrap: nowrap;
gap: 8px;
justify-content: space-between;
width: 100%;
}
.nav-left {
gap: 8px;
min-width: 0;
flex-shrink: 1;
}
.brand-wrapper {
gap: 0;
flex-shrink: 0;
}
.brand-name {
display: none;
}
.brand-logo-emblem {
width: 32px;
height: 32px;
}
.brand-text .brand-tagline,
.badge-live-pulse {
display: none;
}
.brand-title {
font-size: 0.92rem;
}
.nav-mode-switcher {
gap: 4px;
gap: 3px;
flex-shrink: 0;
}
.nav-mode-btn {
padding: 5px 8px;
font-size: 0.72rem;
gap: 4px;
}
.nav-text-desktop {
display: none;
@@ -2531,21 +2555,38 @@ body {
.nav-text-mobile {
display: inline;
}
.nav-right {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.user-profile-pill {
padding: 4px 8px;
padding: 6px;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
}
.user-profile-pill span:last-child {
display: none;
}
/* Sleek Floating Top Driving Capsule */
.driver-hud {
position: absolute;
top: max(8px, env(safe-area-inset-top));
left: max(10px, env(safe-area-inset-left));
right: max(10px, env(safe-area-inset-right));
left: max(8px, env(safe-area-inset-left));
right: max(8px, env(safe-area-inset-right));
width: auto;
padding: 8px 12px;
max-width: calc(100vw - 16px);
box-sizing: border-box;
padding: 6px 10px;
border-radius: 16px;
background: rgba(10, 14, 23, 0.92);
background: rgba(10, 14, 23, 0.94);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.12);
@@ -2558,20 +2599,31 @@ body {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
gap: 6px;
width: 100%;
min-width: 0;
}
.hud-state-group {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
flex-shrink: 1;
}
.hud-badge {
padding: 4px 8px;
font-size: 0.68rem;
gap: 5px;
padding: 3px 6px;
font-size: 0.65rem;
gap: 4px;
flex-shrink: 0;
white-space: nowrap;
}
.hud-metrics-row {
display: flex;
align-items: center;
gap: 10px;
gap: 6px;
margin: 0;
}
@@ -2582,12 +2634,12 @@ body {
}
.hud-metric-number {
font-size: 1.15rem;
font-size: 1.05rem;
font-weight: 800;
}
.hud-metric-unit {
font-size: 0.65rem;
font-size: 0.62rem;
}
.hud-metric-label {
@@ -2597,8 +2649,9 @@ body {
.hud-capsule-actions {
display: flex;
align-items: center;
gap: 6px;
gap: 4px;
margin-left: auto;
flex-shrink: 0;
}
.btn-capsule-trigger {
@@ -2606,13 +2659,13 @@ body {
border: 1px solid rgba(255, 255, 255, 0.15);
color: #f8fafc;
border-radius: 8px;
padding: 6px 10px;
font-size: 0.76rem;
padding: 5px 7px;
font-size: 0.72rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
gap: 3px;
transition: all 0.2s ease;
}
@@ -2622,7 +2675,7 @@ body {
}
.btn-expand-details {
padding: 6px 8px;
padding: 5px 6px;
}
.hud-location-bar {
@@ -3651,6 +3704,12 @@ body {
.support-modal-header {
padding: 16px 22px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
position: sticky;
top: 0;
z-index: 30;
background: #0d121d;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.support-modal-header .modal-agency-meta {
index.html
+6 -6
View File
@@ -54,7 +54,7 @@
<meta name="apple-mobile-web-app-title" content="FlockRadar">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="css/styles.css?v=22">
<link rel="stylesheet" href="css/styles.css?v=23">
</head>
<body>
@@ -1313,11 +1313,11 @@
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<!-- Data & Application Logic with Cache Busting -->
<script src="data/portals.js?v=22"></script>
<script src="js/icons.js?v=22"></script>
<script src="js/auth.js?v=22"></script>
<script src="js/radar.js?v=22"></script>
<script src="js/app.js?v=22"></script>
<script src="data/portals.js?v=23"></script>
<script src="js/icons.js?v=23"></script>
<script src="js/auth.js?v=23"></script>
<script src="js/radar.js?v=23"></script>
<script src="js/app.js?v=23"></script>
<!-- Service Worker Instant Cache Invalidation -->
<script>
sw.js
+13 -13
View File
@@ -1,20 +1,20 @@
// Service Worker for FlockRadar Offline Driving & Live Updates
const CACHE_NAME = 'flockradar-v22';
const CACHE_NAME = 'flockradar-v23';
const ASSETS_TO_CACHE = [
'./',
'./index.html',
'./css/styles.css?v=22',
'./js/icons.js?v=22',
'./js/app.js?v=22',
'./js/auth.js?v=22',
'./js/radar.js?v=22',
'./data/portals.js?v=22',
'./favicon.svg?v=22',
'./favicon.ico?v=22',
'./apple-touch-icon.png?v=22',
'./icon-192.png?v=22',
'./icon-512.png?v=22',
'./og-image.png?v=22',
'./css/styles.css?v=23',
'./js/icons.js?v=23',
'./js/app.js?v=23',
'./js/auth.js?v=23',
'./js/radar.js?v=23',
'./data/portals.js?v=23',
'./favicon.svg?v=23',
'./favicon.ico?v=23',
'./apple-touch-icon.png?v=23',
'./icon-192.png?v=23',
'./icon-512.png?v=23',
'./og-image.png?v=23',
'./assets/img/logo.svg',
'./assets/img/flock_pole_cam_palmdale.jpg',
'./manifest.json'