From fd97acf9f043d6ba363e27f900b7703d9a85f01b Mon Sep 17 00:00:00 2001
From: Philipp Klaus <klaus@physik.uni-frankfurt.de>
Date: Thu, 24 Aug 2017 16:52:08 +0200
Subject: [PATCH] DASH: val&unit in single <td> & streamlined design

---
 python_suite/dashboard/static/css/style.css   | 80 ++++++++++++++-----
 .../dashboard/views/pv_overview.jinja2        | 18 ++---
 2 files changed, 71 insertions(+), 27 deletions(-)

diff --git a/python_suite/dashboard/static/css/style.css b/python_suite/dashboard/static/css/style.css
index 1451068..e4f320b 100644
--- a/python_suite/dashboard/static/css/style.css
+++ b/python_suite/dashboard/static/css/style.css
@@ -28,14 +28,47 @@
   text-align: center;
 }
 
-table, th, td {
+table {
+  /* border-collapse: collapse; */
+  border-spacing: 0px;
+}
+
+th, td {
   border: 1px solid black;
+  border-left-width: 0;
+  border-right-width: 0;
+  border-bottom-width: 0;
+  padding: 4px;
+}
+th {
+  border-bottom: 1.5px solid black;
+  border-top-width: 0;
 }
 
 table, th {
   text-align: left;
 }
 
+td.value, th.value_header {
+  text-align: center;
+}
+
+td.value span.value {
+  float: left;
+  width: 70%;
+  text-align: right;
+}
+td.value span.unit {
+  float: right;
+  width: 28%;
+  text-align: left;
+  padding-left: .1em;
+}
+
+div.error {
+  text-align: center;
+}
+
 /* MENU_BAR*/
 .menu_bar {
   list-style-type: none;
@@ -62,38 +95,49 @@ table, th {
 .active {
   background-color:#4CAF50;
 }
+
 /* ALARMS */
-.invalid_alarm:after {
+.invalid_alarm .indicator,
+.minor_alarm .indicator,
+.major_alarm .indicator,
+.disconnected .indicator {
+  border: 4px solid;
+}
+
+/* invalid */
+.invalid_alarm .error:before {
   content: "- invalid -";
-  position: relative;
-  float: right;
   color: #0091FF;
 }
-.invalid_alarm {
-  border: 3px solid #0091FF;
+.invalid_alarm .indicator {
+  border-color: #0091FF;
 }
 
-.minor_alarm:after {
+/* minor */
+.minor_alarm .error:before {
   content: "- MINOR -";
-  position: relative;
-  float: right;
   color: #FF6F00;
 }
-.minor_alarm {
-  border: 3px solid #FF6F00;
+.minor_alarm .indicator {
+  border-color: #FF6F00;
 }
-.major_alarm:after {
+
+/* major */
+.major_alarm .error:before {
   content: "- MAJOR -";
-  position: relative;
-  float: right;
   color: #FF0000;
 }
-.major_alarm {
-  border: 3px solid #FF0000;
+.major_alarm .indicator {
+  border-color: #FF0000;
 }
 
-.disconnected {
-  border: 3px solid #EBFF00;
+/* disconnected */
+.disconnected .error:before {
+  content: "- disconnected -";
+  color: #FF0000;
+}
+.disconnected .indicator {
+  border-color: #EBFF00;
 }
 
 /* TOGGLE ON/OFF */
diff --git a/python_suite/dashboard/views/pv_overview.jinja2 b/python_suite/dashboard/views/pv_overview.jinja2
index 87a6ed5..cee4b1b 100644
--- a/python_suite/dashboard/views/pv_overview.jinja2
+++ b/python_suite/dashboard/views/pv_overview.jinja2
@@ -33,22 +33,22 @@ path {
 				<h2>{{ this_group.name }}</h2>
 					 <table style="width:100%">
 						<colgroup>
-							<col span="1" style="width: 55%;">
-							<col span="1" style="width: 15%;">
-							<col span="1" style="width: 10%;">
+							<col span="1" style="width: 60%;">
+							<col span="1" style="width: 20%;">
 							<col span="1" style="width: 20%;">
 						</colgroup>
 						<tr>
 							<th>Process Variable</th>
-							<th>Value</th>
-							<th>Unit</th>
+							<th class="value_header">Value & Unit</th>
 							<th>Sparkline</th>
 						</tr>
 						{% for pv_name in this_group.PVs %}
 						{% set PV = config.PVs[config.PV_lookup[pv_name]] %}
-						<tr style="cursor: pointer;" title="{{ PV.alias }}">
+						<tr style="cursor: pointer;" title="{{ PV.alias }}" class="{{ PV.classes }}">
 							<td>{{ PV.name }}</td>
-							<td class="{{ PV.classes }}">
+							<td class="value indicator">
+								<div class="error"></div>
+								<span class="value">
 								{% if 'switch' in PV.classes %}
 									<label class="toggle">
 										<input type="checkbox" disabled readonly {{ 'checked' if 'ON' in PV.value else '' }}>
@@ -61,8 +61,8 @@ path {
 										{{ PV.value }}
 									{% endif %}
 								{% endif %}
-							</td>
-							<td>{{ PV.unit }}</td>
+								</span>
+								<span class="unit">{{ PV.unit }}</span>
 							<td><div id="sparkline-{{ PV.name|replace(':','-') }}" class="sparkline"></div></td>
 						</tr>
 						{% endfor %}
-- 
2.43.0