From 4bbfb800cbe916c22b76d203895d67cdcee14cf9 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Sun, 15 Aug 2021 09:24:10 +0200
Subject: [PATCH] Client - fix app height

---
 fittrackee_client/src/App.vue                       |  7 ++++++-
 fittrackee_client/src/components/BikePic.vue        |  6 +-----
 .../src/components/User/LoginOrRegisterForm.vue     |  3 +--
 fittrackee_client/src/scss/vars.scss                |  5 +++++
 fittrackee_client/src/views/LoginOrRegister.vue     | 13 ++++++-------
 5 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/fittrackee_client/src/App.vue b/fittrackee_client/src/App.vue
index c15c28d1..641aa71e 100644
--- a/fittrackee_client/src/App.vue
+++ b/fittrackee_client/src/App.vue
@@ -1,6 +1,8 @@
 <template>
   <NavBar />
-  <router-view />
+  <div class="app-container">
+    <router-view />
+  </div>
   <Footer />
 </template>
 
@@ -21,4 +23,7 @@
 
 <style lang="scss">
   @import '~@/scss/base';
+  .app-container {
+    height: $app-height;
+  }
 </style>
diff --git a/fittrackee_client/src/components/BikePic.vue b/fittrackee_client/src/components/BikePic.vue
index 256b5a78..52cdd9f6 100644
--- a/fittrackee_client/src/components/BikePic.vue
+++ b/fittrackee_client/src/components/BikePic.vue
@@ -25,11 +25,7 @@
     justify-content: center;
 
     padding: $default-padding;
-    height: calc(100vh - 100px);
-
-    @media screen and (max-width: $medium-limit) {
-      height: auto;
-    }
+    height: 100%;
 
     .bike-img {
       max-width: 40%;
diff --git a/fittrackee_client/src/components/User/LoginOrRegisterForm.vue b/fittrackee_client/src/components/User/LoginOrRegisterForm.vue
index bab4b401..ce51edf1 100644
--- a/fittrackee_client/src/components/User/LoginOrRegisterForm.vue
+++ b/fittrackee_client/src/components/User/LoginOrRegisterForm.vue
@@ -101,10 +101,9 @@
   #login-form {
     display: flex;
     align-items: center;
-    height: calc(100vh - 100px);
 
-    border-radius: 4px;
     margin: $default-margin 0;
+    height: 100%;
 
     #user-form {
       width: 60%;
diff --git a/fittrackee_client/src/scss/vars.scss b/fittrackee_client/src/scss/vars.scss
index 78e32924..0e4d5377 100644
--- a/fittrackee_client/src/scss/vars.scss
+++ b/fittrackee_client/src/scss/vars.scss
@@ -5,6 +5,11 @@ $container-width: 1140px;
 $medium-limit: 1000px;
 $small-limit: 500px;
 
+/*
+* === HEIGHT ===
+*/
+$app-height: calc(100vh - 130px);
+
 /*
 * === PADDING / MARGIN ===
 */
diff --git a/fittrackee_client/src/views/LoginOrRegister.vue b/fittrackee_client/src/views/LoginOrRegister.vue
index 8032ebae..04fd0a08 100644
--- a/fittrackee_client/src/views/LoginOrRegister.vue
+++ b/fittrackee_client/src/views/LoginOrRegister.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="login">
+  <div id="loginOrRegister">
     <div class="container">
       <div class="container-sub">
         <BikePic />
@@ -35,14 +35,15 @@
 <style lang="scss">
   @import '~@/scss/base';
 
-  #login {
-    height: 84vh;
+  #loginOrRegister {
+    height: 100%;
+
     .container {
       display: flex;
       flex-direction: row;
-      flex-wrap: wrap;
       justify-content: space-evenly;
 
+      height: 100%;
       margin-bottom: $default-margin * 2;
 
       .container-sub {
@@ -50,9 +51,7 @@
       }
 
       @media screen and (max-width: $medium-limit) {
-        flex-direction: column;
-        flex-wrap: nowrap;
-
+        display: block;
         .container-sub {
           .bike-img {
             margin-top: $default-margin * 1.5;