Fix total_time template

app/assets/javascripts/cycle_analytics/components/total_time_component.js.es6

@@ -6,23 +6,11 @@
       time: Object,
     },
     template: `
-      <span>
-        <span class="days" v-if="time.days">
-          {{ time.days }}
-          <abbr title="Days">{{ time.days === 1 ? 'day' : 'days' }}</abbr>
-        </span>
-        <span class="hours" v-if="time.hours">
-          {{ time.hours }}
-          <abbr title="Hours">hr</abbr>
-        </span>
-        <span class="mins" v-if="time.mins">
-          {{ time.mins }}
-          <abbr title="Minutes">mins</abbr>
-        </span>
-        <span class="seconds hide" v-if="time.seconds">
-          {{ time.seconds }}
-          <abbr title="Seconds">s</abbr>
-        </span>
+      <span class="total-time">
+        <template v-if="time.days">{{ time.days }} <span>{{ time.days === 1 ? 'day' : 'days' }}</span></template>
+        <template v-if="time.hours">{{ time.hours }} <span>hr</span></template>
+        <template v-if="time.mins">{{ time.mins }} <span>mins</span></template>
+        <!-- <template v-if="time.seconds">{{ time.seconds }} <span>s</span></template> -->
       </span>
     `,
   });

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -306,12 +306,15 @@
     .item-time {
       width: 25%;
       text-align: right;
+    }
+
+    .total-time {
       font-size: $cycle-analytics-big-font;
       color: $cycle-analytics-dark-text;
 
-      abbr {
-        font-size: $gl-font-size;
+      span {
         color: $gl-text-color;
+        font-size: $gl-font-size;
       }
     }