diff options
| -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 | ||||
| -rw-r--r-- | src/layouts/AppLayout.vue | 8 | ||||
| -rw-r--r-- | src/router/index.js | 4 | ||||
| -rw-r--r-- | src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue | 10 | ||||
| -rw-r--r-- | src/views/Overview/Overview.vue | 28 |
7 files changed, 109 insertions, 25 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> diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue index ab25ea3f..49d61c14 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 99f2a12f..cbebca70 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -18,7 +18,7 @@ const routes = [ path: '', component: () => import('@/views/Overview'), meta: { - title: 'Server Overview' + title: 'Overview' } }, { @@ -26,7 +26,7 @@ const routes = [ 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 c6716798..6a8300b7 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 IconSettings from "@carbon/icons-vue/es/settings/20"; 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 @@ export default { IconTrashcan, ModalSettings, ModalUser, - TableRoles + TableRoles, + PageTitle }, data() { return { diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue index 62e913a9..bf3f27fb 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 { |