diff options
author | Vitalii Lysak <v.lysak@dunice.net> | 2022-08-09 09:45:11 +0300 |
---|---|---|
committer | Vitalii Lysak <v.lysak@dunice.net> | 2022-08-09 09:45:11 +0300 |
commit | e5c217fa45a8c66b6ebf34bfda740e470c34bfab (patch) | |
tree | 36617baee0fd333d9bdd77c230e4e10387e38d51 | |
parent | 1f71e4f7800c0db4d639b42bfc0b5efa9ecc87a2 (diff) | |
download | webui-vue-e5c217fa45a8c66b6ebf34bfda740e470c34bfab.tar.xz |
fx mobile styles for header nav
-rw-r--r-- | src/assets/styles/bmc/_sila/_base.scss | 21 | ||||
-rw-r--r-- | src/components/_sila/AppHeader/AppHeader.vue | 257 |
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; } } |