diff options
author | Anna Tsyganova <ATSyganova@IBS.RU> | 2022-07-14 18:22:36 +0300 |
---|---|---|
committer | Anna Tsyganova <ATSyganova@IBS.RU> | 2022-07-14 18:22:36 +0300 |
commit | 099a2a8fad7d267404ea4be3eda74942d4553335 (patch) | |
tree | b5e4a6906db6abd677e995d9a167eb393cfda57f /src/layouts/_sila | |
parent | c46bbb9cda2351c89d420975f94efc9fdd6be2a4 (diff) | |
download | webui-vue-099a2a8fad7d267404ea4be3eda74942d4553335.tar.xz |
Fix login page
Diffstat (limited to 'src/layouts/_sila')
-rw-r--r-- | src/layouts/_sila/LoginLayout.vue | 105 |
1 files changed, 28 insertions, 77 deletions
diff --git a/src/layouts/_sila/LoginLayout.vue b/src/layouts/_sila/LoginLayout.vue index cdff2040..8f4b3189 100644 --- a/src/layouts/_sila/LoginLayout.vue +++ b/src/layouts/_sila/LoginLayout.vue @@ -1,32 +1,17 @@ <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> + <img + src="@/assets/images/_sila/built-on-openbmc-logo.svg" + alt="Built on BMC" + /> + </div> + <div class="login-main"> + <h1 v-if="customizableGuiName" class="h3 mb-5"> + {{ customizableGuiName }} + </h1> + <router-view class="login=form form-background" /> </div> </div> </main> @@ -37,7 +22,7 @@ export default { name: 'LoginLayout', data() { return { - altLogo: process.env.VUE_APP_COMPANY_NAME || 'OpenBMC', + altLogo: process.env.VUE_APP_COMPANY_NAME || 'BMC', customizableGuiName: process.env.VUE_APP_GUI_NAME || '', }; }, @@ -46,67 +31,33 @@ export default { <style lang="scss" scoped> .login-container { - background: gray('100'); + background: $white; display: flex; - flex-direction: column; - gap: $spacer * 2; - max-width: 1400px; + flex-direction: row; min-width: 320px; min-height: 100vh; - justify-content: space-around; - - @include media-breakpoint-up('md') { - background: $white; - flex-direction: row; - } + justify-content: flex-start; } -.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 { + min-height: 100vh; + & > img { + height: 100vh; } } -.login-aside { +.login-main { 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; - } + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: auto; + padding: 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; +@media (max-width: 750px) { + .login-aside { + display: none; } } </style> |