From babd2af345fff6e0df6272577fa6a5ab4ff5e687 Mon Sep 17 00:00:00 2001 From: Lucas 'Paperboy' Rose-Winters Date: Wed, 5 Nov 2025 10:47:58 +1100 Subject: [PATCH] feat: add compact mode to user info widget for better vertical scaling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Applied compact mode pattern to user info widget (avatar, name, level) to improve vertical fit at narrow widths (< 3 grid units). Changes: 1. style.css (lines 2040-2072): Added .rpg-user-info-compact class with size reductions: - Container padding: 0.5rem → 0.3rem (40% reduction) - Container gap: 0.75rem → 0.4rem / 0.5rem → 0.3rem (47%/40% reduction) - Avatar size: 2.5-3rem → 2rem (20-33% reduction) - Avatar border: 2px → 1.5px (thinner) - Avatar shadow: 0 0 8px → 0 0 4px (subtler) - Text gap: 0.2rem → 0.15rem (25% reduction) - User name font: 0.9rem → 0.75rem (17% reduction) - Level label font: 0.75rem → 0.65rem (13% reduction) - Level value font: 0.85rem → 0.75rem (12% reduction) - Level padding: 0.15/0.4rem → 0.1/0.3rem (25-33% reduction) 2. userInfoWidget.js (lines 156-161): - Added compact class logic: if (newW < 3) → add class - Removed inline avatar sizing (CSS handles via compact class) - Preserved existing vertical/horizontal layout switching Result: ~30-35% vertical space reduction at narrow widths while maintaining horizontal scaling. Matches compact mode pattern from scene info, inventory, and quests widgets. Fixes: User info widget poor vertical scaling at narrow widths --- .../dashboard/widgets/userInfoWidget.js | 19 ++++-- style.css | 66 ++++++++++++++----- 2 files changed, 64 insertions(+), 21 deletions(-) diff --git a/src/systems/dashboard/widgets/userInfoWidget.js b/src/systems/dashboard/widgets/userInfoWidget.js index 8b12a7d..d166181 100644 --- a/src/systems/dashboard/widgets/userInfoWidget.js +++ b/src/systems/dashboard/widgets/userInfoWidget.js @@ -153,24 +153,33 @@ export function registerUserInfoWidget(registry, dependencies) { const portrait = container.querySelector('.rpg-user-portrait'); if (!infoContainer) return; + // Apply compact mode class at narrow widths + if (newW < 3) { + infoContainer.classList.add('rpg-user-info-compact'); + } else { + infoContainer.classList.remove('rpg-user-info-compact'); + } + // Flexible hybrid layout based on width: // - 1 column (1x1, 1x2): Centered avatar with text below // - 2+ columns: Side-by-side (avatar left, text right) if (newW < 2) { - // Compact vertical layout: centered large avatar with text below + // Compact vertical layout: centered avatar with text below infoContainer.classList.add('rpg-layout-vertical'); infoContainer.classList.remove('rpg-layout-horizontal'); + // Avatar size handled by compact class if (portrait) { - portrait.style.width = '3rem'; - portrait.style.height = '3rem'; + portrait.style.width = ''; + portrait.style.height = ''; } } else { // Horizontal layout: avatar left, text right infoContainer.classList.add('rpg-layout-horizontal'); infoContainer.classList.remove('rpg-layout-vertical'); + // Avatar size handled by compact class if (portrait) { - portrait.style.width = '2.5rem'; - portrait.style.height = '2.5rem'; + portrait.style.width = ''; + portrait.style.height = ''; } } } diff --git a/style.css b/style.css index 0431586..26690b6 100644 --- a/style.css +++ b/style.css @@ -2037,6 +2037,40 @@ body:has(.rpg-panel.rpg-position-left) #sheld { background: var(--rpg-bg); } +/* Compact mode for narrow widths (< 3 grid units) */ +.rpg-user-info-compact { + padding: 0.3rem !important; + gap: 0.4rem !important; +} + +.rpg-user-info-compact.rpg-layout-vertical { + gap: 0.3rem !important; +} + +.rpg-user-info-compact .rpg-user-portrait { + width: 2rem !important; + height: 2rem !important; + border-width: 1.5px !important; + box-shadow: 0 0 4px var(--rpg-highlight) !important; +} + +.rpg-user-info-compact .rpg-user-info-text { + gap: 0.15rem !important; +} + +.rpg-user-info-compact .rpg-user-name { + font-size: 0.75rem !important; +} + +.rpg-user-info-compact .rpg-level-label { + font-size: 0.65rem !important; +} + +.rpg-user-info-compact .rpg-level-value { + font-size: 0.75rem !important; + padding: 0.1rem 0.3rem !important; +} + /* Stat bars - rem for text, vh for bar height */ .rpg-widget .rpg-stat-label { font-size: 0.75rem; @@ -2779,36 +2813,36 @@ body:has(.rpg-panel.rpg-position-left) #sheld { overflow: visible; } -/* Compact mode for narrow desktop widths - mirrors mobile sizing */ +/* Compact mode for narrow desktop widths - mirrors extra-small mobile sizing (<340px) */ .rpg-scene-info-compact .rpg-scene-info-grid { - gap: 0.3125rem !important; - padding: 0.3125rem !important; + gap: 0.25rem !important; + padding: 0.25rem !important; } .rpg-scene-info-compact .rpg-info-item { - padding: 0.3125rem !important; - gap: 0.3125rem !important; - border-radius: 0.3125rem !important; + padding: 0.25rem !important; + gap: 0.25rem !important; + border-radius: 0.25rem !important; } .rpg-scene-info-compact .rpg-info-item .item-icon { - font-size: 1rem !important; + font-size: 0.9375rem !important; } .rpg-scene-info-compact .rpg-info-item .item-value { - font-size: 0.8125rem !important; -} - -.rpg-scene-info-compact .rpg-info-item .item-label { - font-size: 0.625rem !important; -} - -.rpg-scene-info-compact .rpg-info-location .item-value { font-size: 0.75rem !important; } +.rpg-scene-info-compact .rpg-info-item .item-label { + font-size: 0.5625rem !important; +} + +.rpg-scene-info-compact .rpg-info-location .item-value { + font-size: 0.6875rem !important; +} + .rpg-scene-info-compact .rpg-info-location .item-label { - font-size: 0.625rem !important; + font-size: 0.5625rem !important; } /* Mobile responsive (max-width: 1000px) */