# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1529595026 -7200
# Node ID 10ebbf197523f3368dd8ae004bcf7bb6751c287a
# Parent  c1ef0be0ae3d6b86c792e94d6bb46ec7427f6fbf
Rework layout of login page

Modernize layout
Place logo below login button
Add shadows

diff -r c1ef0be0ae3d -r 10ebbf197523 client/src/assets/application.scss
--- 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%);
+}
diff -r c1ef0be0ae3d -r 10ebbf197523 client/src/views/Login.vue
--- 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;
 }