feat(dashboard): optimize 3-4 column desktop layout + fix mobile widget issues
DESKTOP LAYOUT OPTIMIZATION (3-4 columns): - userInfo: Changed maxAutoSize from 2x1 to 1x2 (expands vertically) - userStats: Changed to column-aware function, 3x3 in 3-4 col (full width horizontal) - Layout: userInfo 1x2 (left) + mood 1x1 (top-right), stats 3x3 below (full width) - Result: Better horizontal space utilization, less vertical stacking MOBILE FIXES (Dashboard v2): 1. Refresh button visibility - Added #rpg-dashboard-container to CSS selector - Now shows with Dashboard v2, not just old panel UI 2. Stats widget Arousal bar clipping - Added padding-bottom: 0.5rem to .rpg-stats-grid - Prevents last stat bar from being cut off 3. Mood conditions text too small - Increased from 0.45rem to 0.6rem with line-height 1.2 - "Focused, Awakening Qi" now readable under emoji AFFECTED: - userInfoWidget.js: maxAutoSize 1x2 for desktop vertical expansion - userStatsWidget.js: Column-aware maxAutoSize function (2x2 mobile, 3x3 desktop) - style.css: Mobile refresh visibility, stats padding, mood text size
This commit is contained in:
@@ -39,12 +39,12 @@ export function registerUserInfoWidget(registry, dependencies) {
|
|||||||
category: 'user',
|
category: 'user',
|
||||||
minSize: { w: 1, h: 1 },
|
minSize: { w: 1, h: 1 },
|
||||||
defaultSize: { w: 1, h: 1 }, // Start compact (1x1), expansion will grow it based on columns
|
defaultSize: { w: 1, h: 1 }, // Start compact (1x1), expansion will grow it based on columns
|
||||||
// Column-aware max size: mobile (2-col) stays 1x1, desktop (3-4 col) can expand to 2x1
|
// Column-aware max size: mobile (2-col) stays 1x1, desktop (3-4 col) expands vertically to 1x2
|
||||||
maxAutoSize: (columns) => {
|
maxAutoSize: (columns) => {
|
||||||
if (columns <= 2) {
|
if (columns <= 2) {
|
||||||
return { w: 1, h: 1 }; // Mobile: stay compact to allow mood widget beside it
|
return { w: 1, h: 1 }; // Mobile: stay compact to allow mood widget beside it
|
||||||
}
|
}
|
||||||
return { w: 2, h: 1 }; // Desktop: can span 2 columns
|
return { w: 1, h: 2 }; // Desktop: expand vertically, mood fits top-right
|
||||||
},
|
},
|
||||||
requiresSchema: false,
|
requiresSchema: false,
|
||||||
|
|
||||||
|
|||||||
@@ -34,7 +34,13 @@ export function registerUserStatsWidget(registry, dependencies) {
|
|||||||
category: 'user',
|
category: 'user',
|
||||||
minSize: { w: 1, h: 2 },
|
minSize: { w: 1, h: 2 },
|
||||||
defaultSize: { w: 2, h: 2 },
|
defaultSize: { w: 2, h: 2 },
|
||||||
maxAutoSize: { w: 3, h: 3 }, // Max size for auto-arrange expansion
|
// Column-aware max size: full width in 3-4 col for horizontal spread
|
||||||
|
maxAutoSize: (columns) => {
|
||||||
|
if (columns <= 2) {
|
||||||
|
return { w: 2, h: 2 }; // Mobile: use full 2-col width
|
||||||
|
}
|
||||||
|
return { w: 3, h: 3 }; // Desktop: span 3 columns horizontally
|
||||||
|
},
|
||||||
requiresSchema: false,
|
requiresSchema: false,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -3790,8 +3790,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Show refresh button when panel is open AND not hidden by generation mode */
|
/* Show refresh button when panel is open OR Dashboard v2 is visible, AND not hidden by generation mode */
|
||||||
body:has(.rpg-panel.rpg-mobile-open) .rpg-mobile-refresh:not(.rpg-hidden-mode) {
|
body:has(.rpg-panel.rpg-mobile-open, #rpg-dashboard-container) .rpg-mobile-refresh:not(.rpg-hidden-mode) {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
@@ -4321,6 +4321,17 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
|||||||
line-height: 1.1 !important;
|
line-height: 1.1 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* User Stats Widget - add bottom padding to prevent last bar (Arousal) from being clipped */
|
||||||
|
.rpg-widget .rpg-stats-grid {
|
||||||
|
padding-bottom: 0.3rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mood Widget - increase conditions text size for readability */
|
||||||
|
.rpg-widget .rpg-mood-conditions {
|
||||||
|
font-size: 0.6rem !important;
|
||||||
|
line-height: 1.2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* ========================================
|
/* ========================================
|
||||||
MOBILE STATS TAB LAYOUT IMPROVEMENTS
|
MOBILE STATS TAB LAYOUT IMPROVEMENTS
|
||||||
======================================== */
|
======================================== */
|
||||||
|
|||||||
Reference in New Issue
Block a user