Mercurial > gemma

changeset 25:a728610b3812

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add Light visual hints Using light hints to emphasize the from parts
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 21 Jun 2018 18:28:18 +0200
parents 10ebbf197523
children 96a429c5f227
files client/src/assets/application.scss client/src/views/Login.vue
diffstat 2 files changed, 24 insertions(+), 11 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/assets/application.scss	Thu Jun 21 17:30:26 2018 +0200
+++ b/client/src/assets/application.scss	Thu Jun 21 18:28:18 2018 +0200
@@ -4,6 +4,7 @@
 $iconLineHeight: 0.25em;
 $iconwidth: 20px;
 $basic-shadow: 1px 3px 8px 2px rgba(220, 220, 220, 0.75);
+$basic-shadow-light: 1px 1px 12px 1px rgba(235, 235, 235, 0.75);
 
 %fully-centered {
   position: absolute;
--- a/client/src/views/Login.vue	Thu Jun 21 17:30:26 2018 +0200
+++ b/client/src/views/Login.vue	Thu Jun 21 18:28:18 2018 +0200
@@ -1,23 +1,23 @@
 <template>
   <div class="login rounded bg-white">
     <div>
-      <div class="logo d-flex flex-row justify-content-center">
-        <div><img src="../assets/logo.png"></div>
+      <div class="logogroup d-flex flex-row justify-content-center">
+        <div class="logo"><img src="../assets/logo.png"></div>
         <div class="title"><h1>{{ appTitle }}</h1></div>
       </div>
     </div>
     <div class="login-wrapper d-flex flex-row justify-content-center">
       <form class="loginform form-signin" @submit.prevent="login">
-        <div v-if="loginFailed" class="alert alert-danger" role="alert">
-          <span class="loginerror">{{ loginAttemptFailed }}</span>
-        </div>
-        <div class="input-group mb-3">
+          <div v-if="loginFailed" class="loginerrormessage alert alert-danger" role="alert">
+            <span class="loginerror">{{ loginAttemptFailed }}</span>
+          </div>
+        <div class="input-group mb-3 emailgroup">
           <div class="input-group-prepend">
             <span class="input-group-text"><i class="fa fa-envelope-open-o mail-icon"></i></span>
           </div>
           <input type="text" v-model="username" id="inputEmail" class="form-control" :placeholder="emailLabel" required autofocus>
         </div>
-        <div class="input-group mb-3">
+        <div class="input-group mb-3 passwordgroup">
           <div class="input-group-prepend">
             <span class="input-group-text"><span class="password-icon">*</span></span>
           </div>
@@ -26,7 +26,7 @@
             <span class="input-group-text" id="basic-addon2"><i class="fa fa-eye"></i></span>
           </div>
         </div>
-        <button class="btn btn-lg btn-primary btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button>
+        <button class="submitbutton 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>
@@ -37,10 +37,13 @@
 <style lang="scss">
 @import "../assets/application.scss";
 
+.emailgroup {
+  box-shadow: $basic-shadow-light !important;
+}
 .forgottenlink {
   text-align: right;
   margin-top: $small-offset;
-  margin-bottom: $offset;
+  margin-bottom: $small-offset;
 }
 #inputPassword {
   border-right: none;
@@ -49,7 +52,7 @@
   background-color: white !important;
 }
 .login {
-  height: 480px;
+  height: 550px;
   width: 375px;
   @extend %fully-centered;
   padding-top: $offset;
@@ -59,16 +62,22 @@
 .loginerror {
   white-space: pre;
 }
+.loginerrormessage {
+  box-shadow: $basic-shadow-light !important;
+}
 .loginform {
   width: 300px;
 }
-.logo {
+.logogroup {
   margin-top: $offset;
   margin-bottom: $offset;
 }
 .mail-icon {
   width: $iconwidth;
 }
+.passwordgroup {
+  box-shadow: $basic-shadow-light !important;
+}
 .password-icon {
   position: relative;
   top: 10px;
@@ -76,6 +85,9 @@
   line-height: $iconLineHeight;
   width: $iconwidth;
 }
+.submitbutton {
+  box-shadow: $basic-shadow-light !important;
+}
 .title {
   margin-left: $offset;
 }