fix: update Scene tab widgets for proper sizing on reset layout
**Problem:** Reset Layout button was shrinking Scene tab widgets (recentEvents and presentCharacters) because widget definitions had defaultSize: 2x2 but defaultLayout.js expected larger sizes (2x4 for characters). **Changes:** **presentCharactersWidget.js:** - Change defaultSize from 2x2 to column-aware function - Returns 2x4 at all column counts (taller for better card display) - Update maxAutoSize to allow expansion to 3x5 on wide screens **recentEventsWidget (infoBoxWidgets.js):** - Change defaultSize to column-aware function - Returns 2x2 at 2 columns, 3x2 at 3+ columns (full width) - Add maxAutoSize for expansion capability **defaultLayout.js Scene Tab:** - Update all widgets to use 3-column width for desktop - sceneInfo: 3x3 (was 2x2), positioned at y:0 - recentEvents: 3x2 (was 2x2), positioned at y:3 (below sceneInfo) - presentCharacters: 3x4 (was 2x4), positioned at y:5 (below events) **Result:** - Scene tab widgets now properly sized on reset (no more shrinking) - Widgets stack correctly without overlapping - Full width utilization on wider screens (3 columns) - Consistent behavior with Status tab responsive sizing
This commit is contained in:
@@ -90,35 +90,35 @@ export function generateDefaultDashboard() {
|
|||||||
icon: 'fa-solid fa-map',
|
icon: 'fa-solid fa-map',
|
||||||
order: 1,
|
order: 1,
|
||||||
widgets: [
|
widgets: [
|
||||||
// Row 0-1: Scene Info (combined: calendar, weather, temp, clock, location)
|
// Row 0-2: Scene Info (combined: calendar, weather, temp, clock, location)
|
||||||
{
|
{
|
||||||
id: 'widget-sceneinfo',
|
id: 'widget-sceneinfo',
|
||||||
type: 'sceneInfo',
|
type: 'sceneInfo',
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
w: 2,
|
w: 3,
|
||||||
h: 2,
|
h: 3,
|
||||||
config: {}
|
config: {}
|
||||||
},
|
},
|
||||||
// Row 2-3: Recent Events (notebook style, full width)
|
// Row 3-4: Recent Events (notebook style, full width)
|
||||||
{
|
{
|
||||||
id: 'widget-recentevents',
|
id: 'widget-recentevents',
|
||||||
type: 'recentEvents',
|
type: 'recentEvents',
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 2,
|
y: 3,
|
||||||
w: 2,
|
w: 3,
|
||||||
h: 2,
|
h: 2,
|
||||||
config: {
|
config: {
|
||||||
maxEvents: 3
|
maxEvents: 3
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// Row 4-7: Present Characters (full width, will expand with auto-layout)
|
// Row 5-8: Present Characters (full width, tall for cards)
|
||||||
{
|
{
|
||||||
id: 'widget-presentchars',
|
id: 'widget-presentchars',
|
||||||
type: 'presentCharacters',
|
type: 'presentCharacters',
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 4,
|
y: 5,
|
||||||
w: 2,
|
w: 3,
|
||||||
h: 4,
|
h: 4,
|
||||||
config: {
|
config: {
|
||||||
cardLayout: 'grid',
|
cardLayout: 'grid',
|
||||||
|
|||||||
@@ -529,7 +529,19 @@ export function registerRecentEventsWidget(registry, dependencies) {
|
|||||||
description: 'Recent events notebook',
|
description: 'Recent events notebook',
|
||||||
category: 'scene',
|
category: 'scene',
|
||||||
minSize: { w: 2, h: 2 },
|
minSize: { w: 2, h: 2 },
|
||||||
defaultSize: { w: 2, h: 2 },
|
// Column-aware sizing: full width at all sizes
|
||||||
|
defaultSize: (columns) => {
|
||||||
|
if (columns <= 2) {
|
||||||
|
return { w: 2, h: 2 }; // Mobile: 2 cols wide (full), 2 rows
|
||||||
|
}
|
||||||
|
return { w: 3, h: 2 }; // Desktop: 3 cols wide (full), 2 rows
|
||||||
|
},
|
||||||
|
maxAutoSize: (columns) => {
|
||||||
|
if (columns <= 2) {
|
||||||
|
return { w: 2, h: 3 };
|
||||||
|
}
|
||||||
|
return { w: 3, h: 3 };
|
||||||
|
},
|
||||||
requiresSchema: false,
|
requiresSchema: false,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -276,8 +276,20 @@ export function registerPresentCharactersWidget(registry, dependencies) {
|
|||||||
description: 'Character cards with avatars, traits, and relationships',
|
description: 'Character cards with avatars, traits, and relationships',
|
||||||
category: 'scene',
|
category: 'scene',
|
||||||
minSize: { w: 2, h: 2 },
|
minSize: { w: 2, h: 2 },
|
||||||
defaultSize: { w: 2, h: 2 }, // Compact size fits both mobile and desktop viewports
|
// Column-aware sizing: taller for better card display
|
||||||
maxAutoSize: { w: 4, h: 5 }, // Max size for auto-arrange expansion (supports up to 4-col on large displays)
|
defaultSize: (columns) => {
|
||||||
|
if (columns <= 2) {
|
||||||
|
return { w: 2, h: 4 }; // Mobile: 2 cols wide (full), 4 rows tall
|
||||||
|
}
|
||||||
|
return { w: 2, h: 4 }; // Desktop: 2 cols wide, 4 rows tall
|
||||||
|
},
|
||||||
|
// Column-aware max size: can expand on very wide screens
|
||||||
|
maxAutoSize: (columns) => {
|
||||||
|
if (columns <= 2) {
|
||||||
|
return { w: 2, h: 5 };
|
||||||
|
}
|
||||||
|
return { w: 3, h: 5 }; // Can expand to 3 cols wide on 4-col displays
|
||||||
|
},
|
||||||
requiresSchema: false,
|
requiresSchema: false,
|
||||||
|
|
||||||
render(container, config = {}) {
|
render(container, config = {}) {
|
||||||
|
|||||||
Reference in New Issue
Block a user