diff options
| author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-02-10 23:28:37 +0300 |
|---|---|---|
| committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-02-19 22:17:46 +0300 |
| commit | 74f8687d4ab358c071bd081b0b7709eba5a521c2 (patch) | |
| tree | 0ff89ca0403a814c39dc73d422824939b2bc1770 /src/layouts/AppLayout.vue | |
| parent | eb154bbc9f71a923563479919578bd5053795980 (diff) | |
| download | webui-vue-74f8687d4ab358c071bd081b0b7709eba5a521c2.tar.xz | |
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 <yoshiemuranaka@gmail.com>
Change-Id: Id159b84da6adf55fdb15842b0e33b1ede4eeceb4
Diffstat (limited to 'src/layouts/AppLayout.vue')
| -rw-r--r-- | src/layouts/AppLayout.vue | 55 |
1 files changed, 36 insertions, 19 deletions
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 @@ <template> - <div> - <app-header ref="focusTarget" @refresh="refresh" /> - <b-container fluid class="page-container"> - <b-row no-gutters> - <b-col tag="nav" cols="12" md="3" lg="2"> - <app-navigation /> - </b-col> - <b-col cols="12" md="9" lg="10"> - <page-container> - <router-view ref="routerView" :key="routerKey" /> - </page-container> - </b-col> - </b-row> - </b-container> + <div class="app-container"> + <app-header ref="focusTarget" class="app-header" @refresh="refresh" /> + <app-navigation class="app-navigation" /> + <page-container class="app-content"> + <router-view ref="routerView" :key="routerKey" /> + </page-container> </div> </template> @@ -62,10 +54,35 @@ export default { </script> <style lang="scss" scoped> -.page-container { - margin-right: 0; - margin-left: 0; - padding-right: 0; - padding-left: 0; +.app-container { + display: grid; + grid-template-columns: 100%; + grid-template-rows: auto; + grid-template-areas: + 'header' + 'content'; + + @include media-breakpoint-up($responsive-layout-bp) { + grid-template-columns: $navigation-width 1fr; + grid-template-areas: + 'header header' + 'navigation content'; + } +} + +.app-header { + grid-area: header; + position: sticky; + top: 0; + z-index: $zindex-fixed + 1; +} + +.app-navigation { + grid-area: navigation; +} + +.app-content { + grid-area: content; + background-color: $white; } </style> |