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>