changeset 541:ee86ab038a7e

fix: Autogrow added for loginmask
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 30 Aug 2018 12:57:27 +0200
parents b2d1c82b3e27
children 505656a9947f
files client/src/views/Login.vue
diffstat 1 files changed, 16 insertions(+), 7 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/views/Login.vue	Thu Aug 30 12:39:22 2018 +0200
+++ b/client/src/views/Login.vue	Thu Aug 30 12:57:27 2018 +0200
@@ -12,7 +12,7 @@
       <div id="alert" :style="errorMessageStyle" :class="errorMessageClass" role="alert">
         <span>{{ errorMessage }}</span>
       </div>
-      <form @submit.prevent="login">
+      <form class="loginform" @submit.prevent="login">
         <div class="input-group mb-3">
           <input type="text" v-model="user" id="inputUsername" class="form-control shadow-sm" :placeholder="usernameLabel" required autofocus>
         </div>
@@ -27,10 +27,6 @@
         <button v-if="showPasswordReset==false" class="btn btn-primary btn-block shadow-sm" :disabled="submitted || showPasswordReset" type="submit">
           <translate>Login</translate>
         </button>
-      </form>
-
-      <!-- password forgotten part -->
-      <form class="">
         <div v-if="showPasswordReset" class="passwordreset">
           <button class="btn btn-block btn-info" type="button" @click="resetPassword">
             <translate>Request password reset!</translate>
@@ -49,7 +45,7 @@
       </form>
 
       <!-- bottom logo section -->
-      <div><img :src="secondaryLogo"></div>
+      <div class="mb-3 secondary-logo"><img :src="secondaryLogo"></div>
     </div>
   </div>
 </template>)
@@ -60,10 +56,16 @@
 .login {
   background-color: white;
   min-width: 375px;
-  height: 500px;
+  min-height: 500px;
   @extend %fully-centered;
 }
 
+.loginform {
+  max-width: 375px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .loginmask {
   margin-left: $large-offset;
   margin-right: $large-offset;
@@ -77,6 +79,13 @@
 .alert {
   padding: 0.5rem;
 }
+
+.secondary-logo {
+  max-width: 375px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: auto;
+}
 </style>
 
 <script>