fix pages responsiveness

Author: niyodusengaclement

.gitignore

@@ -28,4 +28,6 @@ package-lock.json
 pnpm-lock.yaml
 
 /.vscode
-/.netlify
+/.netlify
+# Local Netlify folder
+.netlify

package.json

@@ -32,7 +32,7 @@
     "react-redux": "^7.2.0",
     "react-redux-firebase": "^3.6.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1",
+    "react-scripts": "^3.4.3",
     "react-select": "^3.1.0",
     "react-toastify": "^6.0.8",
     "redux": "^4.0.5",

src/assets/styles/card.scss

@@ -15,8 +15,8 @@
   margin-left: -12px !important;
   margin-right: -10px !important;
   margin-top: -18px !important;
-
 }
+
 .card-font{
   font-style: normal;
   font-weight: normal;
@@ -178,12 +178,19 @@
 .large-card {
   position: fixed;
   height: 550px;
-  width: 358px;
+  width: 318px;
   overflow-y: auto;
 }
 .large-card-content {
   width: 350px;
 }
+.course-title-small {
+  display: none !important;
+}
+
+.hide-in-full {
+  display: none;
+}
 
 @media screen and (max-width: 1001px) {
   .submenu-small {
@@ -194,4 +201,61 @@
   .submenu-small {
     width: 130px;
   }
+}
+@media screen and (max-width: 991px) {
+  .submenu-col {
+    display: none;
+  }
+
+  .carded-table-scroll {
+    width: 83%;
+  }
+  .course-title-small {
+    background-color: $color-primary;
+    width: 90%;
+    text-align: center;
+    outline: none;
+    button {
+      outline: none;
+      background-color: $color-primary;
+      border: none;
+    }
+  }
+  .reserved-side {
+    display: none;
+  }
+  h3 {
+    width: 90%;
+  }
+
+  .course-title-small {
+    display: block !important;
+  }
+
+  .course-title {
+    margin-top: 10px;
+  }
+  
+.card-block {
+  margin-left: -5px !important;
+  margin-right: -5px !important;
+}
+  .large-table {
+    width: 90% !important;
+    left: 20px;
+    margin-top: 50px;
+  }
+
+  .large-card {
+    width: 90%;
+  }
+
+  .hide-in-small {
+    display: none;
+  }
+  
+  .hide-in-full {
+    display: block;
+    width: 90%;
+  }
 }

src/assets/styles/components/chat.scss

@@ -123,18 +123,24 @@
 
 @media screen and (max-width: 768px) {
   .chat {
-    margin-left: 20px;
-    width: 378px;
+    width: 320px !important;
+    margin-left: 0px;
   }
   .chat-card {
-    width: 370px;
+    width: 314px !important;
   }
   .online-users {
     width: 170px;
   }
   .chat_footer {
-    width: 370px;
+    width: 270px;
     top: 28rem;
-    margin-left: 20px;
+    margin-left: 0px;
+  }
+  .time-right {
+    padding-top: 20px;
+  }
+  .time-left {
+    padding-top: 20px;
   }
 }

src/assets/styles/components/table.scss

@@ -1,4 +1,3 @@
-
 .tbl {
     background-color: white;
     th {
@@ -8,4 +7,9 @@
     tr{
       border: 8px solid #F5F8FF;
     }
+}
+@media screen and (max-width: 991px) {
+  .tbl {
+    width: 100%;
+  }
 }

src/assets/styles/containers/login.scss

@@ -15,12 +15,49 @@
     position: relative;
     left: 1.7rem;
 }
-
-
-@media (max-width: 768px) {
+.in-small {
+    display: none;
+}
+@media (max-width: 1024px) {
+    .in-small {
+        display: block;
+        color: white;
+        font-weight: bold;
+        text-align: center;
+    }
+    .signup--section {
+        display: none;
+    }
     .login--form{
         position: relative;
-        top: -17rem;
-        left: -.0003rem;
+        top: -8rem;
+        left: 0;
+    }
+    .signup--form--title {
+        .txt--fontSize__large {
+            display: none;
+        }
+    }
+}
+@media (min-width: 1025px) and (max-width: 1220px) {
+    .in-small {
+        display: block;
+        color: white;
+        font-weight: bold;
+        text-align: center;
     }
-}
+    .signup--section {
+        position: relative;
+        top: 0;
+    }
+    .login--form{
+        position: relative;
+        top: 0rem;
+        left: 0;
+    }
+    .signup--form--title {
+        .txt--fontSize__large {
+            display: none;
+        }
+    }
+}

src/assets/styles/containers/signup.scss

@@ -1,6 +1,8 @@
 @import "../base.scss";
 .signup--container {
     font-size: $font-size-large;
+    position: absolute;
+    overflow: hidden;
     height: 100vh;
     width: 100vw;
     background: $color-primary;
@@ -15,8 +17,6 @@
     right: 9rem;
 }
 
-.signup--light {}
-
 .signup--logo {
     position: relative;
     left: 10.375rem;
@@ -191,7 +191,6 @@
 
 @media (min-device-width : 769px) 
 and(max-width: 1024px) {
-
     .signup__img--bulb,
     .signup__img--line__top,
     .signup__img--line__bottom {
@@ -202,4 +201,23 @@ and(max-width: 1024px) {
         top: 6rem;
         left: 33rem;
     }
-}
+    .in-small {
+        display: block !important;
+        color: white !important;
+        font-weight: bold !important;
+        text-align: center !important;
+    }
+    .login--form{
+        position: relative !important;
+        top: 0rem !important;
+        left: 0;
+    }
+    .signup--section {
+        display: none !important;
+    }
+    .signup--form--title {
+        .txt--fontSize__large {
+            display: none !important;
+        }
+    }
+}