From 95b40bac3d3b1409714e043aaccb446a9663d667 Mon Sep 17 00:00:00 2001
From: Nathan Cannon <nathan.cannon@edf-energy.com>
Date: Mon, 22 Oct 2018 10:44:45 +0100
Subject: [PATCH] Persons now rendered in Bootstrap columns rather than a list.

---
 frontend/src/views/ViewObservations.vue | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/src/views/ViewObservations.vue b/frontend/src/views/ViewObservations.vue
index 4049fa9..b3a7499 100644
--- a/frontend/src/views/ViewObservations.vue
+++ b/frontend/src/views/ViewObservations.vue
@@ -53,39 +53,40 @@
                     <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>
                         <h2>{{ observation.date }}, {{ observation.whom }}<br/>{{ observation.type }}, {{ observation.observed }}</h2>
-                        <ul>
-                            <li v-for="person in observation.persons">{{ person.name }}</li>
-                        </ul>
+                        <b-row align-h="center">
+                            <b-col cols="2" v-for="person in observation.persons">{{ person.name }}</b-col>
+                        </b-row>
+                        <br />
                         <b-row>
-                            <b-col class="centered-image">
+                            <b-col class="centered-image" v-if="observation.monitoring">
                                 <img src="../assets/Monitoring.svg" class="image-opacity"/>
                                 <div class="image-centered-text">{{ observation.monitoring }}</div>
                             </b-col>
-                            <b-col class="centered-image">
+                            <b-col class="centered-image" v-if="observation.controlProcedural">
                                 <img src="../assets/Control.svg" class="image-opacity"/>
                                 <div class="image-centered-text">{{ observation.controlProcedural }}</div>
                             </b-col>
-                            <b-col class="centered-image">
+                            <b-col class="centered-image" v-if="observation.control">
                                 <img src="../assets/Control.svg" class="image-opacity"/>
                                 <div class="image-centered-text">{{ observation.control }}</div>
                             </b-col>
-                            <b-col class="centered-image">
+                            <b-col class="centered-image" v-if="observation.conservatism">
                                 <img src="../assets/Conservatism.svg" class="image-opacity"/>
                                 <div class="image-centered-text">{{ observation.conservatism }}</div>
                             </b-col>
-                            <b-col class="centered-image">
+                            <b-col class="centered-image" v-if="observation.teamworkCommunications">
                                 <img src="../assets/Teamwork.svg" class="image-opacity"/>
                                 <div class="image-centered-text">{{ observation.teamworkCommunications }}</div>
                             </b-col>
-                            <b-col class="centered-image">
+                            <b-col class="centered-image" v-if="observation.teamworkLeadership">
                                 <img src="../assets/Teamwork.svg" class="image-opacity"/>
                                 <div class="image-centered-text">{{ observation.teamworkLeadership }}</div>
                             </b-col>
-                            <b-col class="centered-image">
+                            <b-col class="centered-image" v-if="observation.teamworkWorkload">
                                 <img src="../assets/Teamwork.svg" class="image-opacity"/>
                                 <div class="image-centered-text">{{ observation.teamworkWorkload }}</div>
                             </b-col>
-                            <b-col class="centered-image">
+                            <b-col class="centered-image" v-if="observation.knowledge">
                                 <img src="../assets/Knowledge.svg" class="image-opacity"/>
                                 <div class="image-centered-text">{{ observation.knowledge }}</div>
                             </b-col>