wt/mongoose
1
0
Fork 0
mirror of https://github.com/cesanta/mongoose.git synced 2026-10-01 05:52:32 +07:00
Code Issues Packages Projects Releases Wiki Activity

Panels

Browse Source
This commit is contained in:
cpq
2026-04-20 12:29:44 +01:00
parent 423f3291da
commit 5fd76013cd
2 changed files with 56 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tutorials/device-dashboard/full-dashboard/web_root/index.html
+30 -28
View File
@@ -156,42 +156,44 @@
<!-- Sensor History Chart --> <!-- Sensor History Chart -->
<div class="panel chart-panel"> <div class="panel chart-panel">
<div class="panel-header"> <div class="panel-title">
<div> <span>Sensor History</span>
<div class="panel-title">Sensor History</div>
</div>
<div class="chart-legend"> <div class="chart-legend">
<div class="legend-item"><span class="legend-dot legend-dot-color1"></span>Temperature</div> <div class="legend-item"><span class="legend-dot legend-dot-color1"></span>Temperature</div>
<div class="legend-item"><span class="legend-dot legend-dot-color2"></span>Humidity</div> <div class="legend-item"><span class="legend-dot legend-dot-color2"></span>Humidity</div>
</div> </div>
</div> </div>
<div id="chart"></div> <div class="panel-body">
<div id="chart"></div>
</div>
</div> </div>
<!-- Controls Panel --> <!-- Controls Panel -->
<div class="panel controls-panel"> <div class="panel controls-panel">
<div class="panel-title">Controls</div> <div class="panel-title">Controls</div>
<div class="controls-list"> <div class="panel-body">
<div class="control-row"> <div class="controls-list">
<div class="control-info"> <div class="control-row">
<div class="control-name">Cooling Fan</div> <div class="control-info">
<div class="control-desc">PWM controlled output</div> <div class="control-name">Cooling Fan</div>
<div class="control-desc">PWM controlled output</div>
</div>
<input type="checkbox" data-bind="controls.fan" data-autosave="1" class="toggle" />
</div> </div>
<input type="checkbox" data-bind="controls.fan" data-autosave="1" class="toggle" /> <div class="control-row">
</div> <div class="control-info">
<div class="control-row"> <div class="control-name">Relay Channel 1</div>
<div class="control-info"> <div class="control-desc">Auxiliary load output</div>
<div class="control-name">Relay Channel 1</div> </div>
<div class="control-desc">Auxiliary load output</div> <input type="checkbox" data-bind="controls.relay1" data-autosave="1" class="toggle" />
</div> </div>
<input type="checkbox" data-bind="controls.relay1" data-autosave="1" class="toggle" /> <div class="control-row">
</div> <div class="control-info">
<div class="control-row"> <div class="control-name">Relay Channel 2</div>
<div class="control-info"> <div class="control-desc">Safety-controlled line</div>
<div class="control-name">Relay Channel 2</div> </div>
<div class="control-desc">Safety-controlled line</div> <input type="checkbox" data-bind="controls.relay2" data-autosave="1" class="toggle" />
</div> </div>
<input type="checkbox" data-bind="controls.relay2" data-autosave="1" class="toggle" />
</div> </div>
</div> </div>
</div> </div>
@@ -199,10 +201,10 @@
</div> </div>
</section> </section>
<section id="settings" class="tab-panel" role="tabpanel" aria-labelledby="tab-settings" hidden> <section id="settings" class="tab-panel" role="tabpanel" aria-labelledby="tab-settings" hidden>
<div class="settings-layout"> <div class="panel-layout">
<div class="settings-panel"> <div class="panel">
<div class="settings-panel-title">Device settings</div> <div class="panel-title">Device settings</div>
<div class="settings-fields"> <div class="panel-body">
<div class="field"> <div class="field">
<label class="field-label" for="setting-name">Name</label> <label class="field-label" for="setting-name">Name</label>
<input class="field-input" id="setting-name" type="text" data-bind="settings.name" data-autosave="1" /> <input class="field-input" id="setting-name" type="text" data-bind="settings.name" data-autosave="1" />
@@ -212,7 +214,7 @@
<input class="field-input" id="setting-volume" type="text" data-bind="settings.volume" /> <input class="field-input" id="setting-volume" type="text" data-bind="settings.volume" />
</div> </div>
</div> </div>
<div class="settings-panel-footer"> <div class="panel-footer">
<button class="btn btn-secondary" type="button" data-cancel="settings">Cancel</button> <button class="btn btn-secondary" type="button" data-cancel="settings">Cancel</button>
<button class="btn btn-primary" type="button" data-save="settings">Save</button> <button class="btn btn-primary" type="button" data-save="settings">Save</button>
</div> </div>
tutorials/device-dashboard/full-dashboard/web_root/style.css
+26 -54
View File
@@ -86,7 +86,6 @@ body {
height: 11px; height: 11px;
border-radius: 50%; border-radius: 50%;
background: rgb(16, 185, 129); background: rgb(16, 185, 129);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -140,9 +139,6 @@ body {
.tab-panel { .tab-panel {
min-height: calc(100vh - 6rem); min-height: calc(100vh - 6rem);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.72),
0 18px 40px rgba(148, 163, 184, 0.1);
} }
.overview-grid { .overview-grid {
@@ -249,39 +245,32 @@ body {
display: none; display: none;
} }
/* ── Settings panel ─────────────────────────────── */ /* ── Panel ──────────────────────────────────────── */
.settings-layout { .panel-layout {
padding-top: 1rem; padding-top: 1rem;
max-width: 22rem; max-width: 22rem;
} }
.settings-panel { .panel-body {
background: #ffffff;
border: 1px solid rgba(203, 213, 225, 0.75);
border-radius: 1rem;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 1),
0 2px 6px rgba(148, 163, 184, 0.1),
0 8px 24px rgba(148, 163, 184, 0.08);
overflow: hidden;
}
.settings-panel-title {
font-size: 0.95rem;
font-weight: 700;
color: #334155;
padding: 1rem 1.25rem 0.9rem;
border-bottom: 1px solid #e2e8f0;
}
.settings-fields {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.75rem;
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
flex: 1;
} }
.panel-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
border-top: 1px solid #e2e8f0;
}
/* ── Form fields ─────────────────────────────────── */
.field { .field {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -349,15 +338,7 @@ body {
pointer-events: none; pointer-events: none;
} }
.settings-panel-footer { /* ── Buttons ─────────────────────────────────────── */
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
}
.btn { .btn {
display: inline-flex; display: inline-flex;
@@ -396,7 +377,6 @@ body {
.btn-primary:hover { .btn-primary:hover {
background: linear-gradient(160deg, #0ea5e9, #0284c7); background: linear-gradient(160deg, #0ea5e9, #0284c7);
box-shadow: 0 1px 3px rgba(14, 165, 233, 0.4), 0 6px 14px rgba(14, 165, 233, 0.2); box-shadow: 0 1px 3px rgba(14, 165, 233, 0.4), 0 6px 14px rgba(14, 165, 233, 0.2);
/*transform: translateY(-1px);*/
} }
.btn-primary:active, .btn-primary:active,
@@ -431,28 +411,21 @@ body {
inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 1px 0 rgba(255, 255, 255, 1),
0 2px 6px rgba(148, 163, 184, 0.1), 0 2px 6px rgba(148, 163, 184, 0.1),
0 8px 24px rgba(148, 163, 184, 0.08); 0 8px 24px rgba(148, 163, 184, 0.08);
padding: 1.5rem; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 1.1rem;
}
.panel-title { .panel-title {
font-size: 1.05rem; display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.95rem;
font-weight: 700; font-weight: 700;
color: #18314f; color: #334155;
margin-bottom: 0.2rem; padding: 1rem 1.25rem 0.9rem;
} border-bottom: 1px solid #e2e8f0;
flex-shrink: 0;
.panel-subtitle {
color: #7d94ac;
font-size: 0.8rem;
} }
/* Chart */ /* Chart */
@@ -516,7 +489,6 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
margin-top: 0.25rem;
} }
.control-row { .control-row {
@@ -601,4 +573,4 @@ body {
.overview-grid { .overview-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }