diff --git a/app/src/main.js b/app/src/main.js index 5fff8109..8328d90e 100644 --- a/app/src/main.js +++ b/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... diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss index 191d80d9..9cac16ec 100644 --- a/app/src/scss/_variables.scss +++ b/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; + } + } + } +} + /* ╭──────────────────────────────────────╮ diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss index a843242c..b9df648f 100644 --- a/app/src/scss/main.scss +++ b/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; }