fix: correct mobile FAB chevron direction and reposition to left side

- Fix inverted chevron logic: show left arrow when panel open, right arrow when closed
- Move FAB button from right to left side of screen (12px from left edge)
- Adjust vertical position down by 30px for better placement
- Update console logging to reflect correct icon states
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-16 10:27:17 +11:00
parent 9a653a9c7a
commit b73f6d31bc
2 changed files with 8 additions and 8 deletions
+5 -5
View File
@@ -1686,14 +1686,14 @@ function updateCollapseToggleIcon() {
console.log('[RPG Mobile] updateCollapseToggleIcon:', { console.log('[RPG Mobile] updateCollapseToggleIcon:', {
isMobile: true, isMobile: true,
isOpen, isOpen,
settingIcon: isOpen ? 'chevron-right' : 'chevron-left' settingIcon: isOpen ? 'chevron-left' : 'chevron-right'
}); });
if (isOpen) { if (isOpen) {
// Panel open - chevron points right (to close/slide right) // Panel open - chevron points left (to close/slide back right)
$icon.removeClass('fa-chevron-down fa-chevron-up fa-chevron-left').addClass('fa-chevron-right');
} else {
// Panel closed - chevron points left (to open/slide left)
$icon.removeClass('fa-chevron-down fa-chevron-up fa-chevron-right').addClass('fa-chevron-left'); $icon.removeClass('fa-chevron-down fa-chevron-up fa-chevron-right').addClass('fa-chevron-left');
} else {
// Panel closed - chevron points right (to open/slide in from right)
$icon.removeClass('fa-chevron-down fa-chevron-up fa-chevron-left').addClass('fa-chevron-right');
} }
} else { } else {
// Desktop: icon direction based on panel position and collapsed state // Desktop: icon direction based on panel position and collapsed state
+3 -3
View File
@@ -3068,9 +3068,9 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: fixed !important; position: fixed !important;
top: calc(var(--topBarBlockSize) + 60px) !important; top: calc(var(--topBarBlockSize) + 120px) !important;
right: 12px !important; left: 12px !important;
left: auto !important; right: auto !important;
width: 44px; width: 44px;
height: 44px; height: 44px;
min-width: 44px; min-width: 44px;