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

feat: redesign user info widget with avatar background overlay

Browse Source 
Changed from avatar + text layout to avatar as background with text overlay.

Previous approach: Tried horizontal/vertical layouts which caused either
horizontal or vertical scrollbars at narrow widths (w:1 h:1).

New approach: Avatar fills entire widget as background-image, name + level
display as centered overlay with semi-transparent backdrop and blur effect
for readability. Uses background-size: contain to show full avatar without
cropping.

Benefits:
- No layout conflicts - works at any widget size
- No scrollbars (horizontal or vertical)
- Full avatar visible without cropping
- Visually interesting design
- Simpler code (no layout switching logic)

Changes:
- userInfoWidget.js: Avatar set as background-image with contain sizing
- userInfoWidget.js: Simplified onResize (removed layout switching)
- style.css: Container uses background-image with gradient overlay
- style.css: Text container has backdrop-filter blur + dark background
- style.css: Simplified compact mode (no portrait/layout-specific rules)
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-11-05 12:49:55 +11:00
parent 8e15ce3b6a
commit 2ed7133566
2 changed files with 34 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/systems/dashboard/widgets/userInfoWidget.js
+7 -30
View File
@@ -82,10 +82,13 @@ export function registerUserInfoWidget(registry, dependencies) {
...config
};
// Build HTML with flexible layout structure
// Build HTML with avatar as background and text overlay
const backgroundStyle = finalConfig.showAvatar ?
`background-image: url('${userPortrait}'); background-size: contain; background-position: center; background-repeat: no-repeat;` :
'';
const html = `
<div class="rpg-user-info-container">
${finalConfig.showAvatar ? `<img src="${userPortrait}" alt="${userName}" class="rpg-user-portrait" onerror="this.style.opacity='0.5';this.onerror=null;" />` : ''}
<div class="rpg-user-info-container" style="${backgroundStyle}">
<div class="rpg-user-info-text">
${finalConfig.showName ? `<div class="rpg-user-name">${userName}</div>` : ''}
${finalConfig.showLevel ? `
@@ -150,40 +153,14 @@ export function registerUserInfoWidget(registry, dependencies) {
*/
onResize(container, newW, newH) {
const infoContainer = container.querySelector('.rpg-user-info-container');
const portrait = container.querySelector('.rpg-user-portrait');
if (!infoContainer) return;
// Apply compact mode class at narrow widths
// Apply compact mode class at narrow widths for smaller text
if (newW < 3) {
infoContainer.classList.add('rpg-user-info-compact');
} else {
infoContainer.classList.remove('rpg-user-info-compact');
}
// Flexible hybrid layout based on width:
// - Ultra-narrow (< 1): Centered avatar with text below (rare)
// - 1+ columns: Side-by-side (avatar left, text right)
// Keep horizontal layout even at w:1 to minimize vertical space usage
if (newW < 1) {
// Ultra-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 = '';
portrait.style.height = '';
}
} else {
// Horizontal layout: avatar left, text right
// This layout works at w:1 and uses less vertical space (~42px vs ~76px)
infoContainer.classList.add('rpg-layout-horizontal');
infoContainer.classList.remove('rpg-layout-vertical');
// Avatar size handled by compact class
if (portrait) {
portrait.style.width = '';
portrait.style.height = '';
}
}
}
});
}