Improve side panel
Simon Stürz
parent
655cdefa8f
commit
7b408be5fa
|
|
@ -16,6 +16,7 @@
|
|||
--muted-text-color: #3342538a;
|
||||
--green-color: #2ecc71;
|
||||
--red-color: #e30a18;
|
||||
--sidebar-width: clamp(200px, 22vw, 320px);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -30,13 +31,30 @@
|
|||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.app-layout {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"sidebar main"
|
||||
"footer footer";
|
||||
column-gap: 2rem;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
grid-area: header;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: #ffffff;
|
||||
padding: 2rem 1.5rem;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.header-bar {
|
||||
|
|
@ -133,29 +151,28 @@
|
|||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding: 2rem 1rem 3rem;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
width: min(1200px, 100%);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 260px) 1fr;
|
||||
gap: 1.5rem;
|
||||
align-items: start;
|
||||
grid-area: main;
|
||||
padding: 2rem 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.side-panel {
|
||||
grid-area: sidebar;
|
||||
height: auto;
|
||||
background: var(--surface-color);
|
||||
border-radius: 18px;
|
||||
border-radius: 0;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
align-self: stretch;
|
||||
overflow: visible;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.side-panel-header h2 {
|
||||
|
|
@ -223,6 +240,10 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.content-panel {
|
||||
|
|
@ -373,21 +394,23 @@
|
|||
}
|
||||
|
||||
footer {
|
||||
grid-area: footer;
|
||||
text-align: center;
|
||||
padding: 1.25rem 1rem;
|
||||
background: #ffffff;
|
||||
border-top: 1px solid #d3dce6;
|
||||
font-size: 0.9rem;
|
||||
color: var(--muted-text-color);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
body.needs-auth {
|
||||
background: var(--surface-color);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
body.needs-auth header,
|
||||
body.needs-auth main,
|
||||
body.needs-auth footer {
|
||||
body.needs-auth .app-layout {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -506,70 +529,88 @@
|
|||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.app-shell {
|
||||
grid-template-columns: 1fr;
|
||||
@media (max-width: 1100px) {
|
||||
:root {
|
||||
--sidebar-width: clamp(180px, 26vw, 280px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
:root {
|
||||
--sidebar-width: clamp(160px, 34vw, 220px);
|
||||
}
|
||||
|
||||
.side-panel {
|
||||
flex-direction: column;
|
||||
main {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.app-layout {
|
||||
column-gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.side-nav {
|
||||
flex-direction: column;
|
||||
:root {
|
||||
--sidebar-width: clamp(140px, 40vw, 200px);
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.app-layout {
|
||||
column-gap: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="needs-auth">
|
||||
<header>
|
||||
<div class="header-bar">
|
||||
<div class="brand">
|
||||
<img src="styles/pce/icon.svg" alt="EV Dash logo" class="brand-logo">
|
||||
<div class="brand-text">
|
||||
<h1>EV Dash</h1>
|
||||
<p>Monitor & troubleshoot EV chargers.</p>
|
||||
<div class="app-layout">
|
||||
<header>
|
||||
<div class="header-bar">
|
||||
<div class="brand">
|
||||
<img src="styles/pce/icon.svg" alt="EV Dash logo" class="brand-logo">
|
||||
<div class="brand-text">
|
||||
<h1>EV Dash</h1>
|
||||
<p>Monitor & troubleshoot EV chargers.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="session-panel">
|
||||
<p class="status-indicator">
|
||||
<span id="statusDot" class="status-dot connecting" aria-hidden="true"></span>
|
||||
<span id="connectionStatus">Awaiting login…</span>
|
||||
</p>
|
||||
<div class="session-user">
|
||||
<img src="icons/user.svg" alt="" aria-hidden="true" class="session-user-icon">
|
||||
<span id="sessionUsername">Awaiting login…</span>
|
||||
</div>
|
||||
<button type="button" id="logoutButton" class="ghost hidden">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="session-panel">
|
||||
<p class="status-indicator">
|
||||
<span id="statusDot" class="status-dot connecting" aria-hidden="true"></span>
|
||||
<span id="connectionStatus">Awaiting login…</span>
|
||||
</p>
|
||||
<div class="session-user">
|
||||
<img src="icons/user.svg" alt="" aria-hidden="true" class="session-user-icon">
|
||||
<span id="sessionUsername">Awaiting login…</span>
|
||||
</div>
|
||||
<button type="button" id="logoutButton" class="ghost hidden">Logout</button>
|
||||
</header>
|
||||
|
||||
<aside class="side-panel" aria-label="Dashboard sections">
|
||||
<div class="side-panel-header">
|
||||
<p class="eyebrow">Workspace</p>
|
||||
<h2>Overview</h2>
|
||||
<p>Switch between live status and built-in documentation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="app-shell">
|
||||
<aside class="side-panel" aria-label="Dashboard sections">
|
||||
<div class="side-panel-header">
|
||||
<p class="eyebrow">Workspace</p>
|
||||
<h2>Overview</h2>
|
||||
<p>Switch between live status and built-in documentation.</p>
|
||||
</div>
|
||||
<nav class="side-nav" aria-label="Sections">
|
||||
<button type="button" class="side-nav-button active" data-panel-target="chargers" aria-pressed="true">
|
||||
<span>Chargers</span>
|
||||
<span class="side-nav-subtitle">Live table & telemetry</span>
|
||||
</button>
|
||||
<button type="button" class="side-nav-button" data-panel-target="help" aria-pressed="false">
|
||||
<span>Help</span>
|
||||
<span class="side-nav-subtitle">API contract & logs</span>
|
||||
</button>
|
||||
</nav>
|
||||
<div class="side-panel-footer">
|
||||
Built for nymea experience plugins.
|
||||
</div>
|
||||
</aside>
|
||||
<nav class="side-nav" aria-label="Sections">
|
||||
<button type="button" class="side-nav-button active" data-panel-target="chargers" aria-pressed="true">
|
||||
<span>Chargers</span>
|
||||
<span class="side-nav-subtitle">Live table & telemetry</span>
|
||||
</button>
|
||||
<button type="button" class="side-nav-button" data-panel-target="help" aria-pressed="false">
|
||||
<span>Help</span>
|
||||
<span class="side-nav-subtitle">API contract & logs</span>
|
||||
</button>
|
||||
</nav>
|
||||
<div class="side-panel-footer">
|
||||
Built for nymea experience plugins.
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
<section class="content-area">
|
||||
<section class="content-panel active" data-panel="chargers" aria-labelledby="chargersTitle" aria-hidden="false">
|
||||
<article class="card">
|
||||
|
|
@ -652,8 +693,12 @@
|
|||
</article>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<span id="appVersion">EV Dash</span> · © 2025 chargebyte GmbH. All rights reserved.
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<section id="loginOverlay" class="login-view" aria-labelledby="loginTitle">
|
||||
<div class="login-panel">
|
||||
|
|
@ -673,10 +718,6 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<span id="appVersion">EV Dash</span> · © 2025 chargebyte GmbH. All rights reserved.
|
||||
</footer>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue