diff --git a/modules/mining-checker/assets/css/app.css b/modules/mining-checker/assets/css/app.css index 32c363e8..5386cfd5 100644 --- a/modules/mining-checker/assets/css/app.css +++ b/modules/mining-checker/assets/css/app.css @@ -16,6 +16,7 @@ font-family: inherit; max-width: 100%; overflow-x: clip; + height: 100%; } #mining-checker-app, @@ -34,71 +35,13 @@ max-width: 100%; margin: 0; padding: 0; -} - -#mining-checker-app .mc-app-shell { - display: grid; - grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); - gap: 18px; - align-items: start; -} - -#mining-checker-app .mc-sidebar, -#mining-checker-app .mc-hero-panel { - border: 1px solid var(--mc-line); - border-radius: 18px; - background: var(--mc-surface); - box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); -} - -#mining-checker-app .mc-sidebar { - padding: 20px; - display: grid; - gap: 18px; - position: sticky; - top: 0; -} - -#mining-checker-app .mc-sidebar-brand, -#mining-checker-app .mc-nav-list, -#mining-checker-app .mc-main { - display: grid; - gap: 14px; + height: 100%; } #mining-checker-app .mc-sidebar-title { font-size: 1.35rem; } -#mining-checker-app .mc-nav-button { - display: grid; - gap: 6px; - width: 100%; - padding: 14px 16px; - text-align: left; - border-radius: 16px; - border: 1px solid var(--mc-line); - background: #fff; - color: var(--mc-text); - cursor: pointer; - transition: 160ms ease; -} - -#mining-checker-app .mc-nav-button:hover { - border-color: var(--mc-line-strong); - transform: translateY(-1px); -} - -#mining-checker-app .mc-nav-button.is-active { - border-color: var(--mc-accent); - background: #eff6ff; - box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08); -} - -#mining-checker-app .mc-nav-button strong { - color: var(--mc-text); -} - #mining-checker-app .mc-nav-meta { font-size: 0.85rem; line-height: 1.45; @@ -106,11 +49,9 @@ } #mining-checker-app .mc-hero-panel { - padding: 20px 22px; - display: flex; - justify-content: space-between; - gap: 16px; - align-items: flex-start; + border: 1px solid var(--mc-line); + background: var(--mc-surface); + box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); } #mining-checker-app .mc-inline-row--wrap { @@ -341,19 +282,6 @@ font-weight: 700; } -@media (max-width: 980px) { - #mining-checker-app .mc-app-shell { - grid-template-columns: minmax(0, 1fr); - } - - #mining-checker-app .mc-sidebar { - position: static; - } - - #mining-checker-app .mc-hero-panel { - flex-direction: column; - } -} #mining-checker-app .mc-button--secondary { background: #ffffff; diff --git a/modules/mining-checker/assets/js/app.js b/modules/mining-checker/assets/js/app.js index d980f899..991ecf6f 100644 --- a/modules/mining-checker/assets/js/app.js +++ b/modules/mining-checker/assets/js/app.js @@ -2291,19 +2291,19 @@ return h('div', { className: 'mc-grid-bg', }, [ - h('div', { key: 'shell', className: 'mc-shell' }, [ - h('div', { key: 'frame', className: 'mc-app-shell' }, [ - h('aside', { key: 'sidebar', className: 'mc-sidebar' }, [ - h('div', { key: 'brand', className: 'mc-sidebar-brand' }, [ - h('div', { key: 'kicker', className: 'mc-kicker' }, 'Modul'), + h('div', { key: 'shell', className: 'window-app-shell mc-shell' }, [ + h('div', { key: 'frame', className: 'window-app-frame' }, [ + h('aside', { key: 'sidebar', className: 'window-app-sidebar mc-sidebar' }, [ + h('div', { key: 'brand', className: 'window-app-brand mc-sidebar-brand' }, [ + h('div', { key: 'kicker', className: 'window-app-kicker mc-kicker' }, 'Modul'), h('h1', { key: 'title', className: 'mc-sidebar-title' }, 'Mining-Checker'), h('p', { key: 'copy', className: 'mc-text' }, 'Erfassung, OCR-Auswertung und Analyse von Mining-Messwerten in einer gemeinsamen Modulansicht.'), ]), - h('div', { key: 'nav', className: 'mc-nav-list' }, + h('div', { key: 'nav', className: 'window-app-nav-list mc-nav-list' }, sectionEntries.map(([key, label]) => h('button', { key, type: 'button', - className: cx('mc-nav-button', activeTab === key && 'is-active'), + className: cx('window-app-nav-button mc-nav-button', activeTab === key && 'is-active'), onClick: () => { if (key === activeTab) { return; @@ -2313,15 +2313,15 @@ }, }, [ h('strong', { key: 'label' }, label), - h('span', { key: 'meta', className: 'mc-nav-meta' }, currentSectionSummary(key)), + h('span', { key: 'meta', className: 'window-app-meta mc-nav-meta' }, currentSectionSummary(key)), ])) ), ]), - h('main', { key: 'main', className: 'mc-main' }, [ - h('section', { key: 'hero', className: 'mc-hero-panel' }, [ + h('main', { key: 'main', className: 'window-app-main mc-main' }, [ + h('section', { key: 'hero', className: 'window-app-hero mc-hero-panel' }, [ h('div', { key: 'hero-copy', className: 'mc-hero-copy' }, [ - h('div', { key: 'hero-kicker', className: 'mc-kicker' }, 'Mining-Checker'), - h('h2', { key: 'hero-title', className: 'mc-section-title' }, currentSectionLabel(activeTab)), + h('div', { key: 'hero-kicker', className: 'window-app-kicker mc-kicker' }, 'Mining-Checker'), + h('h2', { key: 'hero-title', className: 'window-app-title mc-section-title' }, currentSectionLabel(activeTab)), h('p', { key: 'hero-text', className: 'mc-text' }, currentSectionSummary(activeTab)), ]), h('div', { key: 'hero-badges', className: 'mc-inline-row mc-inline-row--wrap' }, [ diff --git a/public/assets/desktop/desktop.css b/public/assets/desktop/desktop.css index c9607c08..5c81ec11 100644 --- a/public/assets/desktop/desktop.css +++ b/public/assets/desktop/desktop.css @@ -520,12 +520,15 @@ h1 { background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.98)), radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 36%); + min-width: 0; } .window-app-frame { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100%; + min-width: 0; + align-items: stretch; } .window-app-sidebar { @@ -534,6 +537,10 @@ h1 { background: linear-gradient(180deg, rgba(219, 234, 254, 0.96), rgba(239, 246, 255, 0.94)), linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent); + min-height: 0; + max-height: 100%; + overflow-y: auto; + overflow-x: hidden; } .window-app-brand { @@ -591,6 +598,7 @@ h1 { .window-app-main { padding: 24px; + min-width: 0; } .window-app-panel {