From 74f8687d4ab358c071bd081b0b7709eba5a521c2 Mon Sep 17 00:00:00 2001 From: Yoshie Muranaka Date: Mon, 10 Feb 2020 12:28:37 -0800 Subject: Add responsive layout The main navigation will be collapsed until the viewport minimum width reaches the Bootstrap defined 'lg' breakpoint (defaults to 992px). - Adding motion variables and updating some CSS values to use existing Sass variables Signed-off-by: Yoshie Muranaka Change-Id: Id159b84da6adf55fdb15842b0e33b1ede4eeceb4 --- src/assets/styles/_motion.scss | 14 ++ src/assets/styles/_obmc-custom.scss | 4 + src/components/AppHeader/AppHeader.vue | 70 ++++++- src/components/AppNavigation/AppNavigation.vue | 202 +++++++++++++++------ src/components/Global/PageContainer.vue | 12 +- src/layouts/AppLayout.vue | 55 ++++-- .../LocalUserManagement/LocalUserManagement.vue | 8 +- src/views/Overview/OverviewQuickLinks.vue | 4 +- 8 files changed, 277 insertions(+), 92 deletions(-) create mode 100644 src/assets/styles/_motion.scss (limited to 'src') diff --git a/src/assets/styles/_motion.scss b/src/assets/styles/_motion.scss new file mode 100644 index 00000000..55a3eed9 --- /dev/null +++ b/src/assets/styles/_motion.scss @@ -0,0 +1,14 @@ +$duration--fast-01: 70ms; //Micro-interactions such as button and toggle +$duration--fast-02: 110ms; //Micro-interactions such as fade +$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements +$duration--moderate-02: 240ms; //Expansion, system communication, toast +$duration--slow-01: 400ms; //Large expansion, important system notifications +$duration--slow-02: 700ms; //Background dimming + +// https://www.carbondesignsystem.com/guidelines/motion/basics/#easing +$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9); +$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1); +$entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9); +$entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1); +$exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9); +$exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1); \ No newline at end of file diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss index 2e360193..aff37529 100644 --- a/src/assets/styles/_obmc-custom.scss +++ b/src/assets/styles/_obmc-custom.scss @@ -1,10 +1,14 @@ $enable-rounded: false; $enable-validation-icons: false; +$responsive-layout-bp: lg; +$header-height: 56px; +$navigation-width: 300px; // Required @import "~bootstrap/scss/functions"; @import "./functions"; @import "./colors"; +@import "./motion"; @import "~bootstrap/scss/variables"; @import "~bootstrap/scss/mixins"; diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index e155a651..39191766 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -4,8 +4,21 @@ Skip to content
- + + BMC System Management @@ -37,11 +50,19 @@ @@ -88,7 +128,6 @@ svg { } .nav { - min-height: 100%; padding-top: $spacer; } @@ -155,4 +194,55 @@ svg { background-color: $primary; } } + +.nav-container { + position: fixed; + width: $navigation-width; + top: $header-height; + bottom: 0; + left: 0; + z-index: $zindex-fixed; + overflow-y: auto; + background-color: $gray-200; + transform: translateX(-$navigation-width); + transition: transform $exit-easing--productive $duration--moderate-02; + + &.open { + transform: translateX(0); + transition-timing-function: $entrance-easing--productive; + } + + @include media-breakpoint-up($responsive-layout-bp) { + transition-duration: $duration--fast-01; + transform: translateX(0); + } +} + +.nav-overlay { + position: fixed; + top: $header-height; + bottom: 0; + left: 0; + right: 0; + z-index: $zindex-fixed - 1; + background-color: $black; + opacity: 0.5; + + &.fade-enter-active { + transition: opacity $duration--moderate-02 $entrance-easing--productive; + } + + &.fade-leave-active { + transition: opacity $duration--fast-02 $exit-easing--productive; + } + + &.fade-enter, + &.fade-leave-to { + opacity: 0; + } + + @include media-breakpoint-up($responsive-layout-bp) { + display: none; + } +} diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue index 8efbf7b1..8396bd5b 100644 --- a/src/components/Global/PageContainer.vue +++ b/src/components/Global/PageContainer.vue @@ -1,5 +1,5 @@ @@ -12,12 +12,14 @@ export default { diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue index 33faa381..8edc338d 100644 --- a/src/layouts/AppLayout.vue +++ b/src/layouts/AppLayout.vue @@ -1,18 +1,10 @@ @@ -62,10 +54,35 @@ export default { diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue index e71387da..a5ba7ba0 100644 --- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue +++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue @@ -1,8 +1,8 @@