Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add compact mode to user info widget for better vertical scaling

Browse Source 
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
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-11-05 10:47:58 +11:00
parent e055c6d112
commit babd2af345
2 changed files with 64 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+50 -16
View File
@@ -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) */