From 37efde7281498468f4135db5109d31c86e88b86d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Z=C3=ADpek?= <jan@zipek.cz>
Date: Mon, 15 Aug 2022 09:07:38 +0200
Subject: [PATCH] Improved page layout and button styling

---
 client/css/style.css |  57 ++++++++++++++++++++++--
 client/js/index.js   | 104 +++++++++++++++++++++++--------------------
 2 files changed, 109 insertions(+), 52 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index a1fb1f8..8c20275 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1,6 +1,8 @@
 body, html {
 	padding: 0;
 	margin: 0;
+	width: 100%;
+	height: 100%;
 }
 
 body {
@@ -8,13 +10,42 @@ body {
 	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
-button, input {
+button, input, select {
 	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
+button {
+	background: #1160F0;
+	color: #fff;
+	cursor: pointer;
+	border: none;
+	padding: 0.25rem 0.4rem;
+	border-radius: 0.25rem;
+}
+
+button:hover {
+	background-color: #6B9CF5;
+}
+
+input, select {
+	padding: 0.15rem 0.4rem;
+	box-sizing: border-box;
+}
+
+#sensors-container {
+	height: 100%;
+	overflow: auto;
+	display: flex;
+	flex-direction: column;
+}
+
 .sensors {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
+	overflow: auto;
+	min-height: 0;
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
 }
 
 @media only screen and (max-width: 1200px) {
@@ -29,6 +60,8 @@ button, input {
 	margin: 0.5rem;
 	box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
 	overflow: hidden;
+	min-height: 350px;
+	height: 350px;
 }
 
 .sensor .header {
@@ -64,6 +97,7 @@ button, input {
 	margin-top: 5%;
 	box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
 	border-radius: 0.5rem;
+	width: 20rem;
 }
 
 .settings-modal .inner .body {
@@ -83,8 +117,17 @@ form .input {
 
 form .actions {
 	text-align: right;
+	margin-top: 1rem;
 }
 
+form .actions button {
+	padding: 0.5rem 1rem;
+}
+
+form .actions button.cancel {
+	background-color: transparent;
+	color: #000;
+}
 
 form.horizontal {
 	flex-direction: row;
@@ -102,13 +145,19 @@ form.horizontal .input label {
 	margin-right: 0.25rem;
 }
 
-.filters {
+.filters .inner {
 	display: flex;
 	align-items: center;
 	padding: 0.5rem 0.5rem;
-	margin-bottom: 1rem;
 	background-color: #fff;
-	box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
+}
+
+.filters .shadow {
+	position: absolute;
+	background: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(190,190,190,1) 100%);
+	width: 100%;
+	height: 12px;
+	z-index: 1;
 }
 
 .filters .actions {
diff --git a/client/js/index.js b/client/js/index.js
index c3a5c53..187d5cc 100644
--- a/client/js/index.js
+++ b/client/js/index.js
@@ -70,6 +70,10 @@ function renderConfig({ sensor, onSave, shown }) {
         <div class="inner" onclick=${preventPropagation}>
           <div class="body">
             <form onsubmit="${handleSave}">
+              <div class="input">
+                <label>Sensor</label>
+                <input value="${sensor.sensor}" disabled />
+              </div>
               <div class="input">
                 <label>Name</label>
                 <input name="name" value="${config.name}" />
@@ -98,7 +102,7 @@ function renderConfig({ sensor, onSave, shown }) {
               </div>
 
               <div class="actions">
-                <button onclick=${hideConfig} type="button">Cancel</button>
+                <button class="cancel" onclick=${hideConfig} type="button">Cancel</button>
                 <button>Save</button>
               </div>
             </form>
@@ -201,58 +205,61 @@ function renderFilters() {
   render(
     $filters,
     html`
-      <div class="filter-form">
-        <form class="horizontal" onsubmit=${handleApply}>
-          <div class="input">
-            <label>Interval</label>
-            <select
-              name="interval"
-              value="${lastIntervalSelected}"
-              onchange=${handleIntervalChange}
-            >
-              <option value="hour">Hour</option>
-              <option value="day">Day</option>
-              <option value="week">Week</option>
-              <option value="month">Month</option>
-              <option value="custom">Custom</option>
-            </select>
-          </div>
+      <div class="inner">
+        <div class="filter-form">
+          <form class="horizontal" onsubmit=${handleApply}>
+            <div class="input">
+              <label>Interval</label>
+              <select
+                name="interval"
+                value="${lastIntervalSelected}"
+                onchange=${handleIntervalChange}
+              >
+                <option value="hour">Hour</option>
+                <option value="day">Day</option>
+                <option value="week">Week</option>
+                <option value="month">Month</option>
+                <option value="custom">Custom</option>
+              </select>
+            </div>
 
-          ${isCustomSelected
-            ? html`
-                <div class="input date-time">
-                  <label>From</label>
-                  <div>
-                    <input
-                      type="date"
-                      value="${customFrom[0]}"
-                      name="fromDate"
-                    />
-                    <input
-                      type="time"
-                      value="${customFrom[1]}"
-                      name="fromTime"
-                    />
+            ${isCustomSelected
+              ? html`
+                  <div class="input date-time">
+                    <label>From</label>
+                    <div>
+                      <input
+                        type="date"
+                        value="${customFrom[0]}"
+                        name="fromDate"
+                      />
+                      <input
+                        type="time"
+                        value="${customFrom[1]}"
+                        name="fromTime"
+                      />
+                    </div>
                   </div>
-                </div>
-                <div class="input date-time">
-                  <label>To</label>
-                  <div>
-                    <input type="date" value="${customTo[0]}" name="toDate" />
-                    <input type="time" value="${customTo[1]}" name="toTime" />
+                  <div class="input date-time">
+                    <label>To</label>
+                    <div>
+                      <input type="date" value="${customTo[0]}" name="toDate" />
+                      <input type="time" value="${customTo[1]}" name="toTime" />
+                    </div>
                   </div>
-                </div>
-              `
-            : undefined}
+                `
+              : undefined}
 
-          <button>Apply</button>
-        </form>
-      </div>
-      <div class="actions">
-        <!--TODO:-->
-        <!--<label class="checkbox-label"><input type="checkbox"><span>auto-refresh</span></label>-->
-        <button onclick=${refreshAll}>Refresh</button>
+            <button>Apply</button>
+          </form>
+        </div>
+        <div class="actions">
+          <!--TODO:-->
+          <!--<label class="checkbox-label"><input type="checkbox"><span>auto-refresh</span></label>-->
+          <button onclick=${refreshAll}>Refresh</button>
+        </div>
       </div>
+      <div class="shadow"></div>
     `
   );
 }
@@ -344,6 +351,7 @@ function createSensor(sensor) {
           t: 20,
           pad: 5,
         },
+        height: 300
       },
       {
         responsive: true,