From 577010e2aa5e487036e93338c6798ff131408f6a Mon Sep 17 00:00:00 2001 From: Lucas 'Paperboy' Rose-Winters Date: Tue, 21 Oct 2025 21:21:39 +1100 Subject: [PATCH 1/8] fix(mobile): move refresh button to top-right icon, fix tiny text issue MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add compact 36px circular icon button in user stats header (mobile only) - Hide full-width bottom button on mobile (<=1000px) - Fixes 1.1vw font-size being ~4px on mobile viewports - Fixes button blocking attributes at bottom - Desktop unchanged: keeps full-width button at bottom Mobile: [Avatar] [Name] | LVL [5] [🔄] Desktop: [🔄 Refresh RPG Info] at bottom --- index.js | 3 +- src/systems/rendering/userStats.js | 3 ++ src/systems/ui/layout.js | 7 +++-- style.css | 49 +++++++++++++++++++++++++++++- 4 files changed, 58 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 160c515..89839c3 100644 --- a/index.js +++ b/index.js @@ -297,7 +297,8 @@ async function initUI() { toggleAnimations(); }); - $('#rpg-manual-update').on('click', async function() { + // Bind to both desktop and mobile refresh buttons + $('#rpg-manual-update, #rpg-manual-update-mobile').on('click', async function() { if (!extensionSettings.enabled) { // console.log('[RPG Companion] Extension is disabled. Please enable it in the Extensions tab.'); return; diff --git a/src/systems/rendering/userStats.js b/src/systems/rendering/userStats.js index eed3789..5e59bac 100644 --- a/src/systems/rendering/userStats.js +++ b/src/systems/rendering/userStats.js @@ -61,6 +61,9 @@ export function renderUserStats() { | LVL ${extensionSettings.level} +
diff --git a/src/systems/ui/layout.js b/src/systems/ui/layout.js index 9993154..aff3fd5 100644 --- a/src/systems/ui/layout.js +++ b/src/systems/ui/layout.js @@ -267,10 +267,13 @@ export function applyPanelPosition() { */ export function updateGenerationModeUI() { if (extensionSettings.generationMode === 'together') { - // In "together" mode, manual update button is hidden + // In "together" mode, both update buttons are hidden $('#rpg-manual-update').hide(); + $('#rpg-manual-update-mobile').hide(); } else { - // In "separate" mode, manual update button is visible + // In "separate" mode, both update buttons are visible + // (CSS media queries will control which one is displayed) $('#rpg-manual-update').show(); + $('#rpg-manual-update-mobile').show(); } } diff --git a/style.css b/style.css index 8b906b1..08ac9f0 100644 --- a/style.css +++ b/style.css @@ -2670,7 +2670,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { } /* ============================================ - MANUAL UPDATE BUTTON + MANUAL UPDATE BUTTON (Desktop) ============================================ */ .rpg-manual-update-btn { width: 100%; @@ -2707,6 +2707,42 @@ body:has(.rpg-panel.rpg-position-left) #sheld { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } +/* ============================================ + REFRESH ICON BUTTON (Mobile) + ============================================ */ +.rpg-refresh-icon-btn { + display: none; /* Hidden by default, shown on mobile */ + width: 36px; + height: 36px; + 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; + cursor: pointer; + transition: all 0.3s ease; + align-items: center; + justify-content: center; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + flex-shrink: 0; +} + +.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); +} + +.rpg-refresh-icon-btn i { + pointer-events: none; +} + /* ============================================ SETTINGS BUTTON ============================================ */ @@ -3292,6 +3328,17 @@ body:has(.rpg-panel.rpg-position-left) #sheld { /* Mobile-specific panel behavior - matches SillyTavern's 1000px breakpoint */ /* CACHE BUST v2025-01-16 */ +/* Mobile: Show icon button, hide desktop button */ +@media (max-width: 1000px) { + .rpg-refresh-icon-btn { + display: flex !important; /* Show mobile icon button */ + } + + .rpg-manual-update-btn { + display: none !important; /* Hide desktop button */ + } +} + @media (max-width: 1000px) { /* ======================================== MOBILE PANEL FOUNDATION From dd392e50d11ecbfe1d6e5155a905c94ae3c6e8a0 Mon Sep 17 00:00:00 2001 From: Lucas 'Paperboy' Rose-Winters Date: Tue, 21 Oct 2025 21:27:20 +1100 Subject: [PATCH 2/8] fix(mobile): improve refresh button - float over all tabs, add animation, fix focus MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **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 --- index.js | 15 +++++++++++- src/systems/rendering/userStats.js | 3 --- style.css | 38 +++++++++++++++++++++++------- template.html | 5 ++++ 4 files changed, 48 insertions(+), 13 deletions(-) diff --git a/index.js b/index.js index 89839c3..ae21007 100644 --- a/index.js +++ b/index.js @@ -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() { diff --git a/src/systems/rendering/userStats.js b/src/systems/rendering/userStats.js index 5e59bac..eed3789 100644 --- a/src/systems/rendering/userStats.js +++ b/src/systems/rendering/userStats.js @@ -61,9 +61,6 @@ export function renderUserStats() { | LVL ${extensionSettings.level} -
diff --git a/style.css b/style.css index 08ac9f0..b6f1a99 100644 --- a/style.css +++ b/style.css @@ -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 ============================================ */ diff --git a/template.html b/template.html index 8d24685..1e3d842 100644 --- a/template.html +++ b/template.html @@ -54,6 +54,11 @@
+ + +
- - -