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;
 }