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

fix(modal): enable smooth desktop vertical scrolling on camera detail modal (v19)

Browse Source
This commit is contained in:
Mediusa
2026-09-12 11:23:19 -07:00
parent 2785782f7d
commit 5da020d563
4 changed files with 66 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+44 -8
View File
@@ -2018,8 +2018,34 @@ body {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
max-height: 90vh; max-height: 88vh;
overflow-y: auto; max-height: 88dvh;
overflow-y: auto !important;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.agency-dialog::-webkit-scrollbar,
.hardware-proof-dialog::-webkit-scrollbar {
width: 8px;
}
.agency-dialog::-webkit-scrollbar-track,
.hardware-proof-dialog::-webkit-scrollbar-track {
background: rgba(15, 23, 42, 0.6);
border-radius: 4px;
}
.agency-dialog::-webkit-scrollbar-thumb,
.hardware-proof-dialog::-webkit-scrollbar-thumb {
background: rgba(56, 189, 248, 0.35);
border-radius: 4px;
}
.agency-dialog::-webkit-scrollbar-thumb:hover,
.hardware-proof-dialog::-webkit-scrollbar-thumb:hover {
background: rgba(56, 189, 248, 0.65);
} }
.agency-dialog::backdrop { .agency-dialog::backdrop {
@@ -2034,11 +2060,12 @@ body {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
background: rgba(7, 9, 14, 0.5); background: rgba(10, 15, 29, 0.94);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 10; z-index: 20;
backdrop-filter: blur(8px); backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
} }
.modal-agency-name { .modal-agency-name {
@@ -2659,6 +2686,10 @@ body {
padding-bottom: max(20px, env(safe-area-inset-bottom)) !important; padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.85) !important; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.85) !important;
animation: sheet-slide-up 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; animation: sheet-slide-up 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
} }
@keyframes sheet-slide-up { @keyframes sheet-slide-up {
@@ -2946,15 +2977,20 @@ body {
========================================================================== */ ========================================================================== */
.hardware-proof-dialog { .hardware-proof-dialog {
max-width: 580px; max-width: 620px;
width: 92vw; width: 92vw;
background: rgba(15, 23, 42, 0.95); max-height: 88vh;
max-height: 88dvh;
background: rgba(15, 23, 42, 0.96);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(56, 189, 248, 0.25); border: 1px solid rgba(56, 189, 248, 0.25);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(6, 182, 212, 0.15); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(6, 182, 212, 0.15);
overflow: hidden; overflow-y: auto !important;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
} }
.cam-verification-badge { .cam-verification-badge {
index.html
+6 -6
View File
@@ -54,7 +54,7 @@
<meta name="apple-mobile-web-app-title" content="FlockRadar"> <meta name="apple-mobile-web-app-title" content="FlockRadar">
<!-- Main Stylesheet --> <!-- Main Stylesheet -->
<link rel="stylesheet" href="css/styles.css?v=18"> <link rel="stylesheet" href="css/styles.css?v=19">
</head> </head>
<body> <body>
@@ -1299,11 +1299,11 @@
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script> <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 --> <!-- Data & Application Logic with Cache Busting -->
<script src="data/portals.js?v=18"></script> <script src="data/portals.js?v=19"></script>
<script src="js/icons.js?v=18"></script> <script src="js/icons.js?v=19"></script>
<script src="js/auth.js?v=18"></script> <script src="js/auth.js?v=19"></script>
<script src="js/radar.js?v=18"></script> <script src="js/radar.js?v=19"></script>
<script src="js/app.js?v=18"></script> <script src="js/app.js?v=19"></script>
<!-- Service Worker Instant Cache Invalidation --> <!-- Service Worker Instant Cache Invalidation -->
<script> <script>
js/radar.js
+3
View File
@@ -1625,6 +1625,8 @@
window.history.replaceState({}, document.title, window.location.pathname); window.history.replaceState({}, document.title, window.location.pathname);
} else if (urlParams.get('modal') === 'support' || window.location.hash === '#support') { } else if (urlParams.get('modal') === 'support' || window.location.hash === '#support') {
setTimeout(openSupportModal, 300); setTimeout(openSupportModal, 300);
} else if (urlParams.get('cam')) {
setTimeout(() => openCameraHardwareProof(urlParams.get('cam')), 350);
} }
} }
@@ -1902,6 +1904,7 @@
// Show modal // Show modal
if (el.cameraDetailModal) { if (el.cameraDetailModal) {
el.cameraDetailModal.scrollTop = 0;
if (typeof el.cameraDetailModal.showModal === 'function') { if (typeof el.cameraDetailModal.showModal === 'function') {
el.cameraDetailModal.showModal(); el.cameraDetailModal.showModal();
} else { } else {
sw.js
+13 -13
View File
@@ -1,20 +1,20 @@
// Service Worker for FlockRadar Offline Driving & Live Updates // Service Worker for FlockRadar Offline Driving & Live Updates
const CACHE_NAME = 'flockradar-v18'; const CACHE_NAME = 'flockradar-v19';
const ASSETS_TO_CACHE = [ const ASSETS_TO_CACHE = [
'./', './',
'./index.html', './index.html',
'./css/styles.css?v=18', './css/styles.css?v=19',
'./js/icons.js?v=18', './js/icons.js?v=19',
'./js/app.js?v=18', './js/app.js?v=19',
'./js/auth.js?v=18', './js/auth.js?v=19',
'./js/radar.js?v=18', './js/radar.js?v=19',
'./data/portals.js?v=18', './data/portals.js?v=19',
'./favicon.svg?v=18', './favicon.svg?v=19',
'./favicon.ico?v=18', './favicon.ico?v=19',
'./apple-touch-icon.png?v=18', './apple-touch-icon.png?v=19',
'./icon-192.png?v=18', './icon-192.png?v=19',
'./icon-512.png?v=18', './icon-512.png?v=19',
'./og-image.png?v=18', './og-image.png?v=19',
'./assets/img/logo.svg', './assets/img/logo.svg',
'./assets/img/flock_pole_cam_palmdale.jpg', './assets/img/flock_pole_cam_palmdale.jpg',
'./manifest.json' './manifest.json'