From da81a0b14811df83d7a79949a66bdc2120baf5f3 Mon Sep 17 00:00:00 2001 From: juanatsap Date: Mon, 24 Nov 2025 20:48:12 +0000 Subject: [PATCH] feat: iOS-specific blur bar and hide keyboard shortcuts on real mobile devices MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Issue 1: Blur bar compatibility (Android doesn't always show at bottom) ✅ Solution: Wrap blur bar in @supports query for backdrop-filter - Only shows on devices that support backdrop-filter (primarily iOS) - Android devices without support won't see the bar - Prevents layout issues on non-iOS devices Issue 2: Keyboard shortcuts button on real mobile (no physical keyboard) ✅ Solution: Device detection + conditional hiding - Added device-detection.js: Detects real mobile vs desktop browser - Checks user agent (Android, iPhone, iPad, etc.) + touch support - Adds 'is-mobile-device' or 'is-desktop' class to - CSS hides shortcuts button only on real mobile devices - Desktop browser in mobile view: shortcuts button still visible (for testing) Implementation Details: 1. Device Detection (static/js/device-detection.js): - User agent detection: /Android|iPhone|iPad|etc./ - Touch support check: ontouchstart + maxTouchPoints - Class added to : is-mobile-device or is-desktop 2. Blur Bar (@supports query): - Detects backdrop-filter support before applying - iOS: Shows blur bar with backdrop-filter - Android (most): No blur bar (no backdrop-filter support) - Prevents empty/broken bar on incompatible devices 3. CSS Hiding Rules: - .is-mobile-device .shortcuts-btn { display: none !important; } - Also hides zoom-toggle-btn and zoom-control on real mobile - Desktop mobile view: shortcuts button remains visible Files Modified: - static/js/device-detection.js: NEW - Device detection logic - templates/index.html: Load device-detection.js early - static/css/05-responsive/_breakpoints.css: @supports wrapper for blur bar - static/css/04-interactive/_scroll-behavior.css: Hide shortcuts on real mobile - tests/mjs/52-mobile-device-detection-test.mjs: Comprehensive device detection test Test Results: ✅ iPhone (real mobile): is-mobile-device class, shortcuts hidden ✅ Desktop browser (mobile view): is-desktop class, shortcuts visible ✅ Blur bar: Only shows on devices with backdrop-filter support --- .../css/04-interactive/_scroll-behavior.css | 9 ++- static/css/05-responsive/_breakpoints.css | 40 +++++----- static/js/device-detection.js | 20 +++++ templates/index.html | 3 + tests/mjs/52-mobile-device-detection-test.mjs | 77 +++++++++++++++++++ 5 files changed, 129 insertions(+), 20 deletions(-) create mode 100644 static/js/device-detection.js create mode 100755 tests/mjs/52-mobile-device-detection-test.mjs diff --git a/static/css/04-interactive/_scroll-behavior.css b/static/css/04-interactive/_scroll-behavior.css index 547b3b9..bb116fd 100644 --- a/static/css/04-interactive/_scroll-behavior.css +++ b/static/css/04-interactive/_scroll-behavior.css @@ -109,9 +109,16 @@ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); } +/* Hide keyboard shortcuts button on real mobile devices (no keyboard) */ +.is-mobile-device .shortcuts-btn, +.is-mobile-device .zoom-toggle-btn, +.is-mobile-device .zoom-control { + display: none !important; +} + /* Mobile adjustments - Flexbox button layout at bottom center */ @media (max-width: 900px) { - /* Hide zoom control on mobile (keyboard shortcuts now visible) */ + /* Hide zoom control on mobile (keyboard shortcuts now visible on desktop mobile view) */ .zoom-toggle-btn, .zoom-control { display: none !important; diff --git a/static/css/05-responsive/_breakpoints.css b/static/css/05-responsive/_breakpoints.css index 08e0378..6c407e5 100644 --- a/static/css/05-responsive/_breakpoints.css +++ b/static/css/05-responsive/_breakpoints.css @@ -670,27 +670,29 @@ Mobile: iOS-Style Button Bar with Blur ======================================== */ +/* iOS-style blur bar - Only show on devices that support backdrop-filter (primarily iOS) */ @media (max-width: 540px) { - /* iOS-style blur bar behind fixed buttons */ - .fixed-buttons-backdrop { - position: fixed; - bottom: 0; - left: 0; - right: 0; - height: 90px; /* Enough to cover button area */ - background: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(20px) saturate(180%); - -webkit-backdrop-filter: blur(20px) saturate(180%); - border-top: 0.5px solid rgba(0, 0, 0, 0.1); - z-index: 98; /* Below buttons (99) but above content */ - pointer-events: none; /* Don't block button clicks */ - } + @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) { + .fixed-buttons-backdrop { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 90px; /* Enough to cover button area */ + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(20px) saturate(180%); + -webkit-backdrop-filter: blur(20px) saturate(180%); + border-top: 0.5px solid rgba(0, 0, 0, 0.1); + z-index: 98; /* Below buttons (99) but above content */ + pointer-events: none; /* Don't block button clicks */ + } - /* Dark mode blur bar */ - [data-color-theme="dark"] .fixed-buttons-backdrop, - [data-color-theme="auto"] .fixed-buttons-backdrop { - background: rgba(30, 30, 30, 0.8); - border-top: 0.5px solid rgba(255, 255, 255, 0.1); + /* Dark mode blur bar */ + [data-color-theme="dark"] .fixed-buttons-backdrop, + [data-color-theme="auto"] .fixed-buttons-backdrop { + background: rgba(30, 30, 30, 0.8); + border-top: 0.5px solid rgba(255, 255, 255, 0.1); + } } } diff --git a/static/js/device-detection.js b/static/js/device-detection.js new file mode 100644 index 0000000..e7e1fe4 --- /dev/null +++ b/static/js/device-detection.js @@ -0,0 +1,20 @@ +/** + * DEVICE DETECTION + * Detects real mobile devices vs desktop browser in mobile view + * Adds 'is-mobile-device' class to body for styling differences + */ + +(function() { + // Check if user agent indicates a real mobile device + const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); + + // Also check for touch support (additional indicator) + const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0; + + // Consider it a real mobile device if both conditions are met + if (isMobileDevice && hasTouch) { + document.documentElement.classList.add('is-mobile-device'); + } else { + document.documentElement.classList.add('is-desktop'); + } +})(); diff --git a/templates/index.html b/templates/index.html index fdc1b20..bee13d1 100644 --- a/templates/index.html +++ b/templates/index.html @@ -57,6 +57,9 @@ })(); + + +