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/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue
new file mode 100644
index 0000000..8efbf7b
--- /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 0000000..678fd31
--- /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 0000000..0231424
--- /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 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() {
diff --git a/src/router/index.js b/src/router/index.js
index 99f2a12..cbebca7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -18,7 +18,7 @@
path: '',
component: () => import('@/views/Overview'),
meta: {
- title: 'Server Overview'
+ title: 'Overview'
}
},
{
@@ -26,7 +26,7 @@
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 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 {
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 {