Mercurial > gemma

changeset 24:10ebbf197523

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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;
 }