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/components/Global/PageContainer.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/components/Global/PageContainer.vue')
| -rw-r--r-- | src/components/Global/PageContainer.vue | 12 |
1 files changed, 7 insertions, 5 deletions
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 @@ <template> - <main id="main-content"> + <main id="main-content" class="page-container"> <slot /> </main> </template> @@ -12,12 +12,14 @@ export default { <style lang="scss" scoped> main { + width: 100%; + height: 100%; padding-top: $spacer * 1.5; padding-bottom: $spacer * 3; - padding-left: $spacer * 2; + padding-left: $spacer; padding-right: $spacer; - background-color: $gray-100; - height: 100%; - min-height: calc(100vh - 60px /*header height*/); + @include media-breakpoint-up($responsive-layout-bp) { + padding-left: $spacer * 2; + } } </style> |