diff options
Diffstat (limited to 'src/layouts/_sila')
-rw-r--r-- | src/layouts/_sila/AppLayout.vue | 91 | ||||
-rw-r--r-- | src/layouts/_sila/ConsoleLayout.vue | 9 | ||||
-rw-r--r-- | src/layouts/_sila/LoginLayout.vue | 112 |
3 files changed, 212 insertions, 0 deletions
diff --git a/src/layouts/_sila/AppLayout.vue b/src/layouts/_sila/AppLayout.vue new file mode 100644 index 00000000..0b78e5b1 --- /dev/null +++ b/src/layouts/_sila/AppLayout.vue @@ -0,0 +1,91 @@ +<template> + <div class="app-container"> + <app-header + ref="focusTarget" + class="app-header" + :router-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/AppHeader'; +import AppNavigation from '@/components/AppNavigation'; +import PageContainer from '@/components/Global/PageContainer'; +import ButtonBackToTop from '@/components/Global/ButtonBackToTop'; +import JumpLinkMixin from '@/components/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; +} +</style> diff --git a/src/layouts/_sila/ConsoleLayout.vue b/src/layouts/_sila/ConsoleLayout.vue new file mode 100644 index 00000000..9f8175bf --- /dev/null +++ b/src/layouts/_sila/ConsoleLayout.vue @@ -0,0 +1,9 @@ +<template> + <router-view /> +</template> + +<script> +export default { + name: 'Console', +}; +</script> diff --git a/src/layouts/_sila/LoginLayout.vue b/src/layouts/_sila/LoginLayout.vue new file mode 100644 index 00000000..cdff2040 --- /dev/null +++ b/src/layouts/_sila/LoginLayout.vue @@ -0,0 +1,112 @@ +<template> + <main> + <div class="login-container"> + <div class="login-main"> + <div> + <div class="login-brand mb-5"> + <img + width="90px" + src="@/assets/images/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="60px" + src="@/assets/images/built-on-openbmc-logo.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; + max-width: 1400px; + 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-form { + @include media-breakpoint-up('md') { + 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; + + @include media-breakpoint-up('md') { + min-height: 100vh; + padding-bottom: $spacer; + 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> |