feat: Change styling of labels in lists

src/components/ObservationList.vue

@@ -40,7 +40,7 @@
 					</div>
 					<div v-else class="row">
 						<div class="col-8">
-						{{ obs.timeOfObservation | dateFormat }} <br/><b>{{obs.observationHeading}}</b>
+  						<span class="list-label">{{ obs.timeOfObservation | dateFormat }}</span><br/>{{obs.observationHeading}}
 						</div>
             <div class="col-4 d-flex align-items-center justify-content-end">
               <router-link v-if="obs.observationTimeSeriesId"

src/components/ObservationTimeSeriesList.vue

@@ -52,7 +52,7 @@
             </div>
             <div v-else class="row">
               <div class="col-9">
-                <span class="timeseries-label">{{label(ots)}}</span><br>{{ ots.name }}
+                <span class="list-label">{{label(ots)}}</span><br>{{ ots.name }}
               </div>
               <div class="col-3 d-flex align-items-center justify-content-end">
                   <span class="badge badge-pill badge-info">{{ getObservationCount(ots.observationTimeSeriesId) }}</span>
@@ -76,7 +76,7 @@
                            class="list-group-item list-group-item-action bg-light"
                            v-bind:class="{'text-danger':obs.isNew, 'text-primary':obs.toUpload, 'text-secondary':obs.isDeleted}"
                            v-if="!obs.isDeleted" v-bind:key="obs.observationId">
-                {{ obs.timeOfObservation | dateFormat }}<br/>{{ obs.observationHeading }}
+                <span class="list-label">{{ obs.timeOfObservation | dateFormat }}</span><br/>{{ obs.observationHeading }}
               </router-link>
             </li>
           </ul>
@@ -190,11 +190,11 @@ export default {
       }
     },
     loadObservationMapFromLocalStore() {
-      const jsonLocalObservationList = localStorage.getItem(CommonUtil.CONST_STORAGE_OBSERVATION_LIST);
-      if (jsonLocalObservationList) {
-        const localObservationList = JSON.parse(jsonLocalObservationList);
+      const localObservationList = localStorage.getItem(CommonUtil.CONST_STORAGE_OBSERVATION_LIST);
+      if (localObservationList) {
+        const jsonLocalObservationList = JSON.parse(localObservationList);
         this.observationMap = {};
-        localObservationList.forEach(observation => {
+        jsonLocalObservationList.forEach(observation => {
           const ostId = observation.observationTimeSeries && observation.observationTimeSeries.observationTimeSeriesId ? observation.observationTimeSeries.observationTimeSeriesId : undefined;
           // If observation has been deleted (but not yet synced) - remove from map
           if (observation.deleted) {
@@ -304,13 +304,6 @@ a {
   text-decoration: underline !important;
 }
 
-.timeseries-label {
-  font-family: monospace;
-  color: grey;
-  font-size: 0.8rem;
-}
-
-
 .small-icon {
   color: #3d8052;
   margin-right: 5px;

static/css/vipsobsapp.css

@@ -16,6 +16,12 @@ body {
 
 }
 
+.list-label {
+  font-family: monospace;
+  color: grey;
+  font-size: 0.8rem;
+}
+
 a.nav-link{
 	color: black !important;
 }