feat(dashboard): redesign Scene Info widget with compact grid layout
Complete redesign of Scene Info widget following UX best practices: BEFORE: - Tab-based interface with 5 separate views - Only 1 data point visible at a time (poor scannability) - Size: 2×3 (oversized, wasted vertical space) - Didn't fit in desktop side panel - Poor information density AFTER: - Grid-based layout showing all 5 data points simultaneously - High information density and scannability - Compact size: 2×2 (reduced from 2×3) - Inspired by Apple Widgets / Material Design patterns - Mobile-responsive with breakpoints at 1000px and 340px - Zero interaction needed - all data visible at once Changes: - sceneInfoWidget.js: Complete rewrite (390→309 lines) - Removed tab logic and state management - Added data formatting helpers (formatDate, formatTime, etc.) - Grid HTML structure with semantic CSS classes - Maintained inline editing for all fields - Simplified configuration - style.css: Added comprehensive grid styling (lines 2647-2811) - CSS Grid layout with named areas - Responsive typography and spacing - Hover states and focus styles - 2 mobile breakpoints for optimal scaling - defaultLayout.js: Updated Scene Info widget - Changed height: 3→2 rows - Adjusted Y positions for widgets below - Simplified config (removed view selection) Design Principles: - All information visible simultaneously (zero interaction) - High scannability for quick information gathering - Proper information density for simple data points - Grid structure: 2 columns, 3 rows (location full-width header) - Mobile-first responsive design Layout: ┌─────────────────────────────────┐ │ 📍 Location │ ├──────────────────┬──────────────┤ │ 📅 Date │ 🕐 Time │ ├──────────────────┼──────────────┤ │ 🌤️ Weather │ 🌡️ Temp │ └──────────────────┴──────────────┘
This commit is contained in:
@@ -2644,6 +2644,172 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Scene Info Grid Widget
|
||||
Compact information-dense layout showing all scene data at once
|
||||
============================================================================ */
|
||||
|
||||
.rpg-scene-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
grid-template-areas:
|
||||
"location location"
|
||||
"calendar clock"
|
||||
"weather temperature";
|
||||
}
|
||||
|
||||
.rpg-info-item {
|
||||
background: var(--rpg-panel);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.rpg-info-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* Grid area assignments */
|
||||
.rpg-info-location {
|
||||
grid-area: location;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.rpg-info-calendar { grid-area: calendar; }
|
||||
.rpg-info-clock { grid-area: clock; }
|
||||
.rpg-info-weather { grid-area: weather; }
|
||||
.rpg-info-temperature { grid-area: temperature; }
|
||||
|
||||
/* Icon styling */
|
||||
.rpg-info-item .item-icon {
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Content layout */
|
||||
.rpg-info-item .item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
flex: 1;
|
||||
min-width: 0; /* Prevent overflow */
|
||||
}
|
||||
|
||||
/* Primary value (large, bold) */
|
||||
.rpg-info-item .item-value {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
color: var(--rpg-text);
|
||||
}
|
||||
|
||||
/* Secondary label (small, subdued) */
|
||||
.rpg-info-item .item-label {
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.3;
|
||||
color: var(--rpg-text);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Location-specific styling */
|
||||
.rpg-info-location .item-value {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.rpg-info-location .item-label {
|
||||
font-size: 0.875rem;
|
||||
margin-top: -0.1rem;
|
||||
}
|
||||
|
||||
/* Editable field styling */
|
||||
.rpg-info-item .rpg-editable {
|
||||
cursor: text;
|
||||
padding: 0.15rem 0.3rem;
|
||||
margin: -0.15rem -0.3rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.rpg-info-item .rpg-editable:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.rpg-info-item .rpg-editable:focus {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
outline: 1px solid var(--rpg-highlight);
|
||||
}
|
||||
|
||||
/* Mobile responsive (max-width: 1000px) */
|
||||
@media (max-width: 1000px) {
|
||||
.rpg-widget .rpg-scene-info-grid {
|
||||
gap: 0.5rem !important;
|
||||
padding: 0.75rem !important;
|
||||
}
|
||||
|
||||
.rpg-widget .rpg-info-item {
|
||||
padding: 0.6rem !important;
|
||||
gap: 0.6rem !important;
|
||||
border-radius: 0.5rem !important;
|
||||
}
|
||||
|
||||
.rpg-widget .rpg-info-item .item-icon {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
.rpg-widget .rpg-info-item .item-value {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.rpg-widget .rpg-info-item .item-label {
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
.rpg-widget .rpg-info-location .item-value {
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
.rpg-widget .rpg-info-location .item-label {
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra small mobile (max-width: 340px) */
|
||||
@media (max-width: 340px) {
|
||||
.rpg-widget .rpg-scene-info-grid {
|
||||
gap: 0.4rem !important;
|
||||
padding: 0.5rem !important;
|
||||
}
|
||||
|
||||
.rpg-widget .rpg-info-item {
|
||||
padding: 0.5rem !important;
|
||||
gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
.rpg-widget .rpg-info-item .item-icon {
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
|
||||
.rpg-widget .rpg-info-item .item-value {
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
.rpg-widget .rpg-info-item .item-label {
|
||||
font-size: 0.7rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Character Status Cards */
|
||||
.rpg-character-status {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user