From 77a0077be179060a6a11ba1cf68ca95d769fb81c Mon Sep 17 00:00:00 2001
From: Nathan Cannon <nathan.cannon@edf-energy.com>
Date: Fri, 19 Oct 2018 10:33:32 +0100
Subject: [PATCH] Totals now only show if they actually have a value.

---
 frontend/src/views/Observation.vue | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/src/views/Observation.vue b/frontend/src/views/Observation.vue
index b9a66c6..693194c 100644
--- a/frontend/src/views/Observation.vue
+++ b/frontend/src/views/Observation.vue
@@ -6,49 +6,49 @@
                 {{type}}&nbsp;/&nbsp;{{description}}
             </h3>
             <b-container class="sidebar">
-                <b-row align-v="center" class="sidebar-vert-padding">
+                <b-row align-v="center" class="sidebar-vert-padding" v-if="totals[0] > 0">
                     <b-col class="centered-image">
                         <img src="../assets/Monitoring.svg" class="image-opacity"/>
                         <div class="image-centered-text">{{ totals[0] }}</div>
                     </b-col>
                 </b-row>
-                <b-row align-v="center" class="sidebar-vert-padding">
+                <b-row align-v="center" class="sidebar-vert-padding" v-if="totals[1] > 0">
                     <b-col class="centered-image">
                         <img src="../assets/Control.svg" class="image-opacity"/>
                         <div class="image-centered-text">{{ totals[1] }}</div>
                     </b-col>
                 </b-row>
-                <b-row align-v="center" class="sidebar-vert-padding">
+                <b-row align-v="center" class="sidebar-vert-padding" v-if="totals[2] > 0">
                     <b-col class="centered-image">
                         <img src="../assets/Control.svg" class="image-opacity"/>
                         <div class="image-centered-text">{{ totals[2] }}</div>
                     </b-col>
                 </b-row>
-                <b-row align-v="center" class="sidebar-vert-padding">
+                <b-row align-v="center" class="sidebar-vert-padding" v-if="totals[3] > 0">
                     <b-col class="centered-image">
                         <img src="../assets/Conservatism.svg" class="image-opacity"/>
                         <div class="image-centered-text">{{ totals[3] }}</div>
                     </b-col>
                 </b-row>
-                <b-row align-v="center" class="sidebar-vert-padding">
+                <b-row align-v="center" class="sidebar-vert-padding" v-if="totals[4] > 0">
                     <b-col class="centered-image">
                         <img src="../assets/Teamwork.svg" class="image-opacity"/>
                         <div class="image-centered-text">{{ totals[4] }}</div>
                     </b-col>
                 </b-row>
-                <b-row align-v="center" class="sidebar-vert-padding">
+                <b-row align-v="center" class="sidebar-vert-padding" v-if="totals[5] > 0">
                     <b-col class="centered-image">
                         <img src="../assets/Teamwork.svg" class="image-opacity"/>
                         <div class="image-centered-text">{{ totals[5] }}</div>
                     </b-col>
                 </b-row>
-                <b-row align-v="center" class="sidebar-vert-padding">
+                <b-row align-v="center" class="sidebar-vert-padding" v-if="totals[6] > 0">
                     <b-col class="centered-image">
                         <img src="../assets/Teamwork.svg" class="image-opacity"/>
                         <div class="image-centered-text">{{ totals[6] }}</div>
                     </b-col>
                 </b-row>
-                <b-row align-v="center">
+                <b-row align-v="center" class="sidebar-vert-padding" v-if="totals[7] > 0">
                     <b-col class="centered-image">
                         <img src="../assets/Knowledge.svg" class="image-opacity"/>
                         <div class="image-centered-text">{{ totals[7] }}</div>
@@ -340,6 +340,7 @@ export default {
   top: 20%; /* Stay at the top */
   left: 0;
   overflow-x: hidden; /* Disable horizontal scroll */
+  overflow-y: hidden;
   padding-top: 20px;
 }
 
@@ -347,14 +348,14 @@ export default {
   margin-bottom: 25%;
 }
 
-@media screen and (max-height: 500px) {
+@media screen and (max-height: 600px) {
   .sidebar {
     top: 0; /* Stay at the top */
   }
 }
 
 img {
-  height: 80px;
+  height: 60px;
   object-fit: contain;
 }
 </style>