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 -->
<div class="panel chart-panel">
<div class="panel-header">
<div>
<div class="panel-title">Sensor History</div>
</div>
<div class="panel-title">
<span>Sensor History</span>
<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-color2"></span>Humidity</div>
</div>
</div>
<div id="chart"></div>
<div class="panel-body">
<div id="chart"></div>
</div>
</div>
<!-- Controls Panel -->
<div class="panel controls-panel">
<div class="panel-title">Controls</div>
<div class="controls-list">
<div class="control-row">
<div class="control-info">
<div class="control-name">Cooling Fan</div>
<div class="control-desc">PWM controlled output</div>
<div class="panel-body">
<div class="controls-list">
<div class="control-row">
<div class="control-info">
<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>
<input type="checkbox" data-bind="controls.fan" data-autosave="1" class="toggle" />
</div>
<div class="control-row">
<div class="control-info">
<div class="control-name">Relay Channel 1</div>
<div class="control-desc">Auxiliary load output</div>
<div class="control-row">
<div class="control-info">
<div class="control-name">Relay Channel 1</div>
<div class="control-desc">Auxiliary load output</div>
</div>
<input type="checkbox" data-bind="controls.relay1" data-autosave="1" class="toggle" />
</div>
<input type="checkbox" data-bind="controls.relay1" data-autosave="1" class="toggle" />
</div>
<div class="control-row">
<div class="control-info">
<div class="control-name">Relay Channel 2</div>
<div class="control-desc">Safety-controlled line</div>
<div class="control-row">
<div class="control-info">
<div class="control-name">Relay Channel 2</div>
<div class="control-desc">Safety-controlled line</div>
</div>
<input type="checkbox" data-bind="controls.relay2" data-autosave="1" class="toggle" />
</div>
<input type="checkbox" data-bind="controls.relay2" data-autosave="1" class="toggle" />
</div>
</div>
</div>
@@ -199,10 +201,10 @@
</div>
</section>
<section id="settings" class="tab-panel" role="tabpanel" aria-labelledby="tab-settings" hidden>
<div class="settings-layout">
<div class="settings-panel">
<div class="settings-panel-title">Device settings</div>
<div class="settings-fields">
<div class="panel-layout">
<div class="panel">
<div class="panel-title">Device settings</div>
<div class="panel-body">
<div class="field">
<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" />
@@ -212,7 +214,7 @@
<input class="field-input" id="setting-volume" type="text" data-bind="settings.volume" />
</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-primary" type="button" data-save="settings">Save</button>
</div>
tutorials/device-dashboard/full-dashboard/web_root/style.css
+26 -54
View File
@@ -86,7 +86,6 @@ body {
height: 11px;
border-radius: 50%;
background: rgb(16, 185, 129);
flex-shrink: 0;
}
@@ -140,9 +139,6 @@ body {
.tab-panel {
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 {
@@ -249,39 +245,32 @@ body {
display: none;
}
/* ── Settings panel ─────────────────────────────── */
/* ── Panel ──────────────────────────────────────── */
.settings-layout {
.panel-layout {
padding-top: 1rem;
max-width: 22rem;
}
.settings-panel {
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 {
.panel-body {
display: flex;
flex-direction: column;
gap: 0.75rem;
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 {
display: flex;
flex-direction: row;
@@ -349,15 +338,7 @@ body {
pointer-events: none;
}
.settings-panel-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
}
/* ── Buttons ─────────────────────────────────────── */
.btn {
display: inline-flex;
@@ -396,7 +377,6 @@ body {
.btn-primary:hover {
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);
/*transform: translateY(-1px);*/
}
.btn-primary:active,
@@ -431,28 +411,21 @@ body {
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);
padding: 1.5rem;
overflow: hidden;
display: flex;
flex-direction: column;
}
.panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 1.1rem;
}
.panel-title {
font-size: 1.05rem;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.95rem;
font-weight: 700;
color: #18314f;
margin-bottom: 0.2rem;
}
.panel-subtitle {
color: #7d94ac;
font-size: 0.8rem;
color: #334155;
padding: 1rem 1.25rem 0.9rem;
border-bottom: 1px solid #e2e8f0;
flex-shrink: 0;
}
/* Chart */
@@ -516,7 +489,6 @@ body {
display: flex;
flex-direction: column;
flex: 1;
margin-top: 0.25rem;
}
.control-row {
@@ -601,4 +573,4 @@ body {
.overview-grid {
grid-template-columns: 1fr;
}
}
}