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;
|
||||
height: calc(100dvh - var(--topBarBlockSize)) !important;
|
||||
|
||||
/* Start off-screen to the right */
|
||||
transform: translateX(100%) !important;
|
||||
transition: transform 0.3s ease-in-out !important;
|
||||
/* Hidden by default - completely removed from layout */
|
||||
display: none !important;
|
||||
|
||||
overflow-y: auto !important;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
@@ -3051,10 +3050,21 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
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 {
|
||||
transform: translateX(0) !important;
|
||||
display: block !important;
|
||||
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 */
|
||||
|
||||
Reference in New Issue
Block a user