fix(mobile): improve refresh button - float over all tabs, add animation, fix focus
**Changes:**
1. Move button to float over all tabs (not just Stats)
- Removed from userStats.js HTML
- Added to template.html as floating absolute element
- Now visible on Status, Info, and Inventory tabs
2. Fix sticky black focus state
- Added :focus { outline: none } to CSS
- Call blur() after click to clear focus immediately
3. Add refresh animation
- Button spins during updateRPGData() call
- Smooth 0.8s rotation with @keyframes
- Uses .spinning class added/removed in JS
4. Improve theming and positioning
- Positioned absolute top-right (10px, 10px)
- Increased to 44px for better touch target
- z-index: 100 to float above content
- Already uses theme colors (--rpg-highlight, --rpg-text)
Mobile UX now:
✅ Button visible on all tabs (floating)
✅ Spins smoothly when refreshing
✅ No sticky black state after tap
✅ Properly themed across all themes
This commit is contained in:
@@ -303,7 +303,20 @@ async function initUI() {
|
||||
// console.log('[RPG Companion] Extension is disabled. Please enable it in the Extensions tab.');
|
||||
return;
|
||||
}
|
||||
await updateRPGData(renderUserStats, renderInfoBox, renderThoughts, renderInventory);
|
||||
|
||||
// Remove focus to prevent sticky black state on mobile
|
||||
$(this).blur();
|
||||
|
||||
// Add spinning animation to mobile button
|
||||
const $mobileBtn = $('#rpg-manual-update-mobile');
|
||||
$mobileBtn.addClass('spinning');
|
||||
|
||||
try {
|
||||
await updateRPGData(renderUserStats, renderInfoBox, renderThoughts, renderInventory);
|
||||
} finally {
|
||||
// Remove spinning animation when done
|
||||
$mobileBtn.removeClass('spinning');
|
||||
}
|
||||
});
|
||||
|
||||
$('#rpg-stat-bar-color-low').on('change', function() {
|
||||
|
||||
Reference in New Issue
Block a user