diff options
-rw-r--r-- | src/components/_sila/AppHeader/AppHeader.vue | 28 | ||||
-rw-r--r-- | src/layouts/_sila/LoginLayout.vue | 3 |
2 files changed, 27 insertions, 4 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/layouts/_sila/LoginLayout.vue b/src/layouts/_sila/LoginLayout.vue index f353a4bc..5e064a48 100644 --- a/src/layouts/_sila/LoginLayout.vue +++ b/src/layouts/_sila/LoginLayout.vue @@ -48,6 +48,9 @@ export default { width: 30vw; margin: auto; padding: 0; + @include media-breakpoint-down(sm) { + width: 45vw; + } } @media (max-width: 750px) { .login-aside { |