From 74f8687d4ab358c071bd081b0b7709eba5a521c2 Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
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 <yoshiemuranaka@gmail.com>
Change-Id: Id159b84da6adf55fdb15842b0e33b1ede4eeceb4
---
 src/layouts/AppLayout.vue | 55 +++++++++++++++++++++++++++++++----------------
 1 file changed, 36 insertions(+), 19 deletions(-)

(limited to 'src/layouts/AppLayout.vue')

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>
-- 
cgit v1.2.3