diff options
Diffstat (limited to 'src/layouts')
-rw-r--r-- | src/layouts/LoginLayout.vue | 108 |
1 files changed, 81 insertions, 27 deletions
diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue index c2b9af57..cdff2040 100644 --- a/src/layouts/LoginLayout.vue +++ b/src/layouts/LoginLayout.vue @@ -1,23 +1,34 @@ <template> <main> - <b-container class="login-container" fluid> - <b-row class="login-row" align-v="center"> - <b-col class="login-branding mt-5 mb-5 text-center" md="6"> - <div class="login-branding__container"> + <div class="login-container"> + <div class="login-main"> + <div> + <div class="login-brand mb-5"> <img - class="logo" - width="200px" - src="@/assets/images/logo-login.svg" + width="90px" + src="@/assets/images/login-company-logo.svg" :alt="altLogo" /> - <h1>OpenBMC</h1> </div> - </b-col> - <b-col md="6"> - <router-view /> - </b-col> - </b-row> - </b-container> + <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> @@ -26,7 +37,8 @@ export default { name: 'LoginLayout', data() { return { - altLogo: `${process.env.VUE_APP_COMPANY_NAME} logo`, + altLogo: process.env.VUE_APP_COMPANY_NAME || 'OpenBMC', + customizableGuiName: process.env.VUE_APP_GUI_NAME || '', }; }, }; @@ -34,25 +46,67 @@ export default { <style lang="scss" scoped> .login-container { - @include media-breakpoint-up(md) { - background: linear-gradient( - to right, - theme-color('light') 50%, - gray('200') 50% - ); + 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-row { - @include media-breakpoint-up(md) { +.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-branding__container { - @include media-breakpoint-up(md) { - float: right; - margin-right: 4rem; +.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> |