feat: implement responsive dashboard layout with column-aware widget sizing
**Status Tab Layout Changes:** - User Info widget: 1x2 vertical (left column) instead of 2x1 horizontal - User Stats widget: scales from 1x3 (narrow) to 2x3 (wide) - User Mood widget: 1x1 positioned below User Info - User Attributes widget: scales from 2x4 (narrow) to 3x4 (wide), full width **Technical Changes:** - Update widget definitions to use column-aware defaultSize() functions - userInfoWidget: Returns 1x2 for desktop, 1x1 for mobile - userStatsWidget: Returns 1x3 for 2 cols, 2x3 for 3+ cols - userAttributesWidget: Returns 2x4 for 2 cols, 3x4 for 3+ cols - Remove autoLayout from resetLayout() to preserve default positions - Add resetWidgetSizesToDefault() to apply column-aware sizes - Update CSS for 1x1 compact avatar (round) and 1x2 wide avatar layouts **User Info Widget Improvements:** - 1x2 layout: Horizontal split with name left, level right over avatar - 1x1 layout: Round avatar with bottom nameplate (flush positioning) - Transparent glass-style backgrounds for better avatar visibility - Proper aspect-ratio for circular avatar in compact mode **Result:** - Widgets scale intelligently based on panel width (2-4 columns) - Desktop users get larger, more spacious layouts - Mobile/narrow screens get efficient vertical stacking - Reset Layout respects custom positions while applying responsive sizes - Window resize triggers autoLayout via ResizeObserver for reflow
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
@@ -1562,7 +1562,8 @@ export class DashboardManager {
|
||||
// Skip initial switch in applyDashboardConfig since we'll switch after layout calculations
|
||||
this.applyDashboardConfig(this.defaultLayout, { skipInitialSwitch: true });
|
||||
|
||||
// Reset all widgets to default sizes
|
||||
// Apply column-aware widget sizes from widget definitions
|
||||
// This makes widgets scale properly based on screen width (2-4 columns)
|
||||
const allWidgets = [];
|
||||
this.dashboard.tabs.forEach(tab => {
|
||||
if (tab.widgets && tab.widgets.length > 0) {
|
||||
@@ -1571,13 +1572,10 @@ export class DashboardManager {
|
||||
});
|
||||
this.resetWidgetSizesToDefault(allWidgets);
|
||||
|
||||
// Auto-layout each tab to prevent overlap (default positions may have changed)
|
||||
this.dashboard.tabs.forEach(tab => {
|
||||
if (tab.widgets && tab.widgets.length > 0) {
|
||||
console.log(`[DashboardManager] Auto-laying out tab "${tab.name}" (${tab.widgets.length} widgets)`);
|
||||
this.gridEngine.autoLayout(tab.widgets, { preserveOrder: true });
|
||||
}
|
||||
});
|
||||
// Don't call autoLayout - preserve positions from defaultLayout.js
|
||||
// Widget definitions now have column-aware sizes (defaultSize returns correct size for column count)
|
||||
// ResizeObserver will handle column changes and trigger autoLayout when screen resizes
|
||||
console.log('[DashboardManager] Using column-aware sizes from widget definitions, preserving positions from defaultLayout.js');
|
||||
|
||||
// Force re-render tabs
|
||||
this.renderTabs();
|
||||
|
||||
@@ -39,45 +39,46 @@ export function generateDefaultDashboard() {
|
||||
icon: 'fa-solid fa-user',
|
||||
order: 0,
|
||||
widgets: [
|
||||
// Row 0: User Info (left) + User Mood (top right in 3-col)
|
||||
// Row 0-1: User Info (left column, vertical)
|
||||
{
|
||||
id: 'widget-userinfo',
|
||||
type: 'userInfo',
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 2,
|
||||
h: 1,
|
||||
config: {}
|
||||
},
|
||||
{
|
||||
id: 'widget-usermood',
|
||||
type: 'userMood',
|
||||
x: 2,
|
||||
y: 0,
|
||||
w: 1,
|
||||
h: 1,
|
||||
h: 2,
|
||||
config: {}
|
||||
},
|
||||
// Row 1-2: User Stats (health/energy bars)
|
||||
// Row 0-2: User Stats (right side, tall, 2 cols wide)
|
||||
{
|
||||
id: 'widget-userstats',
|
||||
type: 'userStats',
|
||||
x: 0,
|
||||
y: 1,
|
||||
x: 1,
|
||||
y: 0,
|
||||
w: 2,
|
||||
h: 2,
|
||||
h: 3,
|
||||
config: {
|
||||
statBarGradient: true
|
||||
}
|
||||
},
|
||||
// Row 3-4: User Attributes
|
||||
// Row 2: User Mood (below user info, left column)
|
||||
{
|
||||
id: 'widget-usermood',
|
||||
type: 'userMood',
|
||||
x: 0,
|
||||
y: 2,
|
||||
w: 1,
|
||||
h: 1,
|
||||
config: {}
|
||||
},
|
||||
// Row 3-6: User Attributes (full width below everything, 3 cols wide)
|
||||
{
|
||||
id: 'widget-userattributes',
|
||||
type: 'userAttributes',
|
||||
x: 0,
|
||||
y: 3,
|
||||
w: 2,
|
||||
h: 2,
|
||||
w: 3,
|
||||
h: 4,
|
||||
config: {}
|
||||
}
|
||||
]
|
||||
|
||||
@@ -35,8 +35,20 @@ export function registerUserAttributesWidget(registry, dependencies) {
|
||||
description: 'Customizable RPG attributes with +/- buttons (STR, DEX, etc.)',
|
||||
category: 'user',
|
||||
minSize: { w: 2, h: 2 },
|
||||
defaultSize: { w: 2, h: 2 },
|
||||
maxAutoSize: { w: 3, h: 5 }, // Max size for auto-arrange expansion
|
||||
// Column-aware sizing: full width at each column count
|
||||
defaultSize: (columns) => {
|
||||
if (columns <= 2) {
|
||||
return { w: 2, h: 4 }; // Mobile: 2 cols wide (full), 4 rows tall
|
||||
}
|
||||
return { w: 3, h: 4 }; // Desktop: 3 cols wide (full), 4 rows tall
|
||||
},
|
||||
// Column-aware max size: same as default
|
||||
maxAutoSize: (columns) => {
|
||||
if (columns <= 2) {
|
||||
return { w: 2, h: 4 };
|
||||
}
|
||||
return { w: 3, h: 4 };
|
||||
},
|
||||
requiresSchema: false,
|
||||
|
||||
/**
|
||||
|
||||
@@ -38,19 +38,19 @@ export function registerUserInfoWidget(registry, dependencies) {
|
||||
description: 'User avatar, name, and level display',
|
||||
category: 'user',
|
||||
minSize: { w: 1, h: 1 },
|
||||
// Column-aware default size: start at 2x1 in desktop so mood doesn't block expansion
|
||||
// Column-aware default size: vertical 1x2 with mood below
|
||||
defaultSize: (columns) => {
|
||||
if (columns <= 2) {
|
||||
return { w: 1, h: 1 }; // Mobile: 1x1, horizontal layout
|
||||
return { w: 1, h: 1 }; // Mobile: 1x1, compact
|
||||
}
|
||||
return { w: 2, h: 1 }; // Desktop: 2x1 from the start
|
||||
return { w: 1, h: 2 }; // Desktop: 1x2 vertical, mood sits below
|
||||
},
|
||||
// Column-aware max size: same as defaultSize to prevent further expansion
|
||||
// Column-aware max size: same as defaultSize to prevent expansion
|
||||
maxAutoSize: (columns) => {
|
||||
if (columns <= 2) {
|
||||
return { w: 1, h: 1 }; // Mobile: 1x1, horizontal layout
|
||||
return { w: 1, h: 1 }; // Mobile: 1x1, compact
|
||||
}
|
||||
return { w: 2, h: 1 }; // Desktop: 2x1, mood sits in top-right
|
||||
return { w: 1, h: 2 }; // Desktop: 1x2 vertical, mood below at y:2
|
||||
},
|
||||
requiresSchema: false,
|
||||
|
||||
@@ -89,15 +89,22 @@ export function registerUserInfoWidget(registry, dependencies) {
|
||||
|
||||
const html = `
|
||||
<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 ? `
|
||||
${finalConfig.showAvatar ? `<img class="rpg-user-avatar-img" src="${userPortrait}" alt="User Avatar">` : ''}
|
||||
|
||||
${finalConfig.showName ? `
|
||||
<div class="rpg-user-name-container">
|
||||
<div class="rpg-user-name">${userName}</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${finalConfig.showLevel ? `
|
||||
<div class="rpg-user-level-container">
|
||||
<div class="rpg-user-level">
|
||||
<span class="rpg-level-label">LVL</span>
|
||||
<span class="rpg-level-value rpg-editable" contenteditable="true" data-field="level" title="Click to edit level">${settings.level}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -155,11 +162,15 @@ export function registerUserInfoWidget(registry, dependencies) {
|
||||
const infoContainer = container.querySelector('.rpg-user-info-container');
|
||||
if (!infoContainer) return;
|
||||
|
||||
// Apply compact mode class at narrow widths for smaller text
|
||||
if (newW < 3) {
|
||||
infoContainer.classList.add('rpg-user-info-compact');
|
||||
} else {
|
||||
// Apply layout classes based on widget width
|
||||
if (newW >= 2) {
|
||||
// Wide layout (2x1+): Horizontal split with name left, level right
|
||||
infoContainer.classList.add('rpg-user-info-wide');
|
||||
infoContainer.classList.remove('rpg-user-info-compact');
|
||||
} else {
|
||||
// Compact layout (1x1): Round avatar with flush text overlays
|
||||
infoContainer.classList.add('rpg-user-info-compact');
|
||||
infoContainer.classList.remove('rpg-user-info-wide');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -33,13 +33,19 @@ export function registerUserStatsWidget(registry, dependencies) {
|
||||
description: 'Health, energy, satiety bars',
|
||||
category: 'user',
|
||||
minSize: { w: 1, h: 2 },
|
||||
defaultSize: { w: 2, h: 2 },
|
||||
// Column-aware max size: full width in 3-4 col for horizontal spread
|
||||
// Column-aware sizing: narrow and tall at 2 cols, wider at 3+ cols
|
||||
defaultSize: (columns) => {
|
||||
if (columns <= 2) {
|
||||
return { w: 1, h: 3 }; // Mobile: 1 col wide, 3 rows tall
|
||||
}
|
||||
return { w: 2, h: 3 }; // Desktop: 2 cols wide, 3 rows tall
|
||||
},
|
||||
// Column-aware max size: same as default to prevent expansion
|
||||
maxAutoSize: (columns) => {
|
||||
if (columns <= 2) {
|
||||
return { w: 2, h: 2 }; // Mobile: use full 2-col width
|
||||
return { w: 1, h: 3 }; // Mobile: 1x3
|
||||
}
|
||||
return { w: 3, h: 3 }; // Desktop: span 3 columns horizontally
|
||||
return { w: 2, h: 3 }; // Desktop: 2x3
|
||||
},
|
||||
requiresSchema: false,
|
||||
|
||||
|
||||
Reference in New Issue
Block a user