Merge pull request from /feature/responsivity

Responsivity Home
Pyments · Jan 12, 2024 · 82ea7e5 · 82ea7e5
2 parents f105a99 + 54c81cc
commit 82ea7e5
Show file tree

Hide file tree

Showing 17 changed files with 289 additions and 150 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@mui/x-charts": "^6.18.7",
     "@tanstack/react-query": "^5.17.1",
     "axios": "^1.6.4",
+    "highcharts": "^11.3.0",
     "json-server": "^0.16.3",
     "json-server-auth": "^2.1.0",
     "react": "^18.2.0",

diff --git a/src/App.scss b/src/App.scss
@@ -11,8 +11,8 @@
 #root {
   font-family: Raleway, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   text-align: center;
-  max-width: 1440px;
-  min-width: 980px;
+  max-width: 1920px;
+  width: 100%;
   padding: 0;
   border: 0;
 }
diff --git a/src/components/ImageSlider/ImageSlider.scss b/src/components/ImageSlider/ImageSlider.scss
@@ -62,8 +62,8 @@
       height: 100%;
       width: 100%;
       transition: scale 100ms ease-out;
-      :hover > *,
-      :focus-visible > * {
+      &:hover > *,
+      &:focus-visible > * {
         scale: 1.3 1;
       }
     }

diff --git a/src/components/MainHeader/MainHeader.scss b/src/components/MainHeader/MainHeader.scss
@@ -19,7 +19,7 @@
       text-decoration: none;
     }
     .navbar-group-item {
-      font-size: clamp(0.2rem, 0.2rem + 1vw, 1.4rem);
+      font-size: clamp(0.1rem, 0.2rem + 1vw, 1.4rem);
       letter-spacing: $letter-spacing-mid;
       padding: 0.8rem 0.5rem;
       color: $ui-dark;

diff --git a/src/components/ModulosEducacionais_small/ModulosEducacionais_small.scss b/src/components/ModulosEducacionais_small/ModulosEducacionais_small.scss
@@ -17,137 +17,160 @@ section {
           text-align: center;
           display: inline;
           button {
-            background-color: transparent;
-            transition: 200ms ease-in;
-            display: inline-block;
-            text-decoration: none;
-            border-radius: 0rem;
-            padding: 0.75rem 0;
-            color: $ui-darkest;
-            font-size: 1.3rem;
-            cursor: pointer;
-            width: 33%;
-            margin: 0;
-            &:hover {
-              background-color: $red-ligh;
-              border-radius: 2rem;
-            }
+            font-size: clamp(0.3rem, 0.5rem + 1vw, 1.5rem);
+            font-weight: 600;
+            margin: 0.5rem 0.5rem;
+            padding: 0.5rem 1rem;
           }
         }
       }
     }
-    .modulos-lista {
-      flex-direction: row;
-      list-style: none;
-      flex-wrap: wrap;
-      display: flex;
-      width: 85%;
-      li {
-        background-color: $ui-lighter;
-        padding: 1.5rem 1.5rem;
-        border-radius: 3rem;
-        margin-top: 1.5rem;
+  }
+  .modulos-lista {
+    flex-direction: row;
+    list-style: none;
+    flex-wrap: wrap;
+    display: flex;
+    width: 85%;
+    li {
+      box-shadow: 3px 2px 10px 0px rgba(0, 0, 0, 0.2);
+      background-color: $ui-lighter;
+      padding: 1.5rem 1.5rem;
+      border-radius: 3rem;
+      margin-top: 1.5rem;
+      min-width: 100%;
+      div {
+        justify-content: space-around;
+        flex-direction: row;
+        align-items: center;
+        font-weight: 500;
+        display: flex;
         width: 100%;
-        div {
-          justify-content: space-around;
-          flex-direction: row;
-          align-items: center;
-          font-weight: 500;
+        .modulo-capa {
+          img {
+            border-radius: 1.5rem;
+            object-fit: cover;
+            height: 9rem;
+            width: 9rem;
+          }
+        }
+        .modulo-cabecalho {
+          letter-spacing: $letter-spacing-mid;
+          flex-direction: column;
+          padding-left: 0.8rem;
+          text-align: left;
+          min-width: 35%;
           display: flex;
-          width: 100%;
-          .modulo-capa {
-            img {
-              border-radius: 1.5rem;
-              object-fit: cover;
-              height: 9rem;
-              width: 9rem;
-            }
+          .modulo-titulo {
+            padding-bottom: 0.2rem;
+            font-size: clamp(0.1rem, 0.35rem + 1vw, 2.2rem);
+            font-weight: 800;
+            padding: 0.4rem;
           }
-          .modulo-cabecalho {
-            letter-spacing: $letter-spacing-mid;
-            flex-direction: column;
-            padding-left: 0.8rem;
-            text-align: left;
-            min-width: 40%;
-            display: flex;;
-            .modulo-titulo {
-              padding-bottom: 0.2rem;
-              font-size: 1.2rem;
-              font-weight: 800;
-              padding: 0.4rem;
-            }
-            .modulo-parceiros {
-              letter-spacing: $letter-spacing-min;
-              font-weight: 800;
-              font-size: 0.7rem;
-              color: $red-ligh;
-              padding: 0.4rem;
-              padding-top: 0;
-              width: 100%;
-            }
+          .modulo-parceiros {
+            font-size: clamp(0.1rem, 0.2rem + 1vw, 2rem);
+            letter-spacing: $letter-spacing-min;
+            color: $red-ligh;
+            font-weight: 400;
+            padding: 0.4rem;
+            padding-top: 0;
+            width: 100%;
           }
-          .modulo-matriculados {
-            justify-content: center;
-            > img {
-              width: 1.8rem;
-              margin: 0;
-            }
-            span {
-              padding-left: 0.2rem;
-              width: auto;
-              margin: 0;
-            }
+        }
+        .modulo-matriculados {
+          justify-content: left;
+          font-size: clamp(0.1rem, 0.2rem + 1vw, 1rem);
+          > img {
+            width: fit-content;
+            margin: 0;
           }
-          .modulo-duracao {
-            justify-content: center;
-            > img {
-              width: 1.8rem;
-              margin: 0;
-            }
-            span {
-              padding-left: 0.2rem;
-              margin: 0;
-              width: auto;
-            }
+          span {
+            padding-left: 0.2rem;
+            width: fit-content;
+            margin: 0;
+          }
+        }
+        .modulo-duracao {
+          justify-content: left;
+          font-size: clamp(0.1rem, 0.2rem + 1vw, 1rem);
+          > img {
+            width: fit-content;
+            margin: 0;
+          }
+          span {
+            padding-left: 0.2rem;
+            width: fit-content;
+            margin: 0;
+          }
+        }
+        .modulo-avaliacao {
+          justify-content: left;
+          font-size: clamp(0.1rem, 0.2rem + 1vw, 1rem);
+          > img {
+            width: fit-content;
+            margin: 0;
           }
-          .modulo-avaliacao {
+          span {
+            padding-left: 0.2rem;
+            width: fit-content;
+            margin: 0;
+          }
+        }
+        .modulo-verModulo {
+          justify-content: center;
+          a {
             justify-content: center;
-            > img {
-              width: 1.8rem;
-              margin: 0;
-            }
-            span {
-              padding-left: 0.2rem;
-              margin: 0;
-              width: auto;
+            text-decoration: none;
+            color: $ui-lightest;
+            &:hover,
+            &:focus-visible > button {
+              background-color: $ui-lightest;
+              border: 3px solid $ui-light;
+              color: $ui-darkest;
             }
-          }
-          .modulo-verModulo {
             button {
               all: unset;
+              font-size: clamp(0.1rem, 0.2rem + 1vw, 1.5rem);
+              border: 3px solid transparent;
               background-color: $ui-light;
+              transition: all 200ms;
               padding: 0.3rem 1rem;
-              border-radius: 1rem;
+              align-items: center;
+              border-radius: 2rem;
               color: $ui-lightest;
+              object-fit: contain;
               text-wrap: nowrap;
               font-weight: 800;
               cursor: pointer;
+              width: 80%;
             }
           }
         }
       }
     }
   }
-  div {
+}
+div {
+  a {
+    &:hover,
+    &:focus-visible > .modulo-verMais {
+      background-color: $ui-lightest;
+      border: 3px solid $ui-light;
+      color: $ui-darkest;
+    }
     .modulo-verMais {
+      border: 3px solid transparent;
       background-color: $ui-light;
-      padding: 0.6rem 3rem;
+      transition: all 200ms;
+      padding: 0.4rem 2.5rem;
       color: $ui-lightest;
       border-radius: 3rem;
       width: fit-content;
-      font-size: 1.4rem;
+      font-size: 1.2rem;
       text-wrap: nowrap;
       margin-top: 1rem;
+      font-weight: 600;
+      cursor: pointer;
     }
   }
 }
diff --git a/src/components/ModulosEducacionais_small/ModulosEducacionais_small.tsx b/src/components/ModulosEducacionais_small/ModulosEducacionais_small.tsx
@@ -2,15 +2,17 @@ import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 
 import "./ModulosEducacionais_small.scss";
+import "../../styles/anims_presets.scss";
 
 import Timer from "../../assets/feather/clock.svg";
 import User from "../../assets/feather/user.svg";
 import Star from "../../assets/feather/star.svg";
+import { Link } from "react-router-dom";
 
 const ModulosEducacionais_small = () => {
-  const [sort, setSort] = useState('matriculados');
+  const [sort, setSort] = useState("matriculados");
 
-  const fetchModulosS = async (sort = '') => {
+  const fetchModulosS = async (sort = "") => {
     const response = await fetch(
       `http://0.0.0.0:3004/cursos?_sort=${sort}&_order=desc&_page=1&_limit=3`
     );
@@ -45,15 +47,19 @@ const ModulosEducacionais_small = () => {
           <div className="modulos-paginas">
             <ul>
               <li>
-                <button onClick={() => setSort('matriculados')}>
+                <button className="button-growBox" onClick={() => setSort("matriculados")}>
                   Mais populares
                 </button>
               </li>
               <li>
-                <button onClick={() => setSort('avaliacao')}>Mais bem avaliados</button>
+                <button className="button-growBox" onClick={() => setSort("avaliacao")}>
+                  Mais bem avaliados
+                </button>
               </li>
               <li>
-                <button onClick={() => setSort('criado_em')}>Mais recentes</button>
+                <button className="button-growBox" onClick={() => setSort("criado_em")}>
+                  Mais recentes
+                </button>
               </li>
             </ul>
           </div>
@@ -82,7 +88,9 @@ const ModulosEducacionais_small = () => {
                       <span>{data.avaliacao}</span>
                     </div>
                     <div className="modulo-verModulo">
-                      <button>Ver módulo</button>
+                      <Link to={`/AVASUS/cursos/${data?.id}`}>
+                        <button tabIndex={-1}>Ver módulo</button>
+                      </Link>
                     </div>
                   </div>
                 </li>
@@ -91,7 +99,9 @@ const ModulosEducacionais_small = () => {
           </ol>
         </div>
         <div>
-          <button className="modulo-verMais">Ver mais</button>
+          <Link to={`/AVASUS/cursos`}>
+            <button tabIndex={-1} className="modulo-verMais">Ver mais</button>
+          </Link>
         </div>
       </section>
     </>