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}}
</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>