add global confirmation helper and update base scss

app/src/main.js

@@ -20,6 +20,16 @@ Vue.use(BootstrapVue, {
   }
 })
 
+// Ugly wrapper for `$bvModal.msgBoxConfirm` to set default i18n button titles
+// FIXME find or wait for a better way
+Vue.prototype.$askConfirmation = function (message, props) {
+  return this.$bvModal.msgBoxConfirm(message, {
+    okTitle: this.$i18n.t('yes'),
+    cancelTitle: this.$i18n.t('cancel'),
+    ...props
+  })
+}
+
 // Register global components
 const requireComponent = require.context('@/components/globals', true, /\.(js|vue)$/i)
 // For each matching file name...

app/src/scss/_variables.scss

@@ -48,6 +48,17 @@ $font-family-monospace: 'Fira Code', SFMono-Regular, Menlo, Monaco, Consolas, 'L
   @include list-group-item-variant($color, theme-color-level($color, -11), theme-color-level($color, 6));
 }
 
+// Add breakpoints for w-*
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @each $size, $length in $sizes {
+    @include media-breakpoint-up($breakpoint) {
+      .w-#{$breakpoint}-#{$size} {
+        width: $length !important;
+      }
+    }
+  }
+}
+
 /*
 
   ╭──────────────────────────────────────╮

app/src/scss/main.scss

@@ -33,22 +33,21 @@ body {
   min-height: 100vh
 }
 
-// Bootstrap overrides
-
 .menu-list {
   .list-group-item {
-      padding: 0.75rem 0;
-      display: flex;
-      align-items: center;
+    padding: 0.75rem 0;
+    display: flex;
+    align-items: center;
   }
 
   h2 {
-      font-size: 1.25rem;
-      font-weight: 400;
-      margin: 0;
+    font-size: 1.25rem;
+    font-weight: 400;
+    margin: 0;
   }
 }
 
+// Bootstrap overrides
 
 .list-group-item {
   padding: 0.75rem 1rem;
@@ -73,17 +72,24 @@ body {
 
   @include media-breakpoint-down(sm) {
       flex-direction: column;
-      margin-bottom: 0.5rem;
-      padding-bottom: 0.5rem;
-      border-bottom: $border-width solid $card-border-color;
+
+      &:not(:last-of-type) {
+        margin-bottom: 0.5rem;
+        padding-bottom: 0.5rem;
+        border-bottom: $border-width solid $card-border-color;
+      }
   }
 }
 
 .card + .card {
   margin-top: 2rem;
 }
+.card-deck .card + .card {
+  margin-top: 0;
+}
+
 .card-header {
-  h2, h4 {
+  h1, h2, h3, h4, h5, h6 {
     margin: 0;
   }
 
@@ -96,10 +102,6 @@ body {
   padding: 1rem;
 }
 
-.card-footer {
-  display: flex;
-}
-
 // collapse icon
 .not-collapsed > .icon {
   transform: rotate(-90deg);
@@ -123,14 +125,7 @@ body {
 }
 
 .log {
-  .card-body {
-    padding: 0;
-
-    pre {
-      margin-bottom: 0;
-      padding: 1rem;
-      background-color: $light;
-    }
-
-  }
+  margin-bottom: 0;
+  padding: 1rem;
+  background-color: $light;
 }