diff options
| author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-06-16 22:39:07 +0300 |
|---|---|---|
| committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-07-02 16:36:20 +0300 |
| commit | 6173bc611071be368967afd795be5e84d8b38ee5 (patch) | |
| tree | 0af79f623b54fc87bc36bde5c49e7d3c96d8f93e /src/layouts | |
| parent | 193c22a8c001e3274e0767b36df9a18a30e71da7 (diff) | |
| download | webui-vue-6173bc611071be368967afd795be5e84d8b38ee5.tar.xz | |
Create separate LoginLayout component
Create a separate layout for the login page so it can be reused
for first time password reset form.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ia2da0e8d29f7d6ad77c5277193c7535f2d00a97d
Diffstat (limited to 'src/layouts')
| -rw-r--r-- | src/layouts/LoginLayout.vue | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue new file mode 100644 index 00000000..bb89f25e --- /dev/null +++ b/src/layouts/LoginLayout.vue @@ -0,0 +1,51 @@ +<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"> + <img + class="logo" + width="200px" + src="@/assets/images/openbmc-logo.svg" + alt="" + /> + <h1>OpenBMC</h1> + </div> + </b-col> + <b-col md="6"> + <router-view /> + </b-col> + </b-row> + </b-container> + </main> +</template> + +<script> +export default { + name: 'LoginLayout' +}; +</script> + +<style lang="scss" scoped> +@import 'src/assets/styles/helpers'; + +.login-container { + @include media-breakpoint-up(md) { + background: linear-gradient(to right, $light 50%, $container-bgd 50%); + } +} + +.login-row { + @include media-breakpoint-up(md) { + min-height: 100vh; + } +} + +.login-branding__container { + @include media-breakpoint-up(md) { + float: right; + margin-right: 4rem; + } +} +</style> |