diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2019-12-19 20:51:55 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-01-28 18:53:39 +0300 |
commit | 8d129109ec70a946ca5db879cd81f216ff3c804e (patch) | |
tree | b653ad44e3c76b8922caab0d1a5ebadc9c9c6971 /src/components | |
parent | fded0d11289f737a845abb5ee8bb10725f870cf3 (diff) | |
download | webui-vue-8d129109ec70a946ca5db879cd81f216ff3c804e.tar.xz |
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
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/Global/PageContainer.vue | 23 | ||||
-rw-r--r-- | src/components/Global/PageSection.vue | 30 | ||||
-rw-r--r-- | src/components/Global/PageTitle.vue | 31 |
3 files changed, 84 insertions, 0 deletions
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> |