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

Added overall scores to the top of each viewed observation.

Browse Source
This commit is contained in:
neviyn 2018-10-11 08:53:39 +01:00
parent a0ae8803be
commit 2b1966e505
2 changed files with 42 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -257,7 +257,7 @@ export default {
};
</script>
<style>
<style scoped>
.top-buffer {
margin-top: 10px;
}

41
frontend/src/views/ViewObservations.vue
View File

@ -52,6 +52,28 @@
<b-tabs pills card vertical>
<b-tab v-for="(observation, index) in observationData" v-bind:key="index">
<p slot="title">{{ observation.date }}<br/>{{ observation.whom }} {{ observation.type }}<br/>{{ observation.observed }}</p>
<b-row>
<b-col class="centered-image">
<img src="../assets/Monitoring.svg" class="image-opacity"/>
<div class="image-centered-text">{{ observation.monitoring }}</div>
</b-col>
<b-col class="centered-image">
<img src="../assets/Control.svg" class="image-opacity"/>
<div class="image-centered-text">{{ observation.control }}</div>
</b-col>
<b-col class="centered-image">
<img src="../assets/Conservatism.svg" class="image-opacity"/>
<div class="image-centered-text">{{ observation.conservatism }}</div>
</b-col>
<b-col class="centered-image">
<img src="../assets/Teamwork.svg" class="image-opacity"/>
<div class="image-centered-text">{{ observation.teamwork }}</div>
</b-col>
<b-col class="centered-image">
<img src="../assets/Knowledge.svg" class="image-opacity"/>
<div class="image-centered-text">{{ observation.knowledge }}</div>
</b-col>
</b-row>
<div v-for="(entry, index2) in observation.entries" v-bind:key="index2">
<p>{{ entry.type }} - {{ entry.rating }}</p>
<b-form-group label="Strengths">
@ -161,3 +183,22 @@ export default {
}
};
</script>
<style scoped>
.image-opacity {
opacity: 0.5;
}
.centered-image {
position: relative;
text-align: center;
}
.image-centered-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
color: white;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}
</style>