From 8d129109ec70a946ca5db879cd81f216ff3c804e Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Thu, 19 Dec 2019 09:51:55 -0800
Subject: 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
---
 src/components/Global/PageContainer.vue            | 23 ++++++++++++++++
 src/components/Global/PageSection.vue              | 30 +++++++++++++++++++++
 src/components/Global/PageTitle.vue                | 31 ++++++++++++++++++++++
 src/layouts/AppLayout.vue                          |  8 +++---
 src/router/index.js                                |  4 +--
 .../LocalUserManagement/LocalUserManagement.vue    | 10 +++----
 src/views/Overview/Overview.vue                    | 28 +++++++++----------
 7 files changed, 109 insertions(+), 25 deletions(-)
 create mode 100644 src/components/Global/PageContainer.vue
 create mode 100644 src/components/Global/PageSection.vue
 create mode 100644 src/components/Global/PageTitle.vue

(limited to 'src')

diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue
new file mode 100644
index 00000000..8efbf7b1
--- /dev/null
+++ b/src/components/Global/PageContainer.vue
@@ -0,0 +1,23 @@
+<template>
+  <main id="main-content">
+    <slot />
+  </main>
+</template>
+
+<script>
+export default {
+  name: 'PageContainer'
+};
+</script>
+
+<style lang="scss" scoped>
+main {
+  padding-top: $spacer * 1.5;
+  padding-bottom: $spacer * 3;
+  padding-left: $spacer * 2;
+  padding-right: $spacer;
+  background-color: $gray-100;
+  height: 100%;
+  min-height: calc(100vh - 60px /*header height*/);
+}
+</style>
diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue
new file mode 100644
index 00000000..678fd31d
--- /dev/null
+++ b/src/components/Global/PageSection.vue
@@ -0,0 +1,30 @@
+<template>
+  <section class="page-section">
+    <h2>{{ sectionTitle }}</h2>
+    <slot />
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'PageSection',
+  props: ['sectionTitle']
+};
+</script>
+
+<style lang="scss" scoped>
+.page-section {
+  margin-bottom: $spacer * 2;
+}
+h2 {
+  @include font-size($h4-font-size);
+  margin-bottom: $spacer;
+  &::after {
+    content: '';
+    display: block;
+    width: 100px;
+    border: 1px solid $gray-300;
+    margin-top: 10px;
+  }
+}
+</style>
diff --git a/src/components/Global/PageTitle.vue b/src/components/Global/PageTitle.vue
new file mode 100644
index 00000000..02314249
--- /dev/null
+++ b/src/components/Global/PageTitle.vue
@@ -0,0 +1,31 @@
+<template>
+  <header class="page-title">
+    <h1>{{ title }}</h1>
+    <p v-if="description">{{ description }}</p>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'PageTitle',
+  props: ['description'],
+  data() {
+    return {
+      title: this.$route.meta.title
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.page-title {
+  margin-bottom: $spacer * 2;
+}
+h1 {
+  font-weight: $display4-weight;
+  line-height: $display-line-height;
+}
+p {
+  max-width: 72ch;
+}
+</style>
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index ab25ea3f..49d61c14 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() {
diff --git a/src/router/index.js b/src/router/index.js
index 99f2a12f..cbebca70 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -18,7 +18,7 @@ const routes = [
         path: '',
         component: () => import('@/views/Overview'),
         meta: {
-          title: 'Server Overview'
+          title: 'Overview'
         }
       },
       {
@@ -26,7 +26,7 @@ const routes = [
         name: 'local-users',
         component: () => import('@/views/AccessControl/LocalUserManagement'),
         meta: {
-          title: 'Manage Local Users'
+          title: 'Local user management'
         }
       }
     ]
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index c6716798..6a8300b7 100644
--- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
+++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
@@ -1,10 +1,6 @@
 <template>
   <b-container class="ml-0">
-    <b-row>
-      <b-col lg="10">
-        <h1>Local user management</h1>
-      </b-col>
-    </b-row>
+    <PageTitle />
     <b-row>
       <b-col lg="10">
         <b-button @click="initModalSettings" variant="link">
@@ -71,6 +67,7 @@ import IconSettings from "@carbon/icons-vue/es/settings/20";
 import TableRoles from "./TableRoles";
 import ModalUser from "./ModalUser";
 import ModalSettings from "./ModalSettings";
+import PageTitle from "../../../components/Global/PageTitle";
 
 export default {
   name: "local-users",
@@ -81,7 +78,8 @@ export default {
     IconTrashcan,
     ModalSettings,
     ModalUser,
-    TableRoles
+    TableRoles,
+    PageTitle
   },
   data() {
     return {
diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue
index 62e913a9..bf3f27fb 100644
--- a/src/views/Overview/Overview.vue
+++ b/src/views/Overview/Overview.vue
@@ -1,10 +1,9 @@
 <template>
   <b-container fluid>
-    <h1>Overview</h1>
+    <PageTitle />
     <b-row>
       <b-col lg="8" sm="12">
-        <section>
-          <h2>Server Information</h2>
+        <PageSection sectionTitle="Server Information">
           <b-row>
             <b-col sm="6">
               <dl>
@@ -31,9 +30,8 @@
               </dl>
             </b-col>
           </b-row>
-        </section>
-        <section>
-          <h2>BMC information</h2>
+        </PageSection>
+        <PageSection sectionTitle="BMC information">
           <b-row>
             <b-col sm="6">
               <dl>
@@ -60,9 +58,8 @@
               </dl>
             </b-col>
           </b-row>
-        </section>
-        <section>
-          <h2>Power consumption</h2>
+        </PageSection>
+        <PageSection sectionTitle="Power consumption">
           <b-row>
             <b-col sm="6">
               <dl>
@@ -78,28 +75,31 @@
               </dl>
             </b-col>
           </b-row>
-        </section>
+        </PageSection>
       </b-col>
       <b-col lg="4" sm="12">
         <quickLinks />
       </b-col>
     </b-row>
-    <section>
-      <h2>High priority events</h2>
+    <PageSection sectionTitle="High priority events">
       <events />
-    </section>
+    </PageSection>
   </b-container>
 </template>
 
 <script>
 import OverviewQuickLinks from "./OverviewQuickLinks";
 import OverviewEvents from "./OverviewEvents";
+import PageTitle from "../../components/Global/PageTitle";
+import PageSection from "../../components/Global/PageSection";
 
 export default {
   name: "Overview",
   components: {
     quickLinks: OverviewQuickLinks,
-    events: OverviewEvents
+    events: OverviewEvents,
+    PageTitle,
+    PageSection
   },
   data() {
     return {
-- 
cgit v1.2.3