Upgrade Vue and Buefy UI lib.

- Vue 2.6 introduces "v-slot" which Buefy 0.9.7 uses.
- Refactor all `<b-table>` and `<b-column>` instances to work with the
  new `v-slot` snytax.
- Refactor `<b-column>` <td> and class attributes to work wit hthe new
  syntax.
- Fix Buefy scss setup to work with the update.
- Fix sidebar responsive view to work with the update.

frontend/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
-    "buefy": "^0.8.20",
+    "buefy": "^0.9.7",
     "c3": "^0.7.18",
     "codeflask": "^1.4.1",
     "core-js": "^3.6.5",

frontend/src/assets/style.scss

@@ -30,10 +30,11 @@ $modal-background-background-color: rgba(0, 0, 0, .30);
 $speed-slow: 25ms !default;
 $speed-slower: 50ms !default;
 
-/* Import full Bulma and Buefy to override styles. */
-// @import "~bulma";
-@import "./buefy";
+/* Import full Bulma and Buefy */
+@import "~bulma";
+@import "~buefy/src/scss/buefy";
 
+/* Custom style overrides */
 html, body {
   height: 100%;
 }
@@ -752,6 +753,7 @@ section.campaign {
 
   /* Hide sidebar menu captions on mobile */
   .b-sidebar .sidebar-content.is-mini-mobile {
+    max-width: 90px;
     .menu-list {
       li {
         margin-bottom: 30px;
@@ -773,7 +775,6 @@ section.campaign {
 
   td .tags {
     display: block;
-    text-align: right;
 
     .tag:not(:last-child) {
       margin-right: 0;

frontend/src/utils.js

@@ -118,4 +118,8 @@ export default class Utils {
       duration: duration || 2000,
     });
   };
+
+  // Takes a props.row from a Buefy b-column <td> template and
+  // returns a `data-id` attribute which Buefy then applies to the td.
+  tdID = (row) => ({ 'data-id': row.id.toString() });
 }