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
src/systems/dashboard/widgets/userInfoWidget.js
+14 -5
View File
@@ -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 = '';
}
}
}