Add missing tag UI to lists

frontend/src/assets/style.scss

@@ -258,6 +258,14 @@ section {
 .tag {
   min-width: 75px;
 
+  &.is-small {
+    font-size: 0.65rem;
+    background: $white-ter;
+    border: 1px solid $white-ter;
+    padding: 3px 5px;
+    min-width: auto !important;
+  }
+
   &:not(body) {
     $color: $grey-lighter;
     border: 1px solid $color;

frontend/src/views/Campaigns.vue

@@ -50,7 +50,7 @@
                 </p>
                 <p class="is-size-7 has-text-grey">{{ props.row.subject }}</p>
                 <b-taglist>
-                    <b-tag v-for="t in props.row.tags" :key="t">{{ t }}</b-tag>
+                    <b-tag class="is-small" v-for="t in props.row.tags" :key="t">{{ t }}</b-tag>
                 </b-taglist>
               </div>
             </b-table-column>

frontend/src/views/ListForm.vue

@@ -35,6 +35,11 @@
             <option value="double">Double</option>
           </b-select>
         </b-field>
+
+        <b-field label="Tags" label-position="on-border">
+          <b-taginput v-model="form.tags" ellipsis
+            icon="tag-outline" placeholder="Tags"></b-taginput>
+        </b-field>
       </section>
       <footer class="modal-card-foot has-text-right">
         <b-button @click="$parent.close()">Close</b-button>
@@ -64,6 +69,7 @@ export default Vue.extend({
         name: '',
         type: '',
         optin: '',
+        tags: '',
       },
     };
   },

frontend/src/views/Lists.vue

@@ -15,10 +15,15 @@
       hoverable
       default-sort="createdAt">
         <template slot-scope="props">
-            <b-table-column field="name" label="Name" sortable>
-              <router-link :to="{name: 'subscribers_list', params: { listID: props.row.id }}">
-                {{ props.row.name }}
-              </router-link>
+            <b-table-column field="name" label="Name" sortable width="25%">
+              <div>
+                <router-link :to="{name: 'subscribers_list', params: { listID: props.row.id }}">
+                  {{ props.row.name }}
+                </router-link>
+                <b-taglist>
+                    <b-tag class="is-small" v-for="t in props.row.tags" :key="t">{{ t }}</b-tag>
+                </b-taglist>
+              </div>
             </b-table-column>
 
             <b-table-column field="type" label="Type" sortable>