diff options
author | Derick Montague <derick.montague@ibm.com> | 2021-08-26 22:06:49 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2021-09-03 01:08:05 +0300 |
commit | 932aff93a96fff5fb2d1e1dc264f944cc78b3f83 (patch) | |
tree | 6de440eb3f9ced0f5774f9e03e3c119a2f651c42 /src/layouts/LoginLayout.vue | |
parent | 1908ac90fb2ec4849a71678543e0ed11af014256 (diff) | |
download | webui-vue-932aff93a96fff5fb2d1e1dc264f944cc78b3f83.tar.xz |
Update login page layout
This update will:
- Change the positioning of the form to be on the left
- Add the built on OpenBMC logo to the bottom right corner of the
screen
- Add the ability to include a GUI custom name using a .env variable.
If the variable is not present, the login page will not include the <h1>
section heading element.
- Remove the word "logo" from the alt attribute for the company logo
image used in the application header and on the login page.
Github story: https://github.com/openbmc/webui-vue/issues/63
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I83ac5aecff0b3858c3ab5f38ab1aaa603d59acf1
Diffstat (limited to 'src/layouts/LoginLayout.vue')
-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> |