diff options
Diffstat (limited to 'src/layouts/_sila/LoginLayout.vue')
| -rw-r--r-- | src/layouts/_sila/LoginLayout.vue | 141 |
1 files changed, 70 insertions, 71 deletions
diff --git a/src/layouts/_sila/LoginLayout.vue b/src/layouts/_sila/LoginLayout.vue index cdff2040..d4e072c8 100644 --- a/src/layouts/_sila/LoginLayout.vue +++ b/src/layouts/_sila/LoginLayout.vue @@ -1,33 +1,26 @@ <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 + class="login-aside__picture" + src="@/assets/images/_sila/login/autrorization-left-image.svg" + /> + <img + class="login-aside__vector1" + src="@/assets/images/_sila/login/vector1.svg" + /> + </div> + <div class="login-main"> + <!-- <h1 v-if="customizableGuiName"> + {{ customizableGuiName }} + </h1> --> + <router-view class="login=form form-background" /> </div> + <img + class="login-aside__vector2" + src="@/assets/images/_sila/login/vector2.svg" + /> </div> </main> </template> @@ -37,7 +30,6 @@ export default { name: 'LoginLayout', data() { return { - altLogo: process.env.VUE_APP_COMPANY_NAME || 'OpenBMC', customizableGuiName: process.env.VUE_APP_GUI_NAME || '', }; }, @@ -46,67 +38,74 @@ 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; + justify-content: flex-start; +} - @include media-breakpoint-up('md') { - background: $white; - flex-direction: row; - } +.login-aside { + min-height: 100vh; + width: 480px; } -.login-main { - min-height: 50vh; - padding: $spacer * 3; +.login-aside__picture { + height: 100vh; + width: 480px; + object-fit: cover; +} - @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-aside__vector1 { + position: absolute; + top: 0%; + left: 0%; } -.login-form { - @include media-breakpoint-up('md') { - max-width: 360px; - } +.login-aside__vector2 { + position: absolute; + bottom: 32px; + right: 32px; } -.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; + flex-direction: row; + justify-content: center; + align-items: center; + min-height: 100vh; + width: calc(100vw - 480px); + margin: 0; + padding: 0; +} + +@media (max-width: 992px) { + .login-container { + flex-direction: column; + + .login-aside { + width: 100%; + min-height: 40vh; + height: 40vh; + + .login-aside__picture { + width: 100%; + height: 40vh; + } + } - @include media-breakpoint-up('md') { - min-height: 100vh; - padding-bottom: $spacer; - flex: 1 1 25%; - margin-bottom: 0; + .login-main { + width: 100%; + min-height: 40vh; + height: 40vh; + } } } -.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: 576px) { + .login-form { + width: 90%; } } </style> |