DASH: val&unit in single <td> & streamlined design

diff --git a/python_suite/dashboard/static/css/style.css b/python_suite/dashboard/static/css/style.css
index 14510683b04a38da43a79b43147159c95b3f484d..e4f320b4fbe93b825648447674502f8be1ab442b 100644 (file)
--- 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 87a6ed57d47ab3827a12cb122f2d7eab2e990304..cee4b1bec0f118618a8bbfa258ad67cef38667ca 100644 (file)
--- 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 %}