Mercurial > gemma

changeset 32:0c19dcc352f9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Dynamic height of dialogbox Depending on status (loginfailed) the height of the loginmask is now dynamic.
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 26 Jun 2018 13:43:14 +0200
parents e5a067051716
children ae6535d44563
files client/src/assets/application.scss client/src/views/Login.vue client/src/views/Main.vue
diffstat 3 files changed, 26 insertions(+), 7 deletions(-) [+]
line wrap: on
line diff
--- 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 {
--- 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",
--- 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;
 }