add ViewTopBar component

app/src/components/globals/ViewTopBar.vue

@@ -0,0 +1,95 @@
+<template>
+  <b-button-toolbar :aria-label="label" id="view-top-bar">
+    <div id="top-bar-left" class="top-bar-group" v-if="hasLeftSlot">
+      <slot name="group-left" />
+    </div>
+
+    <div id="top-bar-right" class="top-bar-group" v-if="hasRightSlot || button">
+      <slot v-if="hasRightSlot" name="group-right" />
+
+      <b-button v-else variant="success" :to="button.to">
+        <icon v-if="button.icon" :iname="button.icon" /> {{ button.text }}
+      </b-button>
+    </div>
+  </b-button-toolbar>
+</template>
+
+<script>
+export default {
+  name: 'ViewTopBar',
+
+  props: {
+    label: { type: String, default: null },
+    button: {
+      type: Object,
+      default: null,
+      validator (value) {
+        return ['text', 'to'].forEach(prop => (prop in value))
+      }
+    }
+  },
+
+  data () {
+    return {
+      hasLeftSlot: null,
+      hasRightSlot: null
+    }
+  },
+
+  created () {
+    this.$nextTick(() => {
+      this.hasLeftSlot = 'group-left' in this.$slots
+      this.hasRightSlot = 'group-right' in this.$slots
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#view-top-bar {
+  margin-bottom: 2rem;
+  flex-wrap: wrap-reverse;
+
+  .top-bar-group {
+    display: flex;
+  }
+
+  @include media-breakpoint-down(xs) {
+    .top-bar-group {
+      flex-direction: column-reverse;
+    }
+
+    ::v-deep .btn:not(:first-of-type) {
+      margin-bottom: .25rem;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: column-reverse;
+
+    #top-bar-left ~ #top-bar-right {
+      margin-bottom: 1rem;
+    }
+
+    .top-bar-group {
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    #top-bar-left {
+      flex-grow: 2;
+      max-width: 50%;
+    }
+
+    #top-bar-right {
+      margin-left: auto;
+    }
+
+    ::v-deep .btn {
+      margin-left: .5rem;
+    }
+  }
+}
+</style>

app/src/scss/main.scss

@@ -122,49 +122,6 @@ body {
   }
 }
 
-// custom css
-.actions {
-  margin-bottom: 2rem;
-  display: flex;
-  justify-content: space-between;
-
-  @include media-breakpoint-down(xs) {
-    .buttons {
-      flex-direction: column;
-      justify-content: space-between;
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-    flex-direction: column-reverse;
-    margin-bottom: 2rem;
-
-    .buttons {
-      display: flex;
-      justify-content: space-between;
-
-      .btn {
-        margin-bottom: .5rem;
-      }
-    }
-  }
-
-  @include media-breakpoint-up(md) {
-    .btn ~ .btn {
-      margin-left: .5rem;
-    }
-  }
-
-  .input-group {
-    @include media-breakpoint-up(md) {
-      width: 25%;
-    }
-    @include media-breakpoint-up(lg) {
-      width: 35%;
-    }
-  }
-}
-
 .log {
   .card-body {
     padding: 0;