From 821102f69beef85fc6560173a392b3a402e8f923 Mon Sep 17 00:00:00 2001
From: Nathan Cannon <nathan.cannon@edf-energy.com>
Date: Fri, 16 Nov 2018 14:53:04 +0000
Subject: [PATCH] Limited length of tab title

---
 frontend/src/views/ViewObservations.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/ViewObservations.vue b/frontend/src/views/ViewObservations.vue
index 3c6a6a4..6046b30 100644
--- a/frontend/src/views/ViewObservations.vue
+++ b/frontend/src/views/ViewObservations.vue
@@ -56,7 +56,7 @@
             <b-card no-body>
                 <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>
+                        <p slot="title">{{ observation.date }}<br/>{{ observation.whom }} {{ observation.type }}<br/>{{ shortenedString(observation.observed) }}</p>
                         <h2>{{ observation.date }}, {{ observation.whom }}<br/>{{ observation.type }}, {{ observation.observed }}</h2>
                         <b-row align-h="center">
                             <h4>Observed by:&nbsp;<span v-bind:key="index" v-for="(tutor, index) in observation.tutors"><i>{{ tutor.name }}<span v-if="index+1 < observation.tutors.length">,&nbsp;</span></i></span></h4>
@@ -274,6 +274,14 @@ export default {
           this.errorMessage = error.response.data;
           this.$refs.errorModal.show();
         });
+    },
+    shortenedString: function(data) {
+        if(data.len < 20){
+          return data;
+        }
+        else{
+          return data.substr(0, 20) + "...";
+        }
     }
   },
   watch: {