From 13019ab446b6cf7080daa9f405de3135b1af2fb3 Mon Sep 17 00:00:00 2001
From: LautaroCesso <59095036+LautaroCesso@users.noreply.github.com>
Date: Sun, 7 Jun 2020 17:29:19 -0300
Subject: [PATCH] Fix mobile style and bug with footer. (#785)

---
 .../src/app-components/password-recovery.scss | 12 ++++++
 .../dashboard-create-ticket-page.scss         |  4 ++
 .../app/main/dashboard/dashboard-layout.scss  |  4 ++
 .../dashboard-list-articles-page.scss         |  4 ++
 .../main-home-page-login-widget.scss          | 39 +++++++++++++------
 client/src/app/main/main-layout-header.scss   | 17 +++++++-
 client/src/app/main/main-layout.scss          | 12 ++++++
 .../main/main-signup/main-signup-widget.scss  | 38 ++++++++++--------
 client/src/core-components/card.scss          |  6 +++
 client/src/scss/_reset.scss                   |  2 +-
 10 files changed, 108 insertions(+), 30 deletions(-)

diff --git a/client/src/app-components/password-recovery.scss b/client/src/app-components/password-recovery.scss
index 85bf3d33..edd5bba1 100644
--- a/client/src/app-components/password-recovery.scss
+++ b/client/src/app-components/password-recovery.scss
@@ -24,3 +24,15 @@
         margin-bottom: 30px;
     }
 }
+
+@media screen and (max-width: 320px) {
+    .widget {
+        margin-left: -12px;
+    }
+}
+
+@media screen and (max-width: 992px) {
+    .password-recovery__content {
+        width: 100%;
+    }
+}
diff --git a/client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.scss b/client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.scss
index cba5b276..b7de33f8 100644
--- a/client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.scss
+++ b/client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.scss
@@ -2,5 +2,9 @@
 
     &_wrapped {
         padding: 0 10px;
+
+        @media screen and (min-width: 993px){
+            float: none;
+        }
     }
 }
\ No newline at end of file
diff --git a/client/src/app/main/dashboard/dashboard-layout.scss b/client/src/app/main/dashboard/dashboard-layout.scss
index 49c597af..b301b6dc 100644
--- a/client/src/app/main/dashboard/dashboard-layout.scss
+++ b/client/src/app/main/dashboard/dashboard-layout.scss
@@ -1,4 +1,8 @@
 .dashboard {
+    @media screen and (min-width: 993px){
+        display: flex;
+    }
+
     &__menu {
         margin-bottom: 10px;
     }
diff --git a/client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.scss b/client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.scss
index 8cea0a52..189c24f5 100644
--- a/client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.scss
+++ b/client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.scss
@@ -2,6 +2,10 @@
 
 .dashboard-list-articles-page {
 
+    @media screen and (min-width: 993px){
+        float: none;
+    }
+
     &__search-results {
 
     }
diff --git a/client/src/app/main/main-home/main-home-page-login-widget.scss b/client/src/app/main/main-home/main-home-page-login-widget.scss
index 899b3eb3..30791b30 100644
--- a/client/src/app/main/main-home/main-home-page-login-widget.scss
+++ b/client/src/app/main/main-home/main-home-page-login-widget.scss
@@ -18,14 +18,31 @@
     &__message {
         margin-top: 18px;
     }
-  
-  @media screen and (min-width: 379px) {
-      .login-widget__container {
-          min-width: 324px;
-      }
-  }
-  @media screen and (max-width: 409px) {
-      .login-widget__container {
-          min-width: 313px;
-      }
-  }}
+}
+
+@media screen and (min-width: 379px) {
+    .login-widget__container {
+        min-width: 324px;
+    }
+    .Widget {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: 409px) {
+    .login-widget__container {
+        min-width: 313px;
+    }
+}
+
+@media screen and (max-width: 992px) {
+    .login-widget__container {
+        width: 100%;
+    }
+    .main-home-page__widget {
+        width: 100%;
+    }
+}
diff --git a/client/src/app/main/main-layout-header.scss b/client/src/app/main/main-layout-header.scss
index 99f45752..037ef32b 100644
--- a/client/src/app/main/main-layout-header.scss
+++ b/client/src/app/main/main-layout-header.scss
@@ -5,6 +5,9 @@
     border-radius: 4px 4px 0 0;
     width: 100%;
     position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 
     &__user-name {
         color: $primary-red;
@@ -20,7 +23,6 @@
 
     &__languages {
         display: inline-block;
-        float: right;
         position: relative;
         top: 5px;
         margin: 0 6px;
@@ -31,4 +33,17 @@
             float: none;
         }
     }
+
+    @media (max-width: 363px) {
+        .main-layout-header__login-links{
+           padding: 8px 0 0 0;
+        }
+    }
+
+    @media (max-width: 350px) {
+        .main-layout-header__languages {
+            margin: 0 3px;
+            left: unset;
+        }
+    }
 }
\ No newline at end of file
diff --git a/client/src/app/main/main-layout.scss b/client/src/app/main/main-layout.scss
index 7aa19394..57dc68b7 100644
--- a/client/src/app/main/main-layout.scss
+++ b/client/src/app/main/main-layout.scss
@@ -11,5 +11,17 @@
     &--content {
         min-height: 400px;
         padding: 20px;
+
+        @media screen and (min-width: 993px) and (max-width: 1032px) {
+            padding: 20px 0.45%;
+        }
+
+        @media screen and (max-width: 353px) {
+            padding: 20px 10px;
+        }
+
+        @media screen and (max-width: 333px) {
+            padding: 20px 0;
+        }
     }
 }
diff --git a/client/src/app/main/main-signup/main-signup-widget.scss b/client/src/app/main/main-signup/main-signup-widget.scss
index 388bf1e5..b3a3d87a 100644
--- a/client/src/app/main/main-signup/main-signup-widget.scss
+++ b/client/src/app/main/main-signup/main-signup-widget.scss
@@ -1,19 +1,23 @@
-    .signup-widget {
-        padding: 30px;
-        text-align: center;
+.signup-widget {
+    padding: 30px;
+    text-align: center;
 
-        &__form {
-            margin-bottom: 20px;
-        }
-
-        &__inputs {
-            display: inline-block;
-            margin: 0 auto;
-        }
-
-        &__captcha {
-            margin: 10px auto 20px;
-            height: 78px;
-            width: 304px;
-        }
+    @media screen and (min-width: 993px){
+        float: none;
     }
+
+    &__form {
+        margin-bottom: 20px;
+    }
+
+    &__inputs {
+        display: inline-block;
+        margin: 0 auto;
+    }
+
+    &__captcha {
+        margin: 10px auto 20px;
+        height: 78px;
+        width: 304px;
+    }
+}
diff --git a/client/src/core-components/card.scss b/client/src/core-components/card.scss
index 1044b8b5..1c0785e2 100644
--- a/client/src/core-components/card.scss
+++ b/client/src/core-components/card.scss
@@ -24,6 +24,12 @@
         bottom: 17px;
     }
 
+    @media (max-width: 1060px) {
+        .button {
+            width: 80%;
+        }
+    }
+
     &_red {
         background-color: $primary-red;
     }
diff --git a/client/src/scss/_reset.scss b/client/src/scss/_reset.scss
index 95e2b640..e45cb0a7 100644
--- a/client/src/scss/_reset.scss
+++ b/client/src/scss/_reset.scss
@@ -1131,7 +1131,7 @@ pre code {
     margin-left: 0%;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 993px) {
   .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
     float: left;
   }