fx mobile styles for header nav

2 files changed, 152 insertions, 126 deletions

diff --git a/src/assets/styles/bmc/_sila/_base.scss b/src/assets/styles/bmc/_sila/_base.scss
index 8811b9de..cf5ffeb5 100644
--- a/src/assets/styles/bmc/_sila/_base.scss
+++ b/src/assets/styles/bmc/_sila/_base.scss
@@ -111,7 +111,12 @@ h6,
 
 .header-nav {
   .nav-link {
+    display: flex;
     border-radius: 8px !important;
+    .status-icon {
+      margin-top: -2px;
+      margin-right: 5px;
+    }
     &:active,
     &:hover,
     &:focus {
@@ -124,7 +129,12 @@ h6,
   }
 
   .btn-link {
+    display: flex;
     border-radius: 8px !important;
+    .status-icon {
+      margin-top: -2px;
+      margin-right: 5px;
+    }
     &:active,
     &:hover,
     &:focus {
@@ -144,3 +154,14 @@ h6,
   pointer-events: none;
   opacity: 0.3;
 }
+
+.white-space--nowrap {
+  white-space: nowrap;
+}
+
+.display--flex {
+  display: flex;
+}
+.align-items--center {
+  align-items: center;
+}
diff --git a/src/components/_sila/AppHeader/AppHeader.vue b/src/components/_sila/AppHeader/AppHeader.vue
index 1c901890..98bdc59f 100644
--- a/src/components/_sila/AppHeader/AppHeader.vue
+++ b/src/components/_sila/AppHeader/AppHeader.vue
@@ -44,7 +44,7 @@
           <div v-if="isNavTagPresent" :key="routerKey" class="pl-2 nav-tags">
             <span>|</span>
             <span class="pl-2">{{ assetTag }}</span>
-            <span class="pl-2">{{ modelType }}</span>
+            <span class="pl-2 white-space--nowrap">{{ modelType }}</span>
             <span class="pl-2">{{ serialNumber }}</span>
           </div>
         </b-navbar-nav>
@@ -67,136 +67,142 @@
             {{ $t('appHeader.power') }}
           </b-nav-item>
           <!-- Using LI elements instead of b-nav-item to support semantic button elements -->
-          <li class="nav-item header-nav">
-            <b-button
-              id="app-header-refresh"
-              variant="link"
-              data-test-id="appHeader-button-refresh"
-              @click="refresh"
-            >
-              <icon-renew :title="$t('appHeader.titleRefresh')" />
-              <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
-            </b-button>
-          </li>
-          <li class="nav-item header-nav notifications">
-            <b-dropdown id="app-notifications" variant="link" right>
-              <template #button-content>
-                <icon-notification :title="$t('appHeader.titleNotification')" />
-                <span v-if="isLogsExist" class="red-dot"></span>
-              </template>
-              <b-dropdown-text v-if="!isLogsExist">
-                {{ $t('appHeader.titleEmpty') }}
-              </b-dropdown-text>
-              <b-dropdown-group
-                v-if="logs('Critical') && logs('Critical').length > 0"
-                id="dropdown-group-1"
-                :header="$t('appHeader.titleCritical')"
+          <div class="display--flex align-items--center">
+            <li class="nav-item header-nav">
+              <b-button
+                id="app-header-refresh"
+                variant="link"
+                data-test-id="appHeader-button-refresh"
+                @click="refresh"
               >
-                <b-dropdown-item
-                  v-for="(log, index) in logs('Critical')"
-                  :key="index"
-                  :to="logsPage(log.id)"
-                >
-                  <img
-                    class="status-icon"
-                    src="@/assets/images/_sila/notifications/critical.svg"
-                  />
-                  <div class="notification-item">
-                    <span>{{ log.name | truncate(28, '...') }}</span>
-                    <span class="notification-desc">{{
-                      log.description | truncate(28, '...')
-                    }}</span>
-                  </div>
-                  <img
-                    class="arrow-icon"
-                    src="@/assets/images/_sila/notifications/right-arrow.svg"
+                <icon-renew :title="$t('appHeader.titleRefresh')" />
+                <span class="responsive-text">{{
+                  $t('appHeader.refresh')
+                }}</span>
+              </b-button>
+            </li>
+            <li class="nav-item header-nav notifications">
+              <b-dropdown id="app-notifications" variant="link" right>
+                <template #button-content>
+                  <icon-notification
+                    :title="$t('appHeader.titleNotification')"
                   />
-                </b-dropdown-item>
-              </b-dropdown-group>
-              <b-dropdown-divider
-                v-if="logs('Critical') && logs('Critical').length > 0"
-              ></b-dropdown-divider>
-              <b-dropdown-group
-                v-if="logs('Warning') && logs('Warning').length > 0"
-                id="dropdown-group-2"
-                :header="$t('appHeader.titleWarnings')"
+                  <span v-if="isLogsExist" class="red-dot"></span>
+                </template>
+                <b-dropdown-text v-if="!isLogsExist">
+                  {{ $t('appHeader.titleEmpty') }}
+                </b-dropdown-text>
+                <b-dropdown-group
+                  v-if="logs('Critical') && logs('Critical').length > 0"
+                  id="dropdown-group-1"
+                  :header="$t('appHeader.titleCritical')"
+                >
+                  <b-dropdown-item
+                    v-for="(log, index) in logs('Critical')"
+                    :key="index"
+                    :to="logsPage(log.id)"
+                  >
+                    <img
+                      class="status-icon"
+                      src="@/assets/images/_sila/notifications/critical.svg"
+                    />
+                    <div class="notification-item">
+                      <span>{{ log.name | truncate(28, '...') }}</span>
+                      <span class="notification-desc">{{
+                        log.description | truncate(28, '...')
+                      }}</span>
+                    </div>
+                    <img
+                      class="arrow-icon"
+                      src="@/assets/images/_sila/notifications/right-arrow.svg"
+                    />
+                  </b-dropdown-item>
+                </b-dropdown-group>
+                <b-dropdown-divider
+                  v-if="logs('Critical') && logs('Critical').length > 0"
+                ></b-dropdown-divider>
+                <b-dropdown-group
+                  v-if="logs('Warning') && logs('Warning').length > 0"
+                  id="dropdown-group-2"
+                  :header="$t('appHeader.titleWarnings')"
+                >
+                  <b-dropdown-item
+                    v-for="(log, index) in logs('Warning')"
+                    :key="index"
+                    :to="logsPage(log.id)"
+                  >
+                    <img
+                      class="status-icon"
+                      src="@/assets/images/_sila/notifications/warning.svg"
+                    />
+                    <div class="notification-item">
+                      <span>{{ log.name | truncate(28, '...') }}</span>
+                      <span class="notification-desc">{{
+                        log.description | truncate(28, '...')
+                      }}</span>
+                    </div>
+                    <img
+                      class="arrow-icon"
+                      src="@/assets/images/_sila/notifications/right-arrow.svg"
+                    />
+                  </b-dropdown-item>
+                </b-dropdown-group>
+                <b-dropdown-divider
+                  v-if="logs('Warning') && logs('Warning').length > 0"
+                ></b-dropdown-divider>
+                <b-dropdown-group
+                  v-if="logs('OK') && logs('OK').length > 0"
+                  id="dropdown-group-3"
+                  :header="$t('appHeader.titleMessages')"
+                >
+                  <b-dropdown-item
+                    v-for="(log, index) in logs('OK')"
+                    :key="index"
+                    :to="logsPage(log.id)"
+                  >
+                    <img
+                      class="status-icon"
+                      src="@/assets/images/_sila/notifications/message.svg"
+                    />
+                    <div class="notification-item">
+                      <span>{{ log.name | truncate(28, '...') }}</span>
+                      <span class="notification-desc">{{
+                        log.description | truncate(28, '...')
+                      }}</span>
+                    </div>
+                    <img
+                      class="arrow-icon"
+                      src="@/assets/images/_sila/notifications/right-arrow.svg"
+                    />
+                  </b-dropdown-item>
+                </b-dropdown-group>
+              </b-dropdown>
+            </li>
+            <li class="nav-item header-nav">
+              <b-dropdown
+                id="app-header-user"
+                variant="link"
+                right
+                data-test-id="appHeader-container-user"
               >
+                <template #button-content>
+                  <icon-avatar :title="$t('appHeader.titleProfile')" />
+                  <span class="responsive-text">{{ username }}</span>
+                </template>
                 <b-dropdown-item
-                  v-for="(log, index) in logs('Warning')"
-                  :key="index"
-                  :to="logsPage(log.id)"
-                >
-                  <img
-                    class="status-icon"
-                    src="@/assets/images/_sila/notifications/warning.svg"
-                  />
-                  <div class="notification-item">
-                    <span>{{ log.name | truncate(28, '...') }}</span>
-                    <span class="notification-desc">{{
-                      log.description | truncate(28, '...')
-                    }}</span>
-                  </div>
-                  <img
-                    class="arrow-icon"
-                    src="@/assets/images/_sila/notifications/right-arrow.svg"
-                  />
+                  to="/profile-settings"
+                  data-test-id="appHeader-link-profile"
+                  >{{ $t('appHeader.profileSettings') }}
                 </b-dropdown-item>
-              </b-dropdown-group>
-              <b-dropdown-divider
-                v-if="logs('Warning') && logs('Warning').length > 0"
-              ></b-dropdown-divider>
-              <b-dropdown-group
-                v-if="logs('OK') && logs('OK').length > 0"
-                id="dropdown-group-3"
-                :header="$t('appHeader.titleMessages')"
-              >
                 <b-dropdown-item
-                  v-for="(log, index) in logs('OK')"
-                  :key="index"
-                  :to="logsPage(log.id)"
+                  data-test-id="appHeader-link-logout"
+                  @click="logout"
                 >
-                  <img
-                    class="status-icon"
-                    src="@/assets/images/_sila/notifications/message.svg"
-                  />
-                  <div class="notification-item">
-                    <span>{{ log.name | truncate(28, '...') }}</span>
-                    <span class="notification-desc">{{
-                      log.description | truncate(28, '...')
-                    }}</span>
-                  </div>
-                  <img
-                    class="arrow-icon"
-                    src="@/assets/images/_sila/notifications/right-arrow.svg"
-                  />
+                  {{ $t('appHeader.logOut') }}
                 </b-dropdown-item>
-              </b-dropdown-group>
-            </b-dropdown>
-          </li>
-          <li class="nav-item header-nav">
-            <b-dropdown
-              id="app-header-user"
-              variant="link"
-              right
-              data-test-id="appHeader-container-user"
-            >
-              <template #button-content>
-                <icon-avatar :title="$t('appHeader.titleProfile')" />
-                <span class="responsive-text">{{ username }}</span>
-              </template>
-              <b-dropdown-item
-                to="/profile-settings"
-                data-test-id="appHeader-link-profile"
-                >{{ $t('appHeader.profileSettings') }}
-              </b-dropdown-item>
-              <b-dropdown-item
-                data-test-id="appHeader-link-logout"
-                @click="logout"
-              >
-                {{ $t('appHeader.logOut') }}
-              </b-dropdown-item>
-            </b-dropdown>
-          </li>
+              </b-dropdown>
+            </li>
+          </div>
         </b-navbar-nav>
       </b-navbar>
     </header>
@@ -401,6 +407,7 @@ export default {
     }
 
     .helper-menu {
+      flex-flow: wrap;
       @include media-breakpoint-down(sm) {
         width: 100%;
         justify-content: flex-end;
@@ -481,9 +488,7 @@ export default {
   }
 
   .navbar-expand {
-    @include media-breakpoint-down(sm) {
-      flex-flow: wrap;
-    }
+    flex-flow: wrap;
   }
 }