fix(dashboard): add CSS for header and container layout

Added missing CSS for dashboard v2 header and container:
- .rpg-dashboard-container: Flexbox column layout with gap
- .rpg-dashboard-header: Flexbox row with space-between
- .rpg-dashboard-header-left/right: Flex containers for button groups
- .rpg-dashboard-btn: Button styling with theme variables
- .rpg-dashboard-grid: Grid container styling

Also fixed dashboardManager.js to preserve template structure:
- Changed createContainerStructure() to query existing elements first
- Only creates elements if template didn't provide them
- Prevents clearing the entire container and losing the header

This fixes the issue where all components (header, buttons, widgets)
were stacking on top of each other due to missing layout CSS.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-23 14:12:42 +11:00
parent 122bb3194a
commit 2c37318798
2 changed files with 81 additions and 14 deletions
+22 -14
View File
@@ -190,22 +190,30 @@ export class DashboardManager {
* Create dashboard container structure
*/
createContainerStructure() {
// Clear container
this.container.innerHTML = '';
// Check if tabs and grid containers already exist (from template)
this.tabContainer = this.container.querySelector('#rpg-dashboard-tabs');
this.gridContainer = this.container.querySelector('#rpg-dashboard-grid');
// Create tab container
this.tabContainer = document.createElement('div');
this.tabContainer.className = 'rpg-dashboard-tabs';
this.tabContainer.id = 'rpg-dashboard-tabs';
this.container.appendChild(this.tabContainer);
// If they don't exist, create them (fallback for legacy/minimal setup)
if (!this.tabContainer) {
console.warn('[DashboardManager] Tab container not found in template, creating...');
this.tabContainer = document.createElement('div');
this.tabContainer.className = 'rpg-dashboard-tabs';
this.tabContainer.id = 'rpg-dashboard-tabs';
this.container.appendChild(this.tabContainer);
}
// Create grid container
this.gridContainer = document.createElement('div');
this.gridContainer.className = 'rpg-dashboard-grid';
this.gridContainer.id = 'rpg-dashboard-grid';
this.gridContainer.style.position = 'relative';
this.gridContainer.style.minHeight = '600px';
this.container.appendChild(this.gridContainer);
if (!this.gridContainer) {
console.warn('[DashboardManager] Grid container not found in template, creating...');
this.gridContainer = document.createElement('div');
this.gridContainer.className = 'rpg-dashboard-grid';
this.gridContainer.id = 'rpg-dashboard-grid';
this.gridContainer.style.position = 'relative';
this.gridContainer.style.minHeight = '600px';
this.container.appendChild(this.gridContainer);
}
console.log('[DashboardManager] Container structure ready');
}
/**
+59
View File
@@ -1040,6 +1040,65 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
transform: scale(0.95);
}
/* ========================================
DASHBOARD V2 CONTAINER & HEADER STYLES
========================================
Dashboard container and header layout
======================================== */
.rpg-dashboard-container {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
}
.rpg-dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
gap: 0.5rem;
flex-wrap: wrap;
}
.rpg-dashboard-header-left,
.rpg-dashboard-header-right {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.rpg-dashboard-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.4rem 0.6rem;
font-size: 0.75rem;
border: 1px solid var(--SmartThemeBorderColor);
background: var(--SmartThemeBlurTintColor);
color: var(--SmartThemeBodyColor);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.rpg-dashboard-btn:hover {
background: var(--SmartThemeQuoteColor);
transform: translateY(-1px);
}
.rpg-dashboard-btn i {
font-size: 0.85rem;
}
.rpg-dashboard-grid {
position: relative;
width: 100%;
min-height: 200px;
}
/* ========================================
DASHBOARD V2 WIDGET STYLES
========================================