From 79ee384fdf6d508f80aa6e779c06a19d557f3dd7 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Fri, 29 Jul 2022 10:58:59 +0300
Subject: fix header, login

---
 src/components/_sila/AppHeader/AppHeader.vue | 28 ++++++++++++++++++++++++----
 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 {
-- 
cgit v1.2.3