kennethreitz/kjvstudy.org
1
0
Fork 0
mirror of https://github.com/kennethreitz/kjvstudy.org.git synced 2026-06-05 23:00:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve sidebar handling for iPad and tablet devices

Browse Source 
AI:

Improve sidebar handling for iPad and tablet devices

Better hardware acceleration and visual transitions for mobile
devices, with iPad-specific detection and styling to prevent
rendering issues when opening/closing the sidebar.
This commit is contained in:
Kenneth Reitz
2025-05-26 17:08:03 -04:00
parent a802b7f6aa
commit 75f2b30788
1 changed files with 47 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
kjvstudy_org/static/app.js
+47 -4
View File
@@ -346,9 +346,45 @@ class KJVStudy {
const isIPad = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
if (isTablet) {
mainContent.style.opacity = '0.4';
if (isOpen) {
sidebar.classList.remove('open');
overlay.classList.remove('open');
document.body.style.overflow = '';
// Force hardware acceleration to prevent rendering issues
if (isTablet || isIPad) {
sidebar.style.transform = 'translate3d(-240px, 0, 0)';
sidebar.style.webkitTransform = 'translate3d(-240px, 0, 0)';
} else {
sidebar.style.transform = 'translate3d(-100%, 0, 0)';
sidebar.style.webkitTransform = 'translate3d(-100%, 0, 0)';
}
// Ensure main content is fully visible
mainContent.style.filter = 'none';
mainContent.style.opacity = '1';
mainContent.style.pointerEvents = 'auto';
if (isTablet || isIPad) {
// Reset any iPad-specific styles
mainContent.style.marginLeft = '0';
mainContent.style.width = '100%';
}
} else {
sidebar.classList.add('open');
overlay.classList.add('open');
document.body.style.overflow = 'hidden';
// Force hardware acceleration
sidebar.style.transform = 'translate3d(0, 0, 0)';
sidebar.style.webkitTransform = 'translate3d(0, 0, 0)';
// Handle iPad/tablet specific behavior
if (isTablet || isIPad) {
mainContent.style.opacity = '0.8';
mainContent.style.pointerEvents = 'none';
mainContent.style.marginLeft = '0';
mainContent.style.width = '100%';
}
}
}
@@ -484,16 +520,23 @@ function toggleSidebar() {
// Handle iPad specific issues
const isTablet = window.innerWidth >= 768 && window.innerWidth <= 1024;
if (isTablet) {
const isIPad = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
if (isTablet || isIPad) {
const sidebar = document.getElementById('sidebar');
const mainContent = document.querySelector('.main-content');
if (sidebar.classList.contains('open')) {
mainContent.style.opacity = '0.4';
mainContent.style.opacity = '0.8';
mainContent.style.pointerEvents = 'none';
mainContent.style.marginLeft = '0';
mainContent.style.width = '100%';
} else {
mainContent.style.opacity = '1';
mainContent.style.pointerEvents = 'auto';
mainContent.style.marginLeft = '0';
mainContent.style.width = '100%';
}
}
}