neviyn/ObservationDatabase
1
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

Totals now only show if they actually have a value.

Browse Source
This commit is contained in:
neviyn 2018-10-19 10:33:32 +01:00
parent f1041ca4b4
commit 77a0077be1
1 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/views/Observation.vue
View File

@ -6,49 +6,49 @@
{{type}} / {{description}} {{type}} / {{description}}
</h3> </h3>
<b-container class="sidebar"> <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"> <b-col class="centered-image">
<img src="../assets/Monitoring.svg" class="image-opacity"/> <img src="../assets/Monitoring.svg" class="image-opacity"/>
<div class="image-centered-text">{{ totals[0] }}</div> <div class="image-centered-text">{{ totals[0] }}</div>
</b-col> </b-col>
</b-row> </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"> <b-col class="centered-image">
<img src="../assets/Control.svg" class="image-opacity"/> <img src="../assets/Control.svg" class="image-opacity"/>
<div class="image-centered-text">{{ totals[1] }}</div> <div class="image-centered-text">{{ totals[1] }}</div>
</b-col> </b-col>
</b-row> </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"> <b-col class="centered-image">
<img src="../assets/Control.svg" class="image-opacity"/> <img src="../assets/Control.svg" class="image-opacity"/>
<div class="image-centered-text">{{ totals[2] }}</div> <div class="image-centered-text">{{ totals[2] }}</div>
</b-col> </b-col>
</b-row> </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"> <b-col class="centered-image">
<img src="../assets/Conservatism.svg" class="image-opacity"/> <img src="../assets/Conservatism.svg" class="image-opacity"/>
<div class="image-centered-text">{{ totals[3] }}</div> <div class="image-centered-text">{{ totals[3] }}</div>
</b-col> </b-col>
</b-row> </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"> <b-col class="centered-image">
<img src="../assets/Teamwork.svg" class="image-opacity"/> <img src="../assets/Teamwork.svg" class="image-opacity"/>
<div class="image-centered-text">{{ totals[4] }}</div> <div class="image-centered-text">{{ totals[4] }}</div>
</b-col> </b-col>
</b-row> </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"> <b-col class="centered-image">
<img src="../assets/Teamwork.svg" class="image-opacity"/> <img src="../assets/Teamwork.svg" class="image-opacity"/>
<div class="image-centered-text">{{ totals[5] }}</div> <div class="image-centered-text">{{ totals[5] }}</div>
</b-col> </b-col>
</b-row> </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"> <b-col class="centered-image">
<img src="../assets/Teamwork.svg" class="image-opacity"/> <img src="../assets/Teamwork.svg" class="image-opacity"/>
<div class="image-centered-text">{{ totals[6] }}</div> <div class="image-centered-text">{{ totals[6] }}</div>
</b-col> </b-col>
</b-row> </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"> <b-col class="centered-image">
<img src="../assets/Knowledge.svg" class="image-opacity"/> <img src="../assets/Knowledge.svg" class="image-opacity"/>
<div class="image-centered-text">{{ totals[7] }}</div> <div class="image-centered-text">{{ totals[7] }}</div>
@ -340,6 +340,7 @@ export default {
top: 20%; /* Stay at the top */ top: 20%; /* Stay at the top */
left: 0; left: 0;
overflow-x: hidden; /* Disable horizontal scroll */ overflow-x: hidden; /* Disable horizontal scroll */
overflow-y: hidden;
padding-top: 20px; padding-top: 20px;
} }
@ -347,14 +348,14 @@ export default {
margin-bottom: 25%; margin-bottom: 25%;
} }
@media screen and (max-height: 500px) { @media screen and (max-height: 600px) {
.sidebar { .sidebar {
top: 0; /* Stay at the top */ top: 0; /* Stay at the top */
} }
} }
img { img {
height: 80px; height: 60px;
object-fit: contain; object-fit: contain;
} }
</style> </style>