diff options
Diffstat (limited to 'src/components/_sila')
-rw-r--r-- | src/components/_sila/AppHeader/AppHeader.vue | 28 | ||||
-rw-r--r-- | src/components/_sila/Global/ButtonBackToTop.vue | 10 |
2 files changed, 29 insertions, 9 deletions
diff --git a/src/components/_sila/AppHeader/AppHeader.vue b/src/components/_sila/AppHeader/AppHeader.vue index b890331b..22be55c7 100644 --- a/src/components/_sila/AppHeader/AppHeader.vue +++ b/src/components/_sila/AppHeader/AppHeader.vue @@ -43,13 +43,13 @@ </b-navbar-brand> <div v-if="isNavTagPresent" :key="routerKey" class="pl-2 nav-tags"> <span>|</span> - <span class="pl-3">{{ assetTag }}</span> - <span class="pl-3">{{ modelType }}</span> - <span class="pl-3">{{ serialNumber }}</span> + <span class="pl-2">{{ assetTag }}</span> + <span class="pl-2">{{ modelType }}</span> + <span class="pl-2">{{ serialNumber }}</span> </div> </b-navbar-nav> <!-- Right aligned nav items --> - <b-navbar-nav class="ml-auto"> + <b-navbar-nav class="ml-auto helper-menu"> <b-nav-item to="/logs/event-logs" data-test-id="appHeader-container-health" @@ -258,6 +258,9 @@ export default { color: color('white') !important; fill: currentColor; padding: 0.68rem 1rem !important; + @include media-breakpoint-down(md) { + padding: 0.68rem 0.5rem !important; + } &:hover { background-color: theme-color-level(light, 10); @@ -281,6 +284,23 @@ export default { @include media-breakpoint-up($responsive-layout-bp) { height: $header-height; } + + .helper-menu { + @include media-breakpoint-down(sm) { + width: 100%; + justify-content: flex-end; + } + + .nav-link, + .btn { + padding: $spacer / 1.125 $spacer / 2; + } + .responsive-text { + @include media-breakpoint-down(xs) { + @include sr-only; + } + } + } } .navbar-nav { diff --git a/src/components/_sila/Global/ButtonBackToTop.vue b/src/components/_sila/Global/ButtonBackToTop.vue index 9160c7b7..6d891e56 100644 --- a/src/components/_sila/Global/ButtonBackToTop.vue +++ b/src/components/_sila/Global/ButtonBackToTop.vue @@ -47,8 +47,8 @@ export default { <style lang="scss" scoped> .btn-top { position: fixed; - bottom: 24px; - right: 24px; + bottom: $spacer; + right: $spacer * 2; box-shadow: $box-shadow; visibility: hidden; @@ -56,9 +56,9 @@ export default { transition: $transition-base; z-index: $zindex-fixed; - @media (min-width: 1600px) { - left: 1485px; - right: auto; + @include media-breakpoint-up($responsive-layout-bp) { + left: auto; + right: $spacer * 2; } } .show-btn { |