refactor: use display toggle instead of transform for mobile panel
Replaced transform-based off-screen positioning with display toggle for cleaner, simpler mobile panel behavior: CSS changes: - Replace transform: translateX(100%) with display: none (closed state) - Panel completely removed from layout when closed - Add display: block when rpg-mobile-open class applied - Use CSS animation for smooth slide-in effect on open - Create @keyframes rpgSlideInFromRight for 0.3s ease-in-out Benefits: 1. Panel doesn't affect viewport/layout when closed 2. No need for overflow-x: hidden hacks 3. Simpler implementation - just toggle display property 4. Better performance - browser doesn't track hidden element 5. Still has smooth slide-in animation via CSS @keyframes JavaScript: - No changes needed - already toggles rpg-mobile-open class correctly - Display changes happen automatically via CSS Trade-off: - Slide-out animation on close is instant (could add if desired) - But this is acceptable and matches many mobile UX patterns Result: Mobile panel cleanly appears/disappears without viewport issues or layout side effects. Much simpler and more robust solution.
This commit is contained in:
@@ -3036,9 +3036,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
|||||||
max-width: 400px !important;
|
max-width: 400px !important;
|
||||||
height: calc(100dvh - var(--topBarBlockSize)) !important;
|
height: calc(100dvh - var(--topBarBlockSize)) !important;
|
||||||
|
|
||||||
/* Start off-screen to the right */
|
/* Hidden by default - completely removed from layout */
|
||||||
transform: translateX(100%) !important;
|
display: none !important;
|
||||||
transition: transform 0.3s ease-in-out !important;
|
|
||||||
|
|
||||||
overflow-y: auto !important;
|
overflow-y: auto !important;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
@@ -3051,10 +3050,21 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
|||||||
box-shadow: -5px 0 20px var(--rpg-shadow);
|
box-shadow: -5px 0 20px var(--rpg-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Show panel when opened - slides in from right */
|
/* Show panel when opened with slide-in animation */
|
||||||
.rpg-panel.rpg-mobile-open {
|
.rpg-panel.rpg-mobile-open {
|
||||||
transform: translateX(0) !important;
|
display: block !important;
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
|
animation: rpgSlideInFromRight 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Slide-in animation from right */
|
||||||
|
@keyframes rpgSlideInFromRight {
|
||||||
|
from {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Disable collapsed state on mobile */
|
/* Disable collapsed state on mobile */
|
||||||
|
|||||||
Reference in New Issue
Block a user