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