Mercurial > gemma
changeset 24:10ebbf197523
Rework layout of login page
Modernize layout
Place logo below login button
Add shadows
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 21 Jun 2018 17:30:26 +0200 |
parents | c1ef0be0ae3d |
children | a728610b3812 |
files | client/src/assets/application.scss client/src/views/Login.vue |
diffstat | 2 files changed, 17 insertions(+), 14 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/assets/application.scss Thu Jun 21 13:39:01 2018 +0200 +++ b/client/src/assets/application.scss Thu Jun 21 17:30:26 2018 +0200 @@ -3,3 +3,11 @@ $iconsize: 3em; $iconLineHeight: 0.25em; $iconwidth: 20px; +$basic-shadow: 1px 3px 8px 2px rgba(220, 220, 220, 0.75); + +%fully-centered { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +}
--- a/client/src/views/Login.vue Thu Jun 21 13:39:01 2018 +0200 +++ b/client/src/views/Login.vue Thu Jun 21 17:30:26 2018 +0200 @@ -1,5 +1,5 @@ <template> - <div class="login border border-dark rounded bg-white"> + <div class="login rounded bg-white"> <div> <div class="logo d-flex flex-row justify-content-center"> <div><img src="../assets/logo.png"></div> @@ -26,10 +26,10 @@ <span class="input-group-text" id="basic-addon2"><i class="fa fa-eye"></i></span> </div> </div> - <button class="btn btn-lg btn-success btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button> + <button class="btn btn-lg btn-primary btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button> <div class="forgottenlink"><a href="#">{{ passPhraseForgotten }}</a></div> + <div class="secondary-logo"><img :src="secondaryLogo"></div> </form> - <div class="secondary-logo"><img :src="secondaryLogo"></div> </div> </div> </template> @@ -49,10 +49,12 @@ background-color: white !important; } .login { - margin-left: auto; - margin-right: auto; - margin-top: 200px; - width: 600px; + height: 480px; + width: 375px; + @extend %fully-centered; + padding-top: $offset; + padding-bottom: $offset; + box-shadow: $basic-shadow; } .loginerror { white-space: pre; @@ -61,8 +63,6 @@ width: 300px; } .logo { - position: relative; - left: -85px; margin-top: $offset; margin-bottom: $offset; } @@ -76,11 +76,6 @@ line-height: $iconLineHeight; width: $iconwidth; } -.secondary-logo { - position: relative; - top: -$offset; - margin-left: $offset; -} .title { margin-left: $offset; }