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/Global/PageTitle.vue | |
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/Global/PageTitle.vue')
-rw-r--r-- | src/components/Global/PageTitle.vue | 31 |
1 files changed, 31 insertions, 0 deletions
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> |