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/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 {