diff options
author | Andrey V.Kosteltsev <AKosteltsev@IBS.RU> | 2022-07-04 23:11:28 +0300 |
---|---|---|
committer | Andrey V.Kosteltsev <AKosteltsev@IBS.RU> | 2022-07-04 23:11:28 +0300 |
commit | 3f4094d08b873e17464a51c817ea7d41177f848d (patch) | |
tree | 8880a0e7c8c0ac07ed298ce719cfab3278f2aa12 /src/layouts/_ibs | |
parent | f5c8dbfa6fb3812a3b3a2aafd3538fbdf8b8c668 (diff) | |
download | webui-vue-3f4094d08b873e17464a51c817ea7d41177f848d.tar.xz |
IBS: _ibs UI Theme
Diffstat (limited to 'src/layouts/_ibs')
-rw-r--r-- | src/layouts/_ibs/AppLayout.vue | 93 | ||||
-rw-r--r-- | src/layouts/_ibs/ConsoleLayout.vue | 9 | ||||
-rw-r--r-- | src/layouts/_ibs/LoginLayout.vue | 126 |
3 files changed, 228 insertions, 0 deletions
diff --git a/src/layouts/_ibs/AppLayout.vue b/src/layouts/_ibs/AppLayout.vue new file mode 100644 index 00000000..ef3193db --- /dev/null +++ b/src/layouts/_ibs/AppLayout.vue @@ -0,0 +1,93 @@ +<template> + <div class="app-container"> + <app-header + ref="focusTarget" + class="app-header" + :key="routerKey" + @refresh="refresh" + /> + <app-navigation class="app-navigation" /> + <page-container class="app-content"> + <router-view ref="routerView" :key="routerKey" /> + <!-- Scroll to top button --> + <button-back-to-top /> + </page-container> + </div> +</template> + +<script> +import AppHeader from '@/components/_ibs/AppHeader'; +import AppNavigation from '@/components/_ibs/AppNavigation'; +import PageContainer from '@/components/_ibs/Global/PageContainer'; +import ButtonBackToTop from '@/components/_ibs/Global/ButtonBackToTop'; +import JumpLinkMixin from '@/components/_ibs/Mixins/JumpLinkMixin'; + +export default { + name: 'App', + components: { + AppHeader, + AppNavigation, + PageContainer, + ButtonBackToTop, + }, + mixins: [JumpLinkMixin], + data() { + return { + routerKey: 0, + }; + }, + watch: { + $route: function () { + this.$nextTick(function () { + this.setFocus(this.$refs.focusTarget.$el); + }); + }, + }, + mounted() { + this.$root.$on('refresh-application', () => this.refresh()); + }, + methods: { + refresh() { + // Changing the component :key value will trigger + // a component re-rendering and 'refresh' the view + this.routerKey += 1; + }, + }, +}; +</script> + +<style lang="scss" scoped> +.app-container { + display: grid; + grid-template-columns: 100%; + grid-template-rows: auto; + grid-template-areas: + 'header' + 'content'; + + @include media-breakpoint-up($responsive-layout-bp) { + grid-template-columns: $navigation-width 1fr; + grid-template-areas: + 'header header' + 'navigation content'; + } +} + +.app-header { + grid-area: header; + position: sticky; + top: 0; + z-index: $zindex-fixed + 1; +} + +.app-navigation { + grid-area: navigation; +} + +.app-content { + grid-area: content; + background-color: $white; + overflow-x: auto; + min-height: 480px; +} +</style> diff --git a/src/layouts/_ibs/ConsoleLayout.vue b/src/layouts/_ibs/ConsoleLayout.vue new file mode 100644 index 00000000..9f8175bf --- /dev/null +++ b/src/layouts/_ibs/ConsoleLayout.vue @@ -0,0 +1,9 @@ +<template> + <router-view /> +</template> + +<script> +export default { + name: 'Console', +}; +</script> diff --git a/src/layouts/_ibs/LoginLayout.vue b/src/layouts/_ibs/LoginLayout.vue new file mode 100644 index 00000000..c0f56df1 --- /dev/null +++ b/src/layouts/_ibs/LoginLayout.vue @@ -0,0 +1,126 @@ +<template> + <main> + <div class="login-container"> + <div class="login-main"> + <div class="login-main__logo-vector"> + <img + height="100%" + src="@/assets/images/_ibs/login-main-vector.svg" + alt="SILA" + /> + </div> + <div> + <div class="login-brand mb-5"> + <img + width="60%" + src="@/assets/images/_ibs/login-company-logo.svg" + :alt="altLogo" + /> + </div> + <h1 v-if="customizableGuiName" class="h3 mb-5"> + {{ customizableGuiName }} + </h1> + <router-view class="login=form form-background" /> + </div> + </div> + <div class="login-aside"> + <div class="login-aside__logo-brand"> + <!-- Add Secondary brand logo if needed --> + </div> + <div class="login-aside__logo-bmc"> + <img + height="32px" + src="@/assets/images/_ibs/login-aside-vector.svg" + alt="Built on OpenBMC" + /> + </div> + </div> + </div> + </main> +</template> + +<script> +export default { + name: 'LoginLayout', + data() { + return { + altLogo: process.env.VUE_APP_COMPANY_NAME || 'OpenBMC', + customizableGuiName: process.env.VUE_APP_GUI_NAME || '', + }; + }, +}; +</script> + +<style lang="scss" scoped> +.login-container { + background: gray('100'); + display: flex; + flex-direction: column; + gap: $spacer * 2; + min-width: 320px; + min-height: 100vh; + justify-content: space-around; + + @include media-breakpoint-up('md') { + background: $white; + flex-direction: row; + } +} + +.login-main { + min-height: 50vh; + padding: $spacer * 3; + + @include media-breakpoint-up('md') { + background: gray('100'); + display: flex; + flex-direction: column; + flex: 1 1 75%; + min-height: 100vh; + justify-content: center; + align-items: center; + } +} + +.login-main__logo-vector { + position: absolute; + top: 0; + left: 0; + height: $spacer * 3; +} + +.login-form { + @include media-breakpoint-up('md') { + width: 360px; + max-width: 360px; + } +} + +.login-aside { + display: flex; + align-items: flex-end; + justify-content: flex-end; + gap: $spacer * 1.5; + margin-right: $spacer * 3; + margin-bottom: $spacer * 3; + + @include media-breakpoint-up('md') { + min-height: 100vh; + padding-bottom: $spacer * 3; + flex: 1 1 25%; + margin-bottom: 0; + } +} + +.login-aside__logo-brand:not(:empty) { + &::after { + content: ''; + display: inline-block; + height: 2.5rem; + width: 2px; + background-color: gray('200'); + margin-left: $spacer * 1.5; + vertical-align: middle; + } +} +</style> |