Add page level layout components
Adding components to help standardize type, size, spacing
for common elements on a page.
Also removed a conflicting class name and added modifications
to the main container. The main container needed a min-height
and height value set, which became apparent with added
background color. Adding a background color will move us
closer to agreed design solution to add a subtle background
color instead of adding a border to separate main content from
left hand navigation.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ie63c4f0c0f3fd199fa0ca790065402e06a613691
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index ab25ea3..49d61c1 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -7,9 +7,9 @@
<AppNavigation />
</b-col>
<b-col cols="12" md="9" lg="10">
- <main id="main-content">
+ <PageContainer>
<router-view ref="routerView" />
- </main>
+ </PageContainer>
</b-col>
</b-row>
</b-container>
@@ -19,11 +19,13 @@
<script>
import AppHeader from "@/components/AppHeader";
import AppNavigation from "@/components/AppNavigation";
+import PageContainer from "../components/Global/PageContainer";
export default {
name: "App",
components: {
AppHeader,
- AppNavigation
+ AppNavigation,
+ PageContainer
},
watch: {
$route: function() {