Improved page layout and button styling

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 {

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,6 +205,7 @@ function renderFilters() {
   render(
     $filters,
     html`
+      <div class="inner">
         <div class="filter-form">
           <form class="horizontal" onsubmit=${handleApply}>
             <div class="input">
@@ -253,6 +258,8 @@ function renderFilters() {
           <!--<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,