diff --git a/src/systems/dashboard/dashboardManager.js b/src/systems/dashboard/dashboardManager.js index 63935e4..21e89f6 100644 --- a/src/systems/dashboard/dashboardManager.js +++ b/src/systems/dashboard/dashboardManager.js @@ -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'); } /** diff --git a/style.css b/style.css index 41959cf..b2db25e 100644 --- a/style.css +++ b/style.css @@ -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 ========================================