diff --git a/app/src/App.vue b/app/src/App.vue index d0ac5b5c..4325545a 100644 --- a/app/src/App.vue +++ b/app/src/App.vue @@ -210,7 +210,7 @@ main { } footer { - border-top: 1px solid #eee; + border-top: $thin-border; font-size: $font-size-sm; margin-top: 2rem; diff --git a/app/src/api/api.js b/app/src/api/api.js index d199dccb..88b6e827 100644 --- a/app/src/api/api.js +++ b/app/src/api/api.js @@ -58,7 +58,7 @@ export default { async fetch (method, uri, data = {}, { wait = true, websocket = true, initial = false, asFormData = false } = {}) { // `await` because Vuex actions returns promises by default. const request = await store.dispatch('INIT_REQUEST', { method, uri, initial, wait, websocket }) - + console.log(JSON.parse(JSON.stringify(request)), data) if (websocket) { await openWebSocket(request) } diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss index 09ef312e..f55160eb 100644 --- a/app/src/scss/_variables.scss +++ b/app/src/scss/_variables.scss @@ -60,6 +60,9 @@ $alert-padding-x: 1rem; $card-spacer-y: .6rem; $card-spacer-x: 1rem; +$input-btn-padding-y: .45rem; + +$list-group-item-padding-x: 1rem; // Import default variables after the above setup to compute all other variables. @import '~bootstrap/scss/functions.scss'; @@ -68,8 +71,11 @@ $card-spacer-x: 1rem; @import '~bootstrap-vue/src/variables'; +$body-color: $gray-800; +$hr-border-color: $gray-200; +$list-group-action-color: $gray-800; // ╭──────────────────────────────────────╮ // │ ┌─╴╭─╮┌─╮╷ ╭ ╭─┐╷╷╷┌─╴╭─╴╭─╮╭╮╮┌─╴ │ @@ -81,16 +87,15 @@ $card-spacer-x: 1rem; // default: `app/node_modules/fork-awesome/scss/_variables.scss` $fa-font-path: '~fork-awesome/fonts'; -$fa-font-size-base: 1rem; +$fa-font-size-base: $font-size-base; @import '~fork-awesome/scss/variables'; -$thin-border: 1px solid #eee; // ╭────────────────────╮ // │ ╭─╴╷ ╷╭─╴╶┬╴╭─╮╭╮╮ │ // │ │ │ │╰─╮ │ │ ││││ │ // │ ╰─╴╰─╯╶─╯ ╵ ╰─╯╵╵╵ │ // ╰────────────────────╯ -$skeleton-color: #eaeaea; +$thin-border: $hr-border-width solid $hr-border-color; diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss index bf4b974b..c33992bf 100644 --- a/app/src/scss/main.scss +++ b/app/src/scss/main.scss @@ -25,8 +25,6 @@ body { overflow-x: hidden; min-height: 100vh; margin: 0; - color: #333; - font-size: 14px; } #app { @@ -37,29 +35,29 @@ body { .menu-list { .list-group-item { - padding: 0.75rem 0; + padding: $list-group-item-padding-y 0; display: flex; align-items: center; } - - h2 { - font-size: 1.25rem; - font-weight: 400; - margin: 0; - } } -.font-weight-bold { - font-weight: 500 !important; -} // Bootstrap overrides -.list-group-item { - padding: 0.75rem 1rem; +// Overwrite list-group-item variants to lighter ones (used in diagnosis for example) +@each $color, $value in $theme-colors { + @include list-group-item-variant($color, theme-color-level($color, -11), theme-color-level($color, 6)); } -.list-group-item-action { - color: #333; + +// 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; + } + } + } } // Allow state of input group to be displayed under the group @@ -94,15 +92,15 @@ body { margin-top: 0; } -.card { +.card, .list-group-item { h1, h2, h3, h4, h5, h6 { margin: 0; } } -.card-header { +.card-header, .list-group-item { h1, h2, h3, h4, h5, h6 { - font-weight: 400; + font-weight: $font-weight-normal; } } @@ -117,7 +115,7 @@ body { } .list-group-item .icon { - margin-left: 0.3em; + margin-left: 0.3rem; } // Fork-awesome overrides @@ -141,8 +139,3 @@ code { padding: 1rem; background-color: $light; } - -.btn { - font-size: 1em; - line-height: 1.7; -} diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue index 81855609..f784fa13 100644 --- a/app/src/views/Home.vue +++ b/app/src/views/Home.vue @@ -7,7 +7,7 @@ :to="{ name: item.routeName }" > -

{{ $t(item.translation) }}

+

{{ $t(item.translation) }}

diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue index 82a1a6e6..314c6b78 100644 --- a/app/src/views/app/AppInfo.vue +++ b/app/src/views/app/AppInfo.vue @@ -1,7 +1,7 @@