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:
Lucas 'Paperboy' Rose-Winters
2025-10-21 21:27:20 +11:00
parent 577010e2aa
commit dd392e50d1
4 changed files with 48 additions and 13 deletions
+29 -9
View File
@@ -2708,41 +2708,61 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
}
/* ============================================
REFRESH ICON BUTTON (Mobile)
REFRESH ICON BUTTON (Mobile - Floating)
============================================ */
.rpg-refresh-icon-btn {
display: none; /* Hidden by default, shown on mobile */
width: 36px;
height: 36px;
position: absolute;
top: 10px;
right: 10px;
width: 44px; /* Touch-friendly size */
height: 44px;
padding: 0;
margin-left: auto; /* Push to right side */
background: var(--rpg-highlight);
border: 2px solid var(--rpg-highlight);
border-radius: 50%;
color: var(--rpg-text);
font-size: 0.875rem;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
transition: transform 0.2s ease, box-shadow 0.2s ease;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
z-index: 100; /* Float above content */
}
/* Remove focus outline (prevents black state) */
.rpg-refresh-icon-btn:focus {
outline: none;
}
.rpg-refresh-icon-btn:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px var(--rpg-highlight);
background: var(--rpg-accent);
}
.rpg-refresh-icon-btn:active {
transform: scale(0.95);
}
/* Spinning animation when refreshing */
.rpg-refresh-icon-btn.spinning i {
animation: rpg-spin 0.8s linear infinite;
}
.rpg-refresh-icon-btn i {
pointer-events: none;
}
@keyframes rpg-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ============================================
SETTINGS BUTTON
============================================ */