diff --git a/web/core/styles.css b/web/core/styles.css index caa41d7..b9be9a9 100644 --- a/web/core/styles.css +++ b/web/core/styles.css @@ -137,11 +137,26 @@ body { display: grid; gap: 1px; height: calc(100vh - var(--topbar-h)); - grid-template-columns: 1fr; + grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: 1fr; } .grid-app-config .panel.app-config-main { grid-column: 1; grid-row: 1; } +.grid-app-config .panel.top-left { grid-column: 2; grid-row: 1; } + +.unit-config-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 8px; + padding: 8px; + align-content: start; +} + +.unit-config-list .unit-card { + border: 1px solid var(--border); + border-radius: 4px; + padding: 10px; +} /* config view slot assignments */ .grid-config .panel.top-left { grid-column: 1; grid-row: 1; } @@ -1327,7 +1342,7 @@ button.danger:hover { background: var(--danger-hover); } } .grid-app-config { grid-template-columns: 1fr; - grid-template-rows: auto; + grid-template-rows: auto auto; height: auto; } body { height: auto; overflow: auto; } diff --git a/web/feeder/js/app.js b/web/feeder/js/app.js index dc6b147..406ac10 100644 --- a/web/feeder/js/app.js +++ b/web/feeder/js/app.js @@ -49,8 +49,12 @@ function switchView(view) { dom.tabAppConfig.classList.toggle("active", view === "app-config"); dom.tabConfig.classList.toggle("active", view === "config"); + // equipment panel visible in both config and app-config + const equipmentPanel = main.querySelector(".panel.top-left"); + if (equipmentPanel) equipmentPanel.classList.toggle("hidden", view === "ops"); + // config-only panels (platform config view) - ["top-left", "top-right", "bottom-left", "bottom-right"].forEach((cls) => { + ["top-right", "bottom-left", "bottom-right"].forEach((cls) => { const el = main.querySelector(`.panel.${cls}`); if (el) el.classList.toggle("hidden", view !== "config"); }); @@ -83,7 +87,7 @@ function switchView(view) { if (view === "app-config") { if (!_appConfigLoaded) { _appConfigLoaded = true; - withStatus(loadUnits()); + withStatus(Promise.all([loadUnits(), loadEquipments()])); } } }