Mercurial > gemma
diff client/src/views/Login.vue @ 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 | d53de4169d11 |
children | a728610b3812 |
line wrap: on
line diff
--- 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; }