Refactor table stats field set styles.

frontend/src/assets/style.scss

@@ -27,6 +27,7 @@ $primary: #0055d4;
 $green: #0db35e;
 $turquoise: $green;
 $red: #FF5722;
+
 $link: $primary;
 $input-placeholder-color: $grey-light;
 $grey-lightest: #eaeaea;
@@ -324,6 +325,31 @@ body.is-noscroll {
     cursor: not-allowed;
     color: $grey-light;
   }
+
+  td {
+    .fields {
+      font-size: $size-7;
+
+      p {
+        display: table-row;
+        border-bottom: 1px solid #ccc;
+        line-height: 0.775rem;
+      }
+
+      label {
+        font-weight: bold;
+        display: table-cell;
+        vertical-align: top;
+        text-align: right;
+        padding-bottom: 6px;
+      }
+      span {
+        display: inline-block;
+        margin-left: 10px;
+      }
+    }
+
+  }
 }
 
 /* Modal */
@@ -594,8 +620,10 @@ section.dashboard {
 
 /* Lists page */
 section.lists {
-  td .tag {
-    min-width: 65px;
+  td {
+    .tag {
+      min-width: 65px;
+    }
   }
 }
 
@@ -662,26 +690,11 @@ section.campaigns {
         margin-top: 5px;
       }
 
-      p {
-        margin: 0 !important;
-      }
-
       &.lists ul {
         // font-size: $size-7;
         list-style-type: circle;
       }
 
-      .fields {
-        font-size: $size-7;
-        label {
-          font-weight: bold;
-          text-align: right;
-          min-width: 50px;
-          margin-right: 10px;
-          display: inline-block;
-        }
-      }
-
       &.draft {
         color: $grey-lighter;
       }

frontend/src/views/Campaigns.vue

@@ -99,20 +99,20 @@
         <div class="fields timestamps" :set="stats = getCampaignStats(props.row)">
           <p>
             <label>{{ $t('globals.fields.createdAt') }}</label>
-            {{ $utils.niceDate(props.row.createdAt, true) }}
+            <span>{{ $utils.niceDate(props.row.createdAt, true) }}</span>
           </p>
           <p v-if="stats.startedAt">
             <label>{{ $t('campaigns.startedAt') }}</label>
-            {{ $utils.niceDate(stats.startedAt, true) }}
+            <span>{{ $utils.niceDate(stats.startedAt, true) }}</span>
           </p>
           <p v-if="isDone(props.row)">
             <label>{{ $t('campaigns.ended') }}</label>
-            {{ $utils.niceDate(stats.updatedAt, true) }}
+            <span>{{ $utils.niceDate(stats.updatedAt, true) }}</span>
           </p>
           <p v-if="stats.startedAt && stats.updatedAt"
             class="is-capitalized" title="Duration">
             <label><b-icon icon="alarm" size="is-small" /></label>
-            {{ $utils.duration(stats.startedAt, stats.updatedAt) }}
+            <span>{{ $utils.duration(stats.startedAt, stats.updatedAt) }}</span>
           </p>
         </div>
       </b-table-column>
@@ -121,21 +121,26 @@
         <div class="fields stats" :set="stats = getCampaignStats(props.row)">
           <p>
             <label>{{ $t('campaigns.views') }}</label>
-            {{ $utils.formatNumber(props.row.views) }}
+            <span>{{ $utils.formatNumber(props.row.views) }}</span>
           </p>
           <p>
             <label>{{ $t('campaigns.clicks') }}</label>
-            {{ $utils.formatNumber(props.row.clicks) }}
+            <span>{{ $utils.formatNumber(props.row.clicks) }}</span>
           </p>
           <p>
             <label>{{ $t('campaigns.sent') }}</label>
-            {{ $utils.formatNumber(stats.sent) }} / {{ $utils.formatNumber(stats.toSend) }}
+            <span>
+              {{ $utils.formatNumber(stats.sent) }} /
+              {{ $utils.formatNumber(stats.toSend) }}
+            </span>
           </p>
           <p>
             <label>{{ $t('globals.terms.bounces') }}</label>
-            <router-link :to="{name: 'bounces', query: { campaign_id: props.row.id }}">
-              {{ $utils.formatNumber(props.row.bounces) }}
-            </router-link>
+            <span>
+              <router-link :to="{name: 'bounces', query: { campaign_id: props.row.id }}">
+                {{ $utils.formatNumber(props.row.bounces) }}
+              </router-link>
+            </span>
           </p>
           <p title="Speed" v-if="stats.rate">
             <label><b-icon icon="speedometer" size="is-small"></b-icon></label>
@@ -149,7 +154,9 @@
                 <b-loading :is-full-page="false" active />
               </span>
             </label>
-            <b-progress :value="stats.sent / stats.toSend * 100" size="is-small" />
+            <span>
+              <b-progress :value="stats.sent / stats.toSend * 100" size="is-small" />
+            </span>
           </p>
         </div>
       </b-table-column>