From b63c05a09eebf14b174e0699ba541c53a20b4914 Mon Sep 17 00:00:00 2001 From: Eduardo-Pyment Date: Mon, 8 Jan 2024 16:24:48 -0300 Subject: [PATCH 1/4] header now sticks to page top --- src/style/components/MainHeader.scss | 28 ++++++++++++---------------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/src/style/components/MainHeader.scss b/src/style/components/MainHeader.scss index 255cfd1..7953c45 100644 --- a/src/style/components/MainHeader.scss +++ b/src/style/components/MainHeader.scss @@ -1,39 +1,36 @@ @import "../variables"; .navbar { - margin: 0; - padding: 0; - border: 0; - width: 100%; background-color: $ui-lightest; - align-items: center; justify-content: center; + align-items: center; + position: sticky; + z-index: 999; + top: 0; + border-bottom: 2px solid $ui-lighter; .navbar-group { - width: 100%; - margin: 0; - padding: 0; - display: flex; + justify-content: center; flex-direction: row; align-items: center; - justify-content: center; text-wrap: nowrap; list-style: none; + display: flex; a { text-decoration: none; } .navbar-group-item { - color: $ui-grey; + font-size: clamp(0.2rem, 0.2rem + 1vw, 1.4rem); letter-spacing: $letter-spacing-mid; padding: 0.8rem 0.5rem; - font-size: clamp(0.2rem, 0.2rem + 1vw, 1.4rem); + color: $ui-grey; img { min-width: 5rem; width: 80%; } .nav-button { border: solid 1px $ui-grey; - border-radius: 10rem; padding: 0.3rem 0.8rem; + border-radius: 10rem; box-shadow: none; } .nav-button-entrar { @@ -45,11 +42,10 @@ color: $ui-lightest; } input#nav-searchbar { - width: 100%; - min-width: 2rem; - border-radius: 2rem; border: solid 1px $ui-grey; padding: 0.1rem 0.3rem; + border-radius: 2rem; + min-width: 2rem; } #nav-searchbar::placeholder { color: $ui-darkest; From 0608a9ecf0ff47422dc0b66d7004a7d8d5582844 Mon Sep 17 00:00:00 2001 From: Eduardo-Pyment Date: Mon, 8 Jan 2024 20:59:04 -0300 Subject: [PATCH 2/4] ModulosEducacionais_big base style implemented --- src/components/ModulosEducacionais_big.tsx | 91 +++++++++++++++++++ src/components/ModulosEducacionais_small.tsx | 6 +- src/routes/Cursos.tsx | 4 +- .../components/ModulosEducacionais_big.scss | 75 +++++++++++++++ 4 files changed, 172 insertions(+), 4 deletions(-) create mode 100644 src/style/components/ModulosEducacionais_big.scss diff --git a/src/components/ModulosEducacionais_big.tsx b/src/components/ModulosEducacionais_big.tsx index e69de29..a82d263 100644 --- a/src/components/ModulosEducacionais_big.tsx +++ b/src/components/ModulosEducacionais_big.tsx @@ -0,0 +1,91 @@ +import { useState } from "react"; +import { useQuery } from "@tanstack/react-query"; +import { Link } from "react-router-dom"; + +import "../style/components/ModulosEducacionais_big.scss"; + +const ModulosEducacionais_big = () => { + const [modulosBigPage, setModulosBigPage] = useState(""); + + const fetchModulosB = async (sort = "") => { + const response = await fetch( + `http://0.0.0.0:3004/cursos?_sort=${sort}&_order=desc&_page=1&_limit=3` + ); + const data = await response.json(); + return data; + }; + + const { isLoading, error, data, isFetching } = useQuery({ + queryKey: ["queryModulosSmall", modulosBigPage], + queryFn: () => fetchModulosB(modulosBigPage), + }); + + if (isLoading || isFetching) { + return ( +

+ Carregando Modulos.... +

+ ); + } else if (error) { + return ( +

+ Error: {error.message} +

+ ); + } + + return ( + <> +
+

Módulos Educacionais

+
+ Covid 19 + Sifilis e outras Ist's + Preceptoria + Doenças raras + Web Palestras + Sistemas prisionais + OPAS +
+ # de # resultados + +
    +
  1. + + +

    titulo

    + parceiros +
    + + matriculados + + tempo + avaliacao +
    +

    + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem + repudiandae consequuntur quasi nesciunt, incidunt excepturi eos + eius error vitae ipsa provident, quaerat hic dolorem iusto alias + dicta eaque modi! +

    + +
    2. +
+ +
+ +
+
+ + ); +}; + +export default ModulosEducacionais_big; diff --git a/src/components/ModulosEducacionais_small.tsx b/src/components/ModulosEducacionais_small.tsx index 7823098..6c82de8 100644 --- a/src/components/ModulosEducacionais_small.tsx +++ b/src/components/ModulosEducacionais_small.tsx @@ -3,7 +3,7 @@ import { useState } from "react"; import "../style/components/ModulosEducacionais_small.scss"; -import Timer from "../assets/feather//clock.svg"; +import Timer from "../assets/feather/clock.svg"; import User from "../assets/feather/user.svg"; const ModulosEducacionais_small = () => { @@ -24,13 +24,13 @@ const ModulosEducacionais_small = () => { if (isLoading || isFetching) { return ( -

+

Carregando Modulos....

); } else if (error) { return ( -

+

Error: {error.message}

); diff --git a/src/routes/Cursos.tsx b/src/routes/Cursos.tsx index 9ab2f78..cd989d3 100644 --- a/src/routes/Cursos.tsx +++ b/src/routes/Cursos.tsx @@ -1,12 +1,14 @@ import MainHeader from "../components/MainHeader"; +import ModulosEducacionais_big from "../components/ModulosEducacionais_big"; + import Footer from "../components/Footer"; const Cursos = () => { return (
-

Cursos

+
); diff --git a/src/style/components/ModulosEducacionais_big.scss b/src/style/components/ModulosEducacionais_big.scss new file mode 100644 index 0000000..3994d1b --- /dev/null +++ b/src/style/components/ModulosEducacionais_big.scss @@ -0,0 +1,75 @@ +@import "../variables"; + +.modulosBig { + width: 85%; + h3 { + font-size: 2.2rem; + color: $red-ligh; + margin-bottom: 2rem; + } + .modulosBig-categorias { + text-align: center; + flex-direction: row; + display: flex; + margin: 1rem 0rem; + span { + text-wrap: nowrap; + font-size: 1.1rem; + } + } + .modulosBig-resultados { + display: inline-block; + margin-left: 0.4rem; + margin-bottom: 1rem; + text-align: left; + } + .modulosBig-container { + grid-template-columns: repeat(3, 1fr); + list-style: none; + display: grid; + padding: 0rem 0.4rem; + .modulosBig-items { + a { + text-decoration: none; + .modulosBig-items-img { + border-radius: 1rem; + } + .modulosBig-items-titulo { + text-align: justify; + margin: 0.2rem 0rem; + color: $ui-darkest; + font-size: 1.8rem; + } + .modulosBig-items-parceiros { + display: inline-block; + margin: 0.2rem 0rem; + text-align: left; + color: $red-ligh; + font-size: 1rem; + } + .modulosBig-items-estatisticas { + margin: 0.2rem 0rem; + display: inline-block; + text-align: justify; + color: $ui-darkest; + .modulosBig-items-matriculados { + } + .modulosBig-items-duracao { + } + .modulosBig-items-avaliacao { + } + } + .modulosBig-items-objetivogeral { + text-overflow: ellipsis; + color: $ui-darkest; + text-align: left; + max-height: 5rem; + overflow: hidden; + } + } + } + } + .modulosBig-paginacao { + width: 7rem; + } +} From e5e6c3d1e15f6d7f3fd7a1ff7ab330a0ad67bf89 Mon Sep 17 00:00:00 2001 From: Eduardo-Pyment Date: Mon, 8 Jan 2024 21:00:19 -0300 Subject: [PATCH 3/4] ModulosEducacionais_big base style implemented --- src/style/components/ModulosEducacionais_big.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/style/components/ModulosEducacionais_big.scss b/src/style/components/ModulosEducacionais_big.scss index 3994d1b..7fe1bc6 100644 --- a/src/style/components/ModulosEducacionais_big.scss +++ b/src/style/components/ModulosEducacionais_big.scss @@ -53,10 +53,13 @@ text-align: justify; color: $ui-darkest; .modulosBig-items-matriculados { + width: auto; } .modulosBig-items-duracao { + width: auto; } .modulosBig-items-avaliacao { + width: auto; } } .modulosBig-items-objetivogeral { From 1c590983689385bf57cb121312c79aa6d6bd61d9 Mon Sep 17 00:00:00 2001 From: Eduardo-Pyment Date: Mon, 8 Jan 2024 22:51:38 -0300 Subject: [PATCH 4/4] Star icon impoted & more scss adjusts to ModulosEducacionais_big --- src/assets/feather/star.svg | 1 + src/components/ModulosEducacionais_big.tsx | 60 +++++----- .../components/ModulosEducacionais_big.scss | 108 +++++++++++------- 3 files changed, 98 insertions(+), 71 deletions(-) create mode 100644 src/assets/feather/star.svg diff --git a/src/assets/feather/star.svg b/src/assets/feather/star.svg new file mode 100644 index 0000000..bcdc31a --- /dev/null +++ b/src/assets/feather/star.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/ModulosEducacionais_big.tsx b/src/components/ModulosEducacionais_big.tsx index a82d263..aa37e82 100644 --- a/src/components/ModulosEducacionais_big.tsx +++ b/src/components/ModulosEducacionais_big.tsx @@ -4,12 +4,17 @@ import { Link } from "react-router-dom"; import "../style/components/ModulosEducacionais_big.scss"; +import Timer from "../assets/feather/clock.svg"; +import User from "../assets/feather/user.svg"; +import Star from "../assets/feather/star.svg"; + + const ModulosEducacionais_big = () => { const [modulosBigPage, setModulosBigPage] = useState(""); - const fetchModulosB = async (sort = "") => { + const fetchModulosB = async (sort = "", page = "") => { const response = await fetch( - `http://0.0.0.0:3004/cursos?_sort=${sort}&_order=desc&_page=1&_limit=3` + `http://0.0.0.0:3004/cursos?_sort=${sort}&_page=${page}&_limit=9` ); const data = await response.json(); return data; @@ -50,36 +55,31 @@ const ModulosEducacionais_big = () => { # de # resultados
    -
  1. - - -

    titulo

    - parceiros -
    - - matriculados + {data?.map((data: any) => { + return ( +
  2. + +

    {data?.titulo}

    + + {data?.parceiros} - tempo - avaliacao - -

    - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem - repudiandae consequuntur quasi nesciunt, incidunt excepturi eos - eius error vitae ipsa provident, quaerat hic dolorem iusto alias - dicta eaque modi! -

    - -
    3. +
    + + Imagem matriculados{data?.matriculados} + + + Imagem duração{data?.duracao} + + + Imagem avaliação{data?.avaliacao} + +
    +

    {data?.resumo}

    + + + ); + })}
-
diff --git a/src/style/components/ModulosEducacionais_big.scss b/src/style/components/ModulosEducacionais_big.scss index 7fe1bc6..e87946f 100644 --- a/src/style/components/ModulosEducacionais_big.scss +++ b/src/style/components/ModulosEducacionais_big.scss @@ -1,17 +1,18 @@ @import "../variables"; +// * {border: 1px solid black;} .modulosBig { - width: 85%; + width: 80%; h3 { + margin-bottom: 2rem; font-size: 2.2rem; color: $red-ligh; - margin-bottom: 2rem; } .modulosBig-categorias { - text-align: center; flex-direction: row; - display: flex; + text-align: center; margin: 1rem 0rem; + display: flex; span { text-wrap: nowrap; font-size: 1.1rem; @@ -25,51 +26,76 @@ } .modulosBig-container { grid-template-columns: repeat(3, 1fr); + padding: 0rem 0.4rem; list-style: none; display: grid; - padding: 0rem 0.4rem; + gap: 1.5rem; .modulosBig-items { - a { - text-decoration: none; - .modulosBig-items-img { - border-radius: 1rem; - } - .modulosBig-items-titulo { - text-align: justify; - margin: 0.2rem 0rem; - color: $ui-darkest; - font-size: 1.8rem; - } - .modulosBig-items-parceiros { - display: inline-block; - margin: 0.2rem 0rem; - text-align: left; - color: $red-ligh; - font-size: 1rem; - } - .modulosBig-items-estatisticas { - margin: 0.2rem 0rem; - display: inline-block; - text-align: justify; - color: $ui-darkest; - .modulosBig-items-matriculados { - width: auto; - } - .modulosBig-items-duracao { - width: auto; + position: relative; + text-decoration: none; + .modulosBig-items-img { + border-radius: 1rem; + } + .modulosBig-items-titulo { + text-align: left; + margin: 0.2rem 0rem; + color: $ui-darkest; + font-size: 1.3rem; + } + .modulosBig-items-parceiros { + display: inline-block; + margin: 0.2rem 0rem; + text-align: left; + color: $red-ligh; + font-size: 1rem; + } + .modulosBig-items-estatisticas { + display: inline-block; + margin: 0.2rem 0rem; + text-align: justify; + color: $ui-darkest; + text-wrap: nowrap; + .modulosBig-items-matriculados { + img{ + margin-right: 0.2rem; + width: 1rem; } - .modulosBig-items-avaliacao { - width: auto; + } + .modulosBig-items-duracao { + img{ + margin-right: 0.2rem; + margin-left: 0.4rem; + width: 1rem; } } - .modulosBig-items-objetivogeral { - text-overflow: ellipsis; - color: $ui-darkest; - text-align: left; - max-height: 5rem; - overflow: hidden; + .modulosBig-items-avaliacao { + img{ + margin-left: 0.4rem; + margin-right: 0.2rem; + width: 1rem; + } } } + .modulosBig-items-objetivogeral { + box-shadow: inset 0px -40px 15px 0px rgba(255,255,255,1); + background-color: transparent; + text-overflow: ellipsis; + color: $ui-darkest; + max-height: 4.5rem; + text-align: left; + overflow: hidden; + } + } + .modulosBig-verModulo { + background-color: $ui-lighter; + border-radius: 3rem; + color: $ui-light; + padding: 0rem 0.2rem; + position: absolute; + font-size: 1rem; + width: 7rem; + bottom: 0; + right: 0; } } .modulosBig-paginacao {