commit 8d129109ec70a946ca5db879cd81f216ff3c804e
author Yoshie Muranaka <yoshiemuranaka@gmail.com> Thu Dec 19 09:51:55 2019 -0800
committer Derick Montague <derick.montague@ibm.com> Tue Jan 28 09:53:39 2020 -0600
tree b653ad44e3c76b8922caab0d1a5ebadc9c9c6971
parent fded0d11289f737a845abb5ee8bb10725f870cf3

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/views/AccessControl/LocalUserManagement/LocalUserManagement.vue

diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index c671679..6a8300b 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 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 @@
     IconTrashcan,
     ModalSettings,
     ModalUser,
-    TableRoles
+    TableRoles,
+    PageTitle
   },
   data() {
     return {

src/views/Overview/Overview.vue

diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue
index 62e913a..bf3f27f 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 {