diff options
author | SurenNeware <sneware9@in.ibm.com> | 2020-06-08 18:23:26 +0300 |
---|---|---|
committer | SurenNeware <sneware9@in.ibm.com> | 2020-06-24 14:08:39 +0300 |
commit | 057232b85405e8c4a3a6a8c0245e582f26571927 (patch) | |
tree | b95635cdbc2fd82f0b68a068c2a628ab211e4fa6 | |
parent | 386df45f71ecbdac5ef7b8d828010ac48587d479 (diff) | |
download | webui-vue-057232b85405e8c4a3a6a8c0245e582f26571927.tar.xz |
Responsive Site Header
- Changed Header shortcut menu Icon position
- Fixed Media devices responsive layout
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I817d8f11d9fb720bb9e37f4a136cb19305144228
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 49 | ||||
-rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 10 |
2 files changed, 50 insertions, 9 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index 39d52b83..a69d6d9f 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -18,6 +18,7 @@ title="Open navigation" type="button" variant="link" + :class="{ open: isNavigationOpen }" @click="toggleNavigation" > <icon-close v-if="isNavigationOpen" /> @@ -27,27 +28,27 @@ <b-nav-text>{{ $t('appHeader.bmcSystemManagement') }}</b-nav-text> </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="/health/event-logs"> - {{ $t('appHeader.health') }} <status-icon :status="healthStatusIcon" /> + {{ $t('appHeader.health') }} </b-nav-item> <b-nav-item to="/control/server-power-operations"> - {{ $t('appHeader.power') }} <status-icon :status="hostStatusIcon" /> + {{ $t('appHeader.power') }} </b-nav-item> <!-- Using LI elements instead of b-nav-item to support semantic button elements --> <li class="nav-item"> <b-button id="app-header-refresh" variant="link" @click="refresh"> - {{ $t('appHeader.refresh') }} <icon-renew /> + <span class="responsive-text">{{ $t('appHeader.refresh') }}</span> </b-button> </li> <li class="nav-item"> <b-dropdown id="app-header-user" variant="link" right> <template v-slot:button-content> <icon-avatar /> - {{ username }} + <span class="responsive-text">{{ username }}</span> </template> <b-dropdown-item to="/profile-settings" >{{ $t('appHeader.profileSettings') }} @@ -183,11 +184,32 @@ export default { .navbar { padding: 0; - height: $header-height; + @include media-breakpoint-up($responsive-layout-bp) { + height: $header-height; + } .btn-link { padding: $spacer / 2; } + + .helper-menu { + @include media-breakpoint-down(sm) { + background-color: $gray-800; + width: 100%; + justify-content: flex-end; + + .nav-link, + .btn { + padding: $spacer / 1.125 $spacer / 2; + } + } + + .responsive-text { + @include media-breakpoint-down(xs) { + display: none; + } + } + } } .navbar-nav { @@ -209,6 +231,10 @@ export default { background-color: $dark; } + &.open { + background-color: $gray-800; + } + @include media-breakpoint-up($responsive-layout-bp) { display: none; } @@ -216,7 +242,16 @@ export default { .dropdown { .dropdown-menu { - margin-top: 7px; + margin-top: 0; + @include media-breakpoint-up(md) { + margin-top: 7px; + } + } + } + + .navbar-expand { + @include media-breakpoint-down(sm) { + flex-flow: wrap; } } } diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index 09c1eb8b..8e7b8fbf 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -157,7 +157,10 @@ svg { } .nav { - padding-top: $spacer; + padding-top: $spacer / 4; + @include media-breakpoint-up($responsive-layout-bp) { + padding-top: $spacer; + } } .nav-item__nav { @@ -246,6 +249,9 @@ svg { background-color: $container-bgd; transform: translateX(-$navigation-width); transition: transform $exit-easing--productive $duration--moderate-02; + @include media-breakpoint-down(md) { + z-index: $zindex-fixed + 2; + } &.open { transform: translateX(0); @@ -264,7 +270,7 @@ svg { bottom: 0; left: 0; right: 0; - z-index: $zindex-fixed - 1; + z-index: $zindex-fixed + 1; background-color: $black; opacity: 0.5; |