From 5fd76013cd7d41b0dbaa4c8e0de69a8ba252b1dc Mon Sep 17 00:00:00 2001
From: cpq <sergey.lyubka@cesanta.com>
Date: Mon, 20 Apr 2026 12:29:44 +0100
Subject: [PATCH] Panels

---
 .../full-dashboard/web_root/index.html        | 58 +++++++-------
 .../full-dashboard/web_root/style.css         | 80 ++++++-------------
 2 files changed, 56 insertions(+), 82 deletions(-)

diff --git a/tutorials/device-dashboard/full-dashboard/web_root/index.html b/tutorials/device-dashboard/full-dashboard/web_root/index.html
index 3b169078..42fce350 100644
--- a/tutorials/device-dashboard/full-dashboard/web_root/index.html
+++ b/tutorials/device-dashboard/full-dashboard/web_root/index.html
@@ -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>
diff --git a/tutorials/device-dashboard/full-dashboard/web_root/style.css b/tutorials/device-dashboard/full-dashboard/web_root/style.css
index 70f022e4..66f97e1d 100644
--- a/tutorials/device-dashboard/full-dashboard/web_root/style.css
+++ b/tutorials/device-dashboard/full-dashboard/web_root/style.css
@@ -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;
   }
-}
+}
\ No newline at end of file