# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1530013394 -7200
# Node ID 0c19dcc352f98af0f16798384c50b921530ebdd9
# Parent  e5a06705171640d6ee1e3722b3def05d6889ee5d
Dynamic height of dialogbox

Depending on status (loginfailed) the height of
the loginmask is now dynamic.

diff -r e5a067051716 -r 0c19dcc352f9 client/src/assets/application.scss
--- a/client/src/assets/application.scss	Mon Jun 25 18:06:21 2018 +0200
+++ b/client/src/assets/application.scss	Tue Jun 26 13:43:14 2018 +0200
@@ -6,8 +6,6 @@
 $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);
-$sidebar-full-width: 150px;
-$sidebar-collapsed-width: 80px;
 
 
 %fully-centered {
diff -r e5a067051716 -r 0c19dcc352f9 client/src/views/Login.vue
--- a/client/src/views/Login.vue	Mon Jun 25 18:06:21 2018 +0200
+++ b/client/src/views/Login.vue	Tue Jun 26 13:43:14 2018 +0200
@@ -1,5 +1,5 @@
 <template>
-  <div class="login rounded bg-white">
+  <div :class="loginStyle">
     <div>
       <div class="logogroup d-flex flex-row justify-content-center">
         <div class="logo"><img src="../assets/logo.png"></div>
@@ -8,9 +8,9 @@
     </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="loginerrormessage alert alert-danger" role="alert">
-            <span class="loginerror">{{ loginAttemptFailed }}</span>
-          </div>
+           <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>
@@ -36,6 +36,8 @@
 
 <style lang="scss">
 @import "../assets/application.scss";
+$collapsedheight: 470px;
+$fullheight: 550px;
 
 .emailgroup {
   box-shadow: $basic-shadow-light !important;
@@ -51,14 +53,21 @@
 .input-group-text {
   background-color: white !important;
 }
+
 .login {
-  height: 550px;
   width: 375px;
   @extend %fully-centered;
   padding-top: $offset;
   padding-bottom: $offset;
   box-shadow: $basic-shadow;
 }
+.logincollapsed {
+  height: $collapsedheight;
+}
+
+.loginfull {
+  height: $fullheight;
+}
 .loginerror {
   white-space: pre;
 }
@@ -107,6 +116,15 @@
     };
   },
   computed: {
+    loginStyle: function() {
+      return {
+        login: true,
+        logincollapsed: !this.loginFailed,
+        loginfull: this.loginFailed,
+        "bg-white": true,
+        rounded: true
+      };
+    },
     ...mapGetters("application", ["appTitle", "secondaryLogo"]),
     ...mapGetters("i18n", [
       "signinHeader",
diff -r e5a067051716 -r 0c19dcc352f9 client/src/views/Main.vue
--- a/client/src/views/Main.vue	Mon Jun 25 18:06:21 2018 +0200
+++ b/client/src/views/Main.vue	Tue Jun 26 13:43:14 2018 +0200
@@ -7,6 +7,9 @@
 
 <style lang="scss">
 @import "../assets/application.scss";
+$sidebar-full-width: 150px;
+$sidebar-collapsed-width: 80px;
+
 .main {
   height: 100vh;
 }