fix(modal): enable smooth desktop vertical scrolling on camera detail modal (v19)
This commit is contained in:
+44
-8
@@ -2018,8 +2018,34 @@ body {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
max-height: 88vh;
|
||||
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 {
|
||||
@@ -2034,11 +2060,12 @@ body {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
background: rgba(7, 9, 14, 0.5);
|
||||
background: rgba(10, 15, 29, 0.94);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: 20;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.modal-agency-name {
|
||||
@@ -2659,6 +2686,10 @@ body {
|
||||
padding-bottom: max(20px, env(safe-area-inset-bottom)) !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;
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
overscroll-behavior: contain !important;
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
}
|
||||
|
||||
@keyframes sheet-slide-up {
|
||||
@@ -2946,15 +2977,20 @@ body {
|
||||
========================================================================== */
|
||||
|
||||
.hardware-proof-dialog {
|
||||
max-width: 580px;
|
||||
max-width: 620px;
|
||||
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);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(56, 189, 248, 0.25);
|
||||
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);
|
||||
overflow: hidden;
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden;
|
||||
overscroll-behavior: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.cam-verification-badge {
|
||||
|
||||
+6
-6
@@ -54,7 +54,7 @@
|
||||
<meta name="apple-mobile-web-app-title" content="FlockRadar">
|
||||
|
||||
<!-- Main Stylesheet -->
|
||||
<link rel="stylesheet" href="css/styles.css?v=18">
|
||||
<link rel="stylesheet" href="css/styles.css?v=19">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -1299,11 +1299,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=18"></script>
|
||||
<script src="js/icons.js?v=18"></script>
|
||||
<script src="js/auth.js?v=18"></script>
|
||||
<script src="js/radar.js?v=18"></script>
|
||||
<script src="js/app.js?v=18"></script>
|
||||
<script src="data/portals.js?v=19"></script>
|
||||
<script src="js/icons.js?v=19"></script>
|
||||
<script src="js/auth.js?v=19"></script>
|
||||
<script src="js/radar.js?v=19"></script>
|
||||
<script src="js/app.js?v=19"></script>
|
||||
|
||||
<!-- Service Worker Instant Cache Invalidation -->
|
||||
<script>
|
||||
|
||||
@@ -1625,6 +1625,8 @@
|
||||
window.history.replaceState({}, document.title, window.location.pathname);
|
||||
} else if (urlParams.get('modal') === 'support' || window.location.hash === '#support') {
|
||||
setTimeout(openSupportModal, 300);
|
||||
} else if (urlParams.get('cam')) {
|
||||
setTimeout(() => openCameraHardwareProof(urlParams.get('cam')), 350);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1902,6 +1904,7 @@
|
||||
|
||||
// Show modal
|
||||
if (el.cameraDetailModal) {
|
||||
el.cameraDetailModal.scrollTop = 0;
|
||||
if (typeof el.cameraDetailModal.showModal === 'function') {
|
||||
el.cameraDetailModal.showModal();
|
||||
} else {
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
// Service Worker for FlockRadar Offline Driving & Live Updates
|
||||
const CACHE_NAME = 'flockradar-v18';
|
||||
const CACHE_NAME = 'flockradar-v19';
|
||||
const ASSETS_TO_CACHE = [
|
||||
'./',
|
||||
'./index.html',
|
||||
'./css/styles.css?v=18',
|
||||
'./js/icons.js?v=18',
|
||||
'./js/app.js?v=18',
|
||||
'./js/auth.js?v=18',
|
||||
'./js/radar.js?v=18',
|
||||
'./data/portals.js?v=18',
|
||||
'./favicon.svg?v=18',
|
||||
'./favicon.ico?v=18',
|
||||
'./apple-touch-icon.png?v=18',
|
||||
'./icon-192.png?v=18',
|
||||
'./icon-512.png?v=18',
|
||||
'./og-image.png?v=18',
|
||||
'./css/styles.css?v=19',
|
||||
'./js/icons.js?v=19',
|
||||
'./js/app.js?v=19',
|
||||
'./js/auth.js?v=19',
|
||||
'./js/radar.js?v=19',
|
||||
'./data/portals.js?v=19',
|
||||
'./favicon.svg?v=19',
|
||||
'./favicon.ico?v=19',
|
||||
'./apple-touch-icon.png?v=19',
|
||||
'./icon-192.png?v=19',
|
||||
'./icon-512.png?v=19',
|
||||
'./og-image.png?v=19',
|
||||
'./assets/img/logo.svg',
|
||||
'./assets/img/flock_pole_cam_palmdale.jpg',
|
||||
'./manifest.json'
|
||||
|
||||
Reference in New Issue
Block a user