diff --git a/public/mecred_square.svg b/public/mecred_square.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e54ad7529df325c23d3a1b123f7036d02dafad82
--- /dev/null
+++ b/public/mecred_square.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.2875 93.6255">
+ <path d="M68.2125,25.1687h-17.2125v11.05h20.4v7.8625h-30.6V.0937h30.6v7.8625h-20.4v9.5625h17.2125v7.65Z" fill="#00a3bb"/>
+ <path d="M110.075,28.675h0c-.2125,5.3125-1.7,9.35-4.4625,11.9-2.7625,2.7625-6.8,4.0375-11.9,4.0375-5.3125,0-9.5625-1.7-12.75-5.1-3.1875-3.4-4.8875-7.65-4.8875-12.9625v-8.925c0-5.3125,1.4875-9.5625,4.675-12.9625,3.1875-3.4,7.225-5.1,12.325-5.1,5.3125,0,9.5625,1.4875,12.325,4.25,2.7625,2.7625,4.4625,6.8,4.8875,11.9v.2125h-9.5625c-.2125-2.7625-.85-4.8875-1.9125-6.375-1.0625-1.4875-2.975-2.125-5.525-2.125-2.3375,0-4.0375.85-5.3125,2.7625-1.275,1.9125-1.9125,4.25-1.9125,7.225v9.35c0,2.975.6375,5.525,2.125,7.4375,1.4875,1.9125,3.4,2.7625,5.7375,2.7625s4.0375-.6375,5.1-1.9125c1.0625-1.275,1.4875-3.4,1.7-6.1625h9.35v-.2125Z" fill="#00a3bb"/>
+ <path d="M10.2,76.5318v16.7875H0v-43.9875h17c5.1,0,9.1375,1.275,12.1125,3.6125,2.975,2.3375,4.4625,5.525,4.4625,9.775,0,2.3375-.6375,4.25-1.7,5.95-1.275,1.7-2.975,2.975-5.3125,4.0375,2.7625.85,4.675,2.125,5.7375,3.825,1.275,1.7,1.7,4.0375,1.7,6.5875v2.7625c0,1.0625.2125,2.55.425,3.825.425,1.4875.85,2.55,1.7,3.1875v.6375h-10.625c-.85-.6375-1.275-1.7-1.4875-3.4-.2125-1.4875-.425-2.975-.425-4.4625v-2.7625c0-2.125-.6375-3.6125-1.7-4.8875-1.0625-1.0625-2.7625-1.7-4.8875-1.7h-6.8v.2125ZM10.2,68.6693h6.8c2.125,0,3.6125-.425,4.675-1.4875,1.0625-.85,1.7-2.3375,1.7-4.0375s-.6375-3.1875-1.7-4.25-2.7625-1.7-4.675-1.7h-6.8v11.475Z" fill="#ed6f24"/>
+ <path d="M68.425,74.513h-17.2125v11.05h20.4v7.8625h-30.6v-43.9875h30.6v7.8625h-20.4v9.5625h17.2125v7.65Z" fill="#e62954"/>
+ <path d="M76.075,93.4255v-43.9875h15.9375c5.1,0,9.5625,1.7,12.9625,5.1,3.4,3.4,5.3125,7.65,5.3125,12.9625v7.8625c0,5.3125-1.7,9.5625-5.3125,12.9625-3.4,3.4-7.8625,5.1-12.9625,5.1h-15.9375ZM86.4875,57.3005v28.2625h4.8875c2.7625,0,4.8875-.85,6.375-2.7625,1.4875-1.9125,2.3375-4.25,2.3375-7.4375v-8.075c0-2.975-.85-5.525-2.3375-7.4375-1.4875-1.9125-3.6125-2.7625-6.375-2.7625h-4.8875v.2125Z" fill="#56358c"/>
+ <polygon points="25.925 .0937 18.0625 12.4187 10.2 .0937 0 .0937 0 44.0812 10.2 44.0812 10.2 17.7312 15.3 25.1687 20.825 25.1687 25.925 17.7312 25.925 44.0812 36.125 44.0812 36.125 .0937 25.925 .0937" fill="#00a3bb"/>
+</svg>
\ No newline at end of file
diff --git a/src/app/acessibilidade/page.js b/src/app/acessibilidade/page.js
index 7981aed8fa83ce5eb942b579e22d0380d0367743..ad4a62ac4dd8a2f4e2dcd5a77a93606f1841c8c6 100644
--- a/src/app/acessibilidade/page.js
+++ b/src/app/acessibilidade/page.js
@@ -2,7 +2,7 @@ import Overlay from "../components/Overlay";
export default function Help() {
return (
- <Overlay>
+ <Overlay type="twoColumns">
<div className="flex w-full justify-center">
<div className="max-w-screen-md bg-white rounded p-12">
<div className="text-2xl mb-8 text-text-filter font-bold">Acessibilidade</div>
diff --git a/src/app/ajuda/page.js b/src/app/ajuda/page.js
index 74d793482862adbca27bc52876e77de618e6eaf9..a2c597eb3193b460a1ec7d024b3d213863cf0111 100644
--- a/src/app/ajuda/page.js
+++ b/src/app/ajuda/page.js
@@ -1,5 +1,5 @@
"use client"
-import { useRouter} from "next/navigation";
+import { useRouter } from "next/navigation";
import { Card } from "@mui/material";
import Overlay from "../components/Overlay";
import { ImArrowUp } from "react-icons/im";
@@ -19,7 +19,7 @@ export default function Help() {
"Como publicar um recurso?",
"Quais tipos de recursos e formatos de arquivo a plataforma aceita?"
],
- sectionPos : 0
+ sectionPos: 0
},
{
image: <BiSearchAlt className="text-button-filters" size="50%" />,
@@ -29,7 +29,7 @@ export default function Help() {
"Como filtrar os resultados?",
"Como os recursos são ranqueados?"
],
- sectionPos : 1
+ sectionPos: 1
},
{
image: <BiSolidMessageAlt className="text-button-filters" size="50%" />,
@@ -38,7 +38,7 @@ export default function Help() {
"Como comentar ou avaliar um recurso?",
"Que tipo de comentário posso fazer sobre o recurso?"
],
- sectionPos : 2
+ sectionPos: 2
},
{
image: <HiPencilAlt className="text-button-filters" size="50%" />,
@@ -50,54 +50,66 @@ export default function Help() {
"Como acessar a conta?",
"Esqueci minha senha. O que fazer?"
],
- sectionPos : 3
+ sectionPos: 3
}
]
-
- return (
- <Overlay>
- <div className="flex justify-center">
- <div className="text-main-text mt-5 text-2xl font-bold">Ajuda e Suporte</div>
- </div>
- <div className="flex justify-center mt-4">
- <p className="text-main-text text-lg max-sm:text-center">Entre em contato para enviar dúvidas, sugestões ou críticas.</p>
- </div>
- <div className="flex justify-center gap-10 mt-8 max-sm:flex-col items-center">
- {info.map((item, index) => (
- <Card
- key={index}
- className="text-text-filter bg-white outline outline-1 outline-outlineColor"
- sx={{
- display: "flex",
- flexDirection: "column",
- justifyContent: "flex-start",
- width: 255,
- height: 460,
- backgroundColor: "#FFFFFF",
- boxShadow: "none",
- padding: "30px",
- }}
- >
- <button onClick={() => router.push("/topicosAjuda")} key={index}>
- <div className="flex justify-center">
- <div className="rounded-full bg-text-filter w-20 h-20 flex justify-center items-center">{item.image}</div>
- </div>
- <div className="text-text-filter mt-5 text-2xl font-bold flex text-center">{item.title}</div>
- </button>
- {item.questions.map((question, index) => (
- <button key={index} onClick={() => router.push(`/topicosAjuda?section=${item.sectionPos}&pos=${index}`)} className="flex text-start text-sm mt-4 ml-3">
- {question}
- </button>
+ return (
+ <Overlay type="twoColumns">
+ <div className="md:pt-[10px] 2xl:ml-[-150px]">
+ <div className="flex justify-center">
+ <div className="text-main-text text-2xl font-bold">Ajuda e Suporte</div>
+ </div>
+ <div className="flex justify-center mt-4">
+ <p className="text-main-text text-lg max-sm:text-center">Entre em contato para enviar dúvidas, sugestões ou críticas.</p>
+ </div>
+ <div className="flex mt-8">
+ <div className="ml-10 max-xl:overflow-x-auto flex gap-10 max-sm:gap-4">
+ {info?.map((item, index) => (
+ <Card
+ key={index}
+ className="text-text-filter bg-white outline outline-1 outline-outlineColor w-[255px] h-[460px] min-w-[255px] max-sm:h-[410px] p-6 flex-shrink-0"
+ sx={{
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "flex-start",
+ backgroundColor: "#FFFFFF",
+ boxShadow: "none",
+ }}
+ >
+ <div>
+ <div className="flex justify-center">
+ <div className="rounded-full bg-text-filter w-20 h-20 flex justify-center items-center">
+ {item.image}
+ </div>
+ </div>
+ <div className="text-text-filter mt-5 text-2xl font-bold flex text-center">
+ {item.title}
+ </div>
+ </div>
+ {item?.questions?.map((question, idx) => (
+ <button
+ key={idx}
+ onClick={() =>
+ router.push(`/topicosAjuda?section=${item.sectionPos}&pos=${idx}`)
+ }
+ className="flex text-start text-sm mt-4 ml-3"
+ >
+ {question}
+ </button>
+ ))}
+ </Card>
))}
- </Card>
- ))}
- </div>
- <div className="flex justify-center flex-col items-center mt-8 max-sm:mb-8">
- <div className="text-main-text mt-5 text-2xl font-bold">Não encontrou o que precisa?</div>
- <div className="text-main-text text-lg mt-4 ml-3">Entre em contato com nossa equipe</div>
- <button onClick={() => router.push("/contato")} className="mt-4 bg-secondary text-lg text-white p-2 px-4 rounded-lg hover:bg-secondary-hover">Página de contato</button>
+ </div>
+ </div>
+ <div className="flex flex-col items-center rounded-xl px-10 max-sm:px-0 py-7 max-sm:py-6 mx-20 max-sm:mx-4 max-sm:pb-28">
+ <div className="text-main-text mt-5 max-sm:mt-0 text-xl font-bold text-center">Não encontrou o que precisa?</div>
+ <div className="text-main-text text-md mt-4 ml-3 text-center">Entre em contato com nossa equipe</div>
+ <button onClick={() => router.push("/contato")} className="mt-4 bg-secondary text-lg text-white p-2 px-4 rounded-lg hover:bg-secondary-hover">Página de contato</button>
+ </div>
+
</div>
+
</Overlay>
)
}
\ No newline at end of file
diff --git a/src/app/colecao/[id]/components/collectionItems.js b/src/app/colecao/[id]/components/collectionItems.js
index 249d599d6170ca2cc76b0462a2d0b8fcd9a5de8b..4ab3b06aa28efe212b11f2b67e8a274596153052 100644
--- a/src/app/colecao/[id]/components/collectionItems.js
+++ b/src/app/colecao/[id]/components/collectionItems.js
@@ -6,8 +6,8 @@ export default function CollectionItems({ collection }) {
return (
<div className="flex flex-col bg-white p-4 rounded-lg">
- <div className="text-main-text font-bold text-xl ml-2">Recursos na coleção</div>
- <div>
+ <div className="text-main-text font-bold text-xl mb-3">Recursos na coleção</div>
+ <div className="flex flex-col gap-3">
{collection.collection_items.map((item, index) => {
return (
<Cards
@@ -32,4 +32,4 @@ export default function CollectionItems({ collection }) {
</div>
</div>
);
-}
\ No newline at end of file
+}
diff --git a/src/app/colecao/[id]/components/publisherInfoCollection.js b/src/app/colecao/[id]/components/publisherInfoCollection.js
index 577f9f7112fd503d666d261a8022311e008c151a..c7ebc7f16e84d43a24d8d530d6feeadb27d109b2 100644
--- a/src/app/colecao/[id]/components/publisherInfoCollection.js
+++ b/src/app/colecao/[id]/components/publisherInfoCollection.js
@@ -60,7 +60,7 @@ export default function PublisherInfoCollection({ publisher, disabledButton = fa
return (
<>
- <div className="bg-white outline outline-1 outline-outlineColor shadow-none flex flex-col flex-shrink-0 rounded-xl p-0 my-1 normal-case text-sm font-bold">
+ <div className="bg-white outline outline-1 outline-outlineColor shadow-none flex flex-col flex-shrink rounded-xl p-0 my-1 normal-case text-sm font-bold">
<Button href={`/perfil/${publisher.id}`} >
<div className="flex flex-row truncate">
{publisher?.avatar ? (
diff --git a/src/app/colecao/[id]/page.js b/src/app/colecao/[id]/page.js
index ccc5ef5f5798234029583392f875447e529c9a78..97a5a709b5a0ef8a7a4a529b4432cea6d2cf8d2c 100644
--- a/src/app/colecao/[id]/page.js
+++ b/src/app/colecao/[id]/page.js
@@ -59,8 +59,8 @@ export default function Colecao({ params }) {
) : (
<>
<NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
- <div className="flex flex-col lg:flex-row">
- <div className="flex flex-col bg-main p-3 lg:w-[30rem] flex-shrink-0">
+ <div className="flex mb-5 overflow-y-auto flex-col lg:flex-row">
+ <div className="flex flex-col bg-main p-3 w-full flex-shrink-0">
<div className=" flex justify-center">
{/* Pré-visualização */}
<CollectionPreview collection={collection} />
@@ -77,28 +77,16 @@ export default function Colecao({ params }) {
</div>
</div>
</div>
- <div className="">
- {/* Modal de entrar */}
- {/* <ActionButtons learningObject={collection} setNeedLoginOpen={setNeedLoginOpen} state={state} /> */}
- </div>
<div className="">
{/* Publicador */}
<PublisherInfoCollection publisher={collection?.owner} />
</div>
- <div className="">
- {/* Informações */}
- {/* <ResourceInfo learningObject={collection} /> */}
- </div>
- <div className="">
- {/* comments */}
- {/* <Comments learningObjectId={params.id}/> */}
- </div>
</div>
- <div className="flex-grow-0 p-3 bg-main">
+ </div>
+ <div className="px-[25px] bg-main overflow-y-auto">
<div className=""> {/* recommendations */} </div>
<CollectionItems collection={collection} />
</div>
- </div>
</>
)}
</Overlay>
diff --git a/src/app/components/.Header.js.swp b/src/app/components/.Header.js.swp
new file mode 100644
index 0000000000000000000000000000000000000000..1737a3a93491d29e2b03629070dd1475e5db0e5c
Binary files /dev/null and b/src/app/components/.Header.js.swp differ
diff --git a/src/app/components/About.js b/src/app/components/About.js
index d70eae855467d35b256d4a39e20b56e638b954f0..bdf32b9d6a7631910c2d0f5ceecf84e35712d478 100644
--- a/src/app/components/About.js
+++ b/src/app/components/About.js
@@ -263,8 +263,9 @@ export default function AboutComponent() {
};
return (
- <div className="grid grid-cols-3 ">
- <div className="flex max-lg:col-span-3 col-span-2">
+ <>
+ <div className="overflow-y-auto">
+ <div className="flex max-lg:col-span-3 col-span-2">
<div className="flex flex-col px-3 w-full">
<Carousel />
<div className="flex flex-col text-center items-center rounded-lg bg-white">
@@ -303,24 +304,24 @@ export default function AboutComponent() {
</Link>
</div>
</div>
- <div className="max-lg:hidden col-span-1 my-3 ">
- <div className="fixed flex flex-col items-center gap-6 bg-white text-text-filter rounded-xl px-10 py-7 mx-20 ">
- <p className="font-bold text-3xl w-full text-center">Tudo certo?</p>
- <p className="text-base text-text-filter tracking-tight text-justify">
- Ao terminar de ler sobre a Plataforma MEC RED você pode clicar no
- botão abaixo para continuar navegando e explorar as ferramentas
- disponíveis.
- </p>
-
- <Button
- href="/busca?page=LearningObject"
- className="bg-secondary mt-2 text-xl text-white py-4 w-full text-center rounded-lg hover:secondary-hover font-bold normal-case"
- >
- Continuar
- </Button>
- </div>
- </div>
</div>
+ <div className="max-xl:hidden col-span-1 my-3 ">
+ <div className="flex flex-col items-center gap-6 bg-white text-text-filter rounded-xl px-10 py-7 mx-20 ">
+ <p className="font-bold text-3xl w-full text-center">Tudo certo?</p>
+ <p className="text-base text-text-filter tracking-tight text-justify">
+ Ao terminar de ler sobre a Plataforma MEC RED você pode clicar no
+ botão abaixo para continuar navegando e explorar as ferramentas
+ disponíveis.
+ </p>
+
+ <Button
+ href="/busca?page=LearningObject"
+ className="bg-secondary mt-2 text-xl text-white py-4 w-full text-center rounded-lg hover:secondary-hover font-bold normal-case"
+ >
+ Continuar
+ </Button>
+ </div>
+ </div>
+ </>
);
}
-
diff --git a/src/app/components/AcessibilityBar.js b/src/app/components/AcessibilityBar.js
index 29186d67ff8fd88e161bcac185e71cc94e1dd5e5..74eb7dfc0c1bc1969cbc0f15873724f4ec7c54ef 100644
--- a/src/app/components/AcessibilityBar.js
+++ b/src/app/components/AcessibilityBar.js
@@ -92,7 +92,6 @@ export default function AcessibilityBar() {
localStorage.setItem('currentTheme', newTheme);
};
-
useLayoutEffect(() => {
document.getElementById('MECRED').tabIndex = "-1";
@@ -142,6 +141,7 @@ export default function AcessibilityBar() {
break;
case 2:
elementId = 'MEC';
+ break;
case 3:
elementId = 'buscar';
break;
@@ -265,4 +265,4 @@ export default function AcessibilityBar() {
</>
);
-}
\ No newline at end of file
+}
diff --git a/src/app/components/Cards.js b/src/app/components/Cards.js
index 36183d528fb2713473a63ec761e75f171e69294c..ff7551509d6588cf843f04bdff900a3cc486c0cc 100644
--- a/src/app/components/Cards.js
+++ b/src/app/components/Cards.js
@@ -110,16 +110,15 @@ export default function Cards(props) {
return (
<Card
- className={`active:bg-main active:rounded-3xl transition ease-in-out ${props.page !== "recurso" && "items-center"}`}
+ className={`active:bg-main active:rounded-3xl transition ease-in-out ${props.page !== "recurso" && "items-center"}`}
tabIndex="-1"
sx={{
display: "flex",
flexDirection: props?.horizontal ? "row" : "column",
- width: props?.width ?? 339,
+ width: props?.width ?? 330,
height: props?.height ?? "auto",
backgroundColor: "transparent",
boxShadow: "none",
- padding: "10px",
}}
component={Link}
href={`/recurso/${props["id"]}` + (props.collectionSource ? `?collectionId=${props.collectionSource}` : "")}
@@ -128,7 +127,7 @@ export default function Cards(props) {
<CardMedia
id="conteudo"
tabIndex="0"
- className="hover:border-secondary hover:border-4 focus:border-secondary focus:border-4 border-gray-color transition-transform rounded-xl flex-shrink-0 aspect-video"
+ className="hover:scale-[1.02] p-1 focus:border-secondary focus:border-4 border-gray-color transition-transform rounded-xl flex-shrink-0 aspect-video"
sx={{
width: props?.thumbWidth ?? 327,
height: props?.thumbHeight ?? 181,
@@ -164,7 +163,7 @@ export default function Cards(props) {
</>
:
<>
- <div className="flex flex-row mt-4 mb-2 w-full justify-start ">
+ <div className="flex flex-row mt-4 mb-4 w-full justify-start ">
{props?.noAvatar || !props["avatar"] ? <div className={`flex items-center shrink-0 justify-center text-xl font-bold ml-1 text-main rounded-full h-[33px] w-[33px] ${getRandomBg(props["id"])}`} >{props["author"][0]}</div>
:
<img
diff --git a/src/app/components/Content.js b/src/app/components/Content.js
index 15c941ee23940560c1b4841a2fb8585072417015..26dd7d012c6d43b3353bee4f67d6fa71a4dc4724 100644
--- a/src/app/components/Content.js
+++ b/src/app/components/Content.js
@@ -90,35 +90,35 @@ export default function Content({ name, inputFilter, searchPage }) {
{/* GroupButtonsFilters: Botões para seleção do tipo de filtro usado (selectFilter) */ }
//caso MEC não apresenta o GroupButtonsFilters pois não há conteudo suficiente para ser filtrado
return (
- <Overlay filterState={filterState} setFilterState={setFilterState} setNewSize={setNewSize} newSize={newSize}>
+ <Overlay filterState={filterState} setFilterState={setFilterState} setNewSize={setNewSize} newSize={newSize} type="twoColumns">
<>
{(filterState.searchClass !== "MEC" && filterState.searchClass != "User") ?
(
- <>
- <div className=" pl-10 max-sm:pl-1 fixed top-[100px] w-full
+ <div>
+ <div className=" pl-3 max-sm:pl-1 fixed w-full
bg-fundo
bg-repeat
bg-fixed"
- >
- <h1 className="text-2xl ml-5 font-bold text-text-color mb-3 mt-4">
- {tradutor(filterState.searchClass)} {(filterState.order === "title") ? "por Ordem alfabética" : " mais " + titlePage}
- </h1>
- <div className={`flex w-full justify-between pr-0 `}>
- <GroupButtonsFilters pageName={searchPage} activeFilters={activeFilters} setActiveFilters={setActiveFilters} filterState={filterState} setFilterState={setFilterState} setItems={setItemsBySearchClass[filterState.searchClass]} />
- </div>
+ >
+ <h1 className="text-2xl ml-5 font-bold text-text-color mb-3 mt-4">
+ {tradutor(filterState.searchClass)} {(filterState.order === "title") ? "por Ordem alfabética" : " mais " + titlePage}
+ </h1>
+ <div className={`flex w-full justify-between pr-0 `}>
+ <GroupButtonsFilters pageName={searchPage} activeFilters={activeFilters} setActiveFilters={setActiveFilters} filterState={filterState} setFilterState={setFilterState} setItems={setItemsBySearchClass[filterState.searchClass]} />
</div>
- {/*caso tenha mais de 15 filtros ativos, o InfiniteScroll é renderizado com um padding-top maior, esse valor foi definido empiricamente*/}
- <div className={`ml-4 max-sm:pt-36 max-sm:ml-0 ${(filterState.educationalStages.length + filterState.languages.length + filterState.objectTypes.length + filterState.subjects.length) >= 15 ? "sm:pt-52": "pt-36"}`}>
- <InfiniteScroll filterState={filterState} setNewSize={setNewSize} setItems={setItemsBySearchClass[filterState.searchClass]} items={itemsBySearchClass[filterState.searchClass]} abortController={abortControllerBySearchClass[filterState.searchClass]} />
- </div>
- </>
- )
- :
- <>
+ </div>
+ {/*caso tenha mais de 15 filtros ativos, o InfiniteScroll é renderizado com um padding-top maior, esse valor foi definido empiricamente*/}
+ <div className="pt-36">
<InfiniteScroll filterState={filterState} setNewSize={setNewSize} setItems={setItemsBySearchClass[filterState.searchClass]} items={itemsBySearchClass[filterState.searchClass]} abortController={abortControllerBySearchClass[filterState.searchClass]} />
- </>
+ </div>
+ </div>
+ )
+ :
+ <>
+ <InfiniteScroll filterState={filterState} setNewSize={setNewSize} setItems={setItemsBySearchClass[filterState.searchClass]} items={itemsBySearchClass[filterState.searchClass]} abortController={abortControllerBySearchClass[filterState.searchClass]} />
+ </>
}
- </>
+ </>
</Overlay>
- )
+ )
}
\ No newline at end of file
diff --git a/src/app/components/GroupCardsCollections.js b/src/app/components/GroupCardsCollections.js
index 245c4e19aafefb0bf4198a8075e663e117aec017..b1de72ad60b1b9ad421c7bb3f19f8f1448f18aa2 100644
--- a/src/app/components/GroupCardsCollections.js
+++ b/src/app/components/GroupCardsCollections.js
@@ -28,7 +28,7 @@ export default function GroupCardsCollections({ data, cardsPerRow, collectionId
<div className="flex flex-col">
<div className="mx-1 flex flex-col">
- <div id="contentSize" className={`flex content flex-wrap max-sm:justify-center mb-4 max-sm:ml-0 md:ml-0 ${expanded ? "" : "overflow-y-hidden h-[290px]"}`}>
+ <div id="contentSize" className={`flex content flex-wrap max-sm:justify-center mb-4 max-sm:ml-0 md:ml-0 ${expanded ? "" : "overflow-y-hidden h-[270px]"}`}>
{data?.length !== 0 ? data?.map((item, index) => {
return (
diff --git a/src/app/components/Header.js b/src/app/components/Header.js
index dc1fce74ed9ad53d39a13755abe9c52df0dfdaeb..bb69c6b916da4afe7e84d2881ff0b0b0d5c9be61 100644
--- a/src/app/components/Header.js
+++ b/src/app/components/Header.js
@@ -15,14 +15,35 @@ import { useRouter } from "next/navigation";
import { ImArrowLeft } from "react-icons/im";
import Notifications from "./Notifications";
+function hexToRgb(hex) {
+ // Remove the hash if it exists
+ hex = hex.replace(/^#/, '');
+ // Parse the RGB values
+ let bigint = parseInt(hex, 16);
+ let r = (bigint >> 16) & 255;
+ let g = (bigint >> 8) & 255;
+ let b = bigint & 255;
+
+ return [r, g, b];
+}
+
+function rgbDistance(color1, color2) {
+ let r1 = color1[0], g1 = color1[1], b1 = color1[2];
+ let r2 = color2[0], g2 = color2[1], b2 = color2[2];
+
+ return Math.sqrt(
+ Math.pow(r2 - r1, 2) +
+ Math.pow(g2 - g1, 2) +
+ Math.pow(b2 - b1, 2)
+ );
+}
function DefaultContent({
- mobileSearch,
handleToggleMobileSearch,
setNeedLoginOpen,
setFilterState,
- filterState,
+ filterState
}) {
const pathname = usePathname();
const router = useRouter();
@@ -45,61 +66,66 @@ function DefaultContent({
return (
<>
- <div className="flex align-middle items-center flex-shrink-0 max-sm:pl-0 pl-5">
-
- <Link href="/" className="flex items-center shrink-0">
- <div
- className="w-32 h-32 bg-no-repeat ml-6 bg-center bg-contain bg-logo mr-16 max-sm:mr-3"
- aria-label="logo"
- ></div>
- </Link>
- </div>
- <div className="grow hidden lg:flex items-center ">
- <SearchComponent setFilterState={setFilterState} filterState={filterState} />
- </div>
- <div className="flex justify-end shrink-0 items-center pr-2">
- <button
- id = "openSearchButton"
- type="button"
- alt="Abrir busca"
- title="Abrir busca"
- className="lg:hidden bg-secondary hover:bg-text-color w-10 h-10 rounded text-white shrink-0 transition"
- onClick={() => (handleToggleMobileSearch(mobileSearch))}
- >
- <SearchIcon className="h-full text-3xl" />
- </button>
-
- <button
- type="button"
- className="group bg-grey-button max-sm:hidden hover:bg-text-color max-sm:w-10 h-10 max-sm:px-0 px-4 mx-5 rounded text-text-color hover:text-white flex items-center font-bold flex-shrink-0 outline outline-1 outline-outlineColor"
- onClick={handleOpenSubmit}
- >
- <ImArrowLeft
- className="rotate-90 group-hover:-rotate-180 transition max-sm:mr-0 mr-3 mb-0.5 text-xl"
- />
- <div>Publicar recurso</div>
- </button>
-
- {loggedIn ? (
- <>
- <Notifications />
- <AccountMenu />
- </>
- ) : (
- <button
- type="button"
- className="group bg-orange hover:bg-text-color px-4 h-10 mr-14 max-sm:ml-2 rounded text-white flex items-center font-bold flex-shrink-0"
- onClick={loginBarrier}
- >
- Entrar
- </button>
- )}
+ <div className="grid lg:grid-cols-[150px_auto_600px] grid-cols-[150px_auto] w-full">
+ <div className="flex justify-center items-center px-[50px]">
+ <Link href="/" className="flex justify-center items-center">
+ <div
+ className="w-[59px] h-[50px] bg-no-repeat bg-center bg-contain bg-logo-square"
+ aria-label="logo"
+ ></div>
+ </Link>
+ </div>
+ <div className="grow hidden lg:flex items-center ">
+ <SearchComponent setFilterState={setFilterState} filterState={filterState} />
+ </div>
+ <div className="flex justify-start shrink-0 grow-0 items-center px-[25px]">
+ <div className="flex items-center gap-6">
+ <button
+ type="button"
+ alt="Abrir busca"
+ title="Abrir busca"
+ className="lg:hidden bg-secondary hover:bg-text-color w-10 h-10 rounded text-white shrink-0 transition"
+ onClick={handleToggleMobileSearch}
+ >
+ <SearchIcon className="h-full text-3xl" />
+ </button>
+
+ <button
+ type="button"
+ className="group bg-grey-button max-sm:hidden hover:bg-text-color max-sm:w-10 h-[50px] max-sm:px-0 px-4 rounded-lg text-lg text-text-color hover:text-white flex items-center font-bold flex-shrink-0 outline outline-1 outline-outlineColor"
+ onClick={handleOpenSubmit}
+ >
+ <ImArrowLeft
+ className="rotate-90 group-hover:-rotate-180 transition max-sm:mr-0 mr-3 mb-0.5 text-2xl"
+ />
+ <div>Publicar recurso</div>
+ </button>
+ </div>
+
+ <div className="flex grow justify-end items-center">
+ {loggedIn ? (
+ <>
+ <Notifications />
+ <AccountMenu />
+ </>
+ ) : (
+ <button
+ type="button"
+ className="group bg-orange hover:bg-text-color px-4 h-10 mr-14 max-sm:ml-2 rounded text-white flex items-center font-bold flex-shrink-0"
+ onClick={loginBarrier}
+ >
+ Entrar
+ </button>
+ )}
+
+ </div>
+ </div>
</div>
</>
);
}
-function MobileSearch({mobileSearch, setFilterState, filterState, handleToggleMobileSearch }) {
+function MobileSearch({ setFilterState, filterState, handleToggleMobileSearch }) {
return (
<div className="flex w-full items-center">
<SearchComponent setFilterState={setFilterState} filterState={filterState} />
@@ -107,8 +133,8 @@ function MobileSearch({mobileSearch, setFilterState, filterState, handleToggleMo
type="button"
alt="Fechar busca"
title="Fechar busca"
- className={"bg-text-color w-10 h-10 rounded text-white shrink-0 transition-all duration-30000 hover:bg-blue-button"}
- onClick={() => (handleToggleMobileSearch(mobileSearch))}
+ className={"bg-text-color w-10 h-10 mr-2 rounded text-white shrink-0 transition-all duration-30000 hover:bg-blue-button"}
+ onClick={handleToggleMobileSearch}
>
<CloseIcon className="h-full text-3xl " />
</button>
@@ -118,38 +144,34 @@ function MobileSearch({mobileSearch, setFilterState, filterState, handleToggleMo
/**
* @param {Object} props
- * @param {Function} props.setQuery - seta o query
- * @param {Function} props.handleOpenMenu - abre/fecha sidebar
- * @returns header
- */
-export default function Header({ mobileSearch, isMobile, setFilterState, filterState, handleOpenMenu }) {
+ * @param {Function} props.setQuery - seta o query
+ * @returns header
+ */
+export default function Header({ setFilterState, filterState }) {
const [needLoginOpen, setNeedLoginOpen] = useState(false);
const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
- const handleToggleMobileSearch = (mobileSearch) => {
+ const handleToggleMobileSearch = () => {
setTimeout(() => {
setMobileSearchOpen((curr) => !curr);
- mobileSearch.setSearchIsClicked((curr) => !curr);
}, 100);
};
return (
- <div className="fixed max-xl:top-[46px] top-[40px] z-10">
- <div className=" max-sm:h-[54px] max-xl:h-[64px] h-[70px] flex gap-3 sm:gap-12 justify-between
- px-2 shadow-none w-screen
+ <div className="fixed flex items-center max-sm:h-[100px] h-[150px] xl:top-[40px] top-[46px] z-10 shadow-none w-screen
bg-fundo
bg-repeat
- bg-fixed">
+ bg-fixed
+ py-[40px]">
+ <div className="flex flex-grow gap-3 sm:gap-12 justify-between
+ ">
{mobileSearchOpen ? (
- <MobileSearch mobileSearch={mobileSearch} handleToggleMobileSearch={handleToggleMobileSearch} setFilterState={setFilterState} filterState={filterState} />
+ <MobileSearch handleToggleMobileSearch={handleToggleMobileSearch} setFilterState={setFilterState} filterState={filterState} />
) : (
<DefaultContent
- mobileSearch={mobileSearch}
- isMobile={isMobile}
handleToggleMobileSearch={handleToggleMobileSearch}
setNeedLoginOpen={setNeedLoginOpen}
- handleOpenMenu={handleOpenMenu}
setFilterState={setFilterState}
filterState={filterState}
/>
diff --git a/src/app/components/InfiniteScroll.js b/src/app/components/InfiniteScroll.js
index 8ecff0491afd36780a258d2e853946fd3883ae6b..de64bf533744289ff0441f4fa3f8ae24b4b83245 100644
--- a/src/app/components/InfiniteScroll.js
+++ b/src/app/components/InfiniteScroll.js
@@ -75,16 +75,19 @@ export default function InfiniteScroll({ filterState, setNewSize, newSize, setIt
//verifica se o usuário chegou no final da página
const handleScroll = useCallback(() => {
+ console.log(document.documentElement.offsetHeight)
+ // Verifica se o usuário está próximo do final da área rolável
if (
- window.innerHeight * 4 + window.scrollY < document.documentElement.offsetHeight ||
-
+ window.innerHeight * 4 + window.scrollY < document.documentElement.offsetHeight ||
isLoading
) {
return;
}
+
+ // Busca mais dados
fetchData(page);
}, [fetchData, isLoading, page]);
-
+
//caso o filtro seja alterado, seta o site para o topo da tela
useEffect(() => {
fetchData(0).then(() => { window.scrollTo(0, 0) });
diff --git a/src/app/components/InfiniteScrollCards.js b/src/app/components/InfiniteScrollCards.js
index 379797eabcfa579a5e6d3e8dc1da07893cbc8317..cb1e2b87946bd6bf657ebe1c753fc9668f34e738 100644
--- a/src/app/components/InfiniteScrollCards.js
+++ b/src/app/components/InfiniteScrollCards.js
@@ -78,16 +78,16 @@ export default function InfiniteScrollCards({ data, searchClass, setNewSize, new
switch (type) {
case "Collection":
return (
- <div className="flex flex-col justify-center">
+ <div className="flex flex-col justify-center ">
{data?.map((item, index) => (
- <Fragment key={item['id']} >
+ <Fragment key={item['id']} >
<div className="bg-white mb-10 pt-6 pl-4 mx-7 rounded-2xl outline outline-2 outline-outlineColor">
<Link href={"/colecao/" + item['id']} className="text-2xl max-md:text-center font-bold mb-0 text-text-color mr-2 inline-block">{item['name']}</Link>
<div className="flex flex-wrap justify-between mr-8 max-md:flex-col ">
<p className=" ml-1 max-md:text-center text-main-text mb-0">
por <Link href={"/perfil/" + item["owner"]?.["id"]}> {item["owner"]?.["name"]}</Link>{timeFunction(item["updated_at"])}
</p>
- <div className="flex max-md:justify-center">
+ <div className="flex max-md:justify-center pb-4">
<DownloadButton id={item['id']} objects={item['collection_items']} />
</div>
</div>
@@ -119,7 +119,7 @@ export default function InfiniteScrollCards({ data, searchClass, setNewSize, new
case "MEC":
return (
- <div className="flex flex-col">
+ <div className="flex flex-col justify-center">
<p className="text-2xl max-sm:text-center font-bold mb-0 text-text-color ml-4 mt-8 inline-block">Coleções Recomendadas pelo MEC</p>
<Link href="/perfil/35342">
<p className=" ml-5 max-sm:text-center text-main-text mb-4" > por Ministério da Educação</p>
@@ -127,7 +127,7 @@ export default function InfiniteScrollCards({ data, searchClass, setNewSize, new
{mecCollection?.map((item, index) => {
return (
<Fragment key={item['id']}>
- <div className="bg-white mb-10 pt-4 pl-4 mr-8 rounded-2xl">
+ <div className="bg-white mb-10 pt-4 pl-4 mx-4 rounded-2xl">
<div className="flex flex-wrap justify-between mr-8 max-md:justify-center ">
<p className="text-2xl max-sm:text-center font-bold mb-1 text-text-color ml-6 inline-block">{item["name"]}</p>
<DownloadButton id={item['id']} objects={item['collection_items']} />
diff --git a/src/app/components/NavigationBar.js b/src/app/components/NavigationBar.js
index c51f70b284c9e3dfb6aeee4ccfc8373b3c08949b..b7c329ba140d01df9a2cd35bdc10f0328f5e1338 100644
--- a/src/app/components/NavigationBar.js
+++ b/src/app/components/NavigationBar.js
@@ -26,9 +26,6 @@ export default function NavigationBar({ mobileSearch }) {
const page = searchParams.get('page');
const [id, setId] = useState(null);
-
-
-
useEffect(() => {
if (isLoggedIn()) {
let data = JSON.parse(getStoredValue("user_data"));
diff --git a/src/app/components/Notifications.js b/src/app/components/Notifications.js
index dfa6a83adcb554dbfefc9c7524cb88ec78b1d30b..080fb428bf9c1114869a57b9909d2f21daaf7189 100644
--- a/src/app/components/Notifications.js
+++ b/src/app/components/Notifications.js
@@ -65,6 +65,6 @@ export default function Notifications() {
.catch((error) => console.error(error))
}
- return <ModalNotifications countNotifications={countNotifications} notifications={notifications} postViewNotification={postViewNotification} />
+ return <ModalNotifications countNotifications={countNotifications} notifications={notifications} postViewNotification={postViewNotification} />
}
\ No newline at end of file
diff --git a/src/app/components/Overlay.js b/src/app/components/Overlay.js
index d21a4d0cfc72f3ae445af159b70ea8408bd5c450..63078764c129f0be8cae23c20f7b4ac6dcc8546e 100644
--- a/src/app/components/Overlay.js
+++ b/src/app/components/Overlay.js
@@ -25,6 +25,7 @@ export default function Overlay({
filterState,
setFilterState,
setNewSize,
+ type,
}) {
const [isMobile, setIsMobile] = useState(false);
const [openMenu, setOpenMenu] = useState(false);
@@ -32,7 +33,9 @@ export default function Overlay({
const mobileSearch = { searchIsClicked, setSearchIsClicked };
-
+ const handleOpenMenu = () => {
+ setOpenMenu(!openMenu);
+ };
useEffect(() => {
if (setNewSize != undefined) setNewSize(true);
@@ -56,33 +59,40 @@ export default function Overlay({
return (
<Suspense fallback={<Loading />}>
<ThemeProvider theme={theme}>
- <div
- className={`grid min-h-screen bg-main bg-fundo bg-repeat bg-fixed text-base grid-rows-[auto_auto_1fr_auto] `}
- >
-
+ <main className="bg-main bg-fundo bg-repeat bg-fixed text-base">
<AcessibilityBar />
-
- <Header
- mobileSearch={mobileSearch}
- isMobile={isMobile}
- setFilterState={setFilterState}
- filterState={filterState}
- />
-
- <div >
- {!isMobile && (
- <SideBar/>
- )}
-
- <main
- className={` ${isMobile && "mb-nav-bar"} md:ml-24 mt-[120px] overflow-y-auto`}
- >
- {children}
- </main>
- </div>
-
- {isMobile && <NavigationBar mobileSearch={mobileSearch} />}
- </div>
+ <Header setFilterState={setFilterState} filterState={filterState} />
+ {isMobile ?
+ <div>
+ <div className="pt-[140px] pb-[20px]">
+ {children}
+ </div>
+ <NavigationBar mobileSearch={mobileSearch} />
+ </div>
+ :
+ type === "twoColumns" ?
+ <div className="flex w-full">
+ <div className="fixed pt-[188px] w-[150px]">
+ <SideBar setFilterState={setFilterState} filterState={filterState} />
+ </div>
+ <div className="flex-grow pt-[180px] min-w-0 h-full ml-[150px]">
+ {children}
+ </div>
+ </div>
+ :
+ <div
+ className="h-dvh grid w-full pt-[188px] text-base xl:grid-cols-[150px_minmax(0,1fr)_600px] grid-cols-[150px_minmax(0,1fr)]"
+ >
+ <div className="min-h-0">
+ <SideBar setFilterState={setFilterState} filterState={filterState} />
+ </div>
+ {children}
+ </div>
+
+ }
+
+
+ </main>
</ThemeProvider>
</Suspense>
);
diff --git a/src/app/components/SearchComponent.js b/src/app/components/SearchComponent.js
index 11edba17826b9876211b7c4e22378371f406728d..16ddbafc64c0c79e41c7adb8c728835da65b86de 100644
--- a/src/app/components/SearchComponent.js
+++ b/src/app/components/SearchComponent.js
@@ -141,13 +141,13 @@ export default function SearchComponent({ setFilterState, filterState, sizeWindo
if (e.key === "Enter") e.preventDefault();
if (drop) e.stopPropagation();
}}
- className="w-full z-30"
+ className="w-full max-sm:w-[90%] max-sm:mx-2 h-[50px] z-30 items-center"
onSubmit={handleSubmit}
>
- <div className="flex gap-3 items-center">
+ <div className="flex gap-1 items-center h-full">
<div
ref={searchRef}
- className={`flex align-middle bg-white rounded-md text-xl items-center w-[80%] ${
+ className={`flex grow align-middle bg-white rounded-md text-xl items-center h-full ${
isFocused ? 'outline outline-2 outline-cyan-300' : ''
}`}
>
@@ -155,7 +155,7 @@ export default function SearchComponent({ setFilterState, filterState, sizeWindo
id="buscar"
type="text"
placeholder="Digite aqui o que você deseja pesquisar"
- className=" p-2 px-4 rounded-md outline outline-1 outline-outlineColor align-middle w-full"
+ className="p-2 px-5 rounded-lg outline outline-1 font-light text-2xl placeholder:text-gray-color outline-outlineColor align-middle h-full w-full"
onFocus={handleFocus}
onBlur={handleBlur}
onChange={(e) => {
@@ -172,9 +172,9 @@ export default function SearchComponent({ setFilterState, filterState, sizeWindo
type="submit"
alt="Buscar"
title="Buscar"
- className=" bg-blue-button hover:bg-text-color w-10 h-10 rounded outline outline-1 outline-outlineColor text-white-draw hover:text-white flex-shrink-0 transition "
+ className=" bg-blue-button hover:bg-text-color w-[50px] h-[50px] max-sm:w-10 max-sm:h-10 rounded-lg outline outline-1 outline-outlineColor text-white-draw hover:text-white flex-shrink-0 transition "
>
- <SearchIcon className="h-full text-3xl" />
+ <SearchIcon className="h-full text-4xl max-sm:text-3xl" />
</button>
</div>
{drop && (
diff --git a/src/app/components/SideBar.js b/src/app/components/SideBar.js
index 10ce27f0f1d0b26eb1146c15e478cc69ea294ef5..81ea8cf4ea641f8e4c5dbae1d3317d4009f46711 100644
--- a/src/app/components/SideBar.js
+++ b/src/app/components/SideBar.js
@@ -15,11 +15,19 @@ import { subjectsAvailable } from "./SubjectsAvailable";
import FileUploadIcon from '@mui/icons-material/FileUpload';
import { isLoggedIn } from "../handlers/loginHandler";
import NeedLoginModal from "./needLoginModal";
+import {
+ getStoredValue,
+} from "../handlers/localStorageHandler";
+/**
+ * @param {Object} props
+ * @param {Function} props.setFilterSubject
+ * @param {Boolean} props.openMenu
+ */
const acessoRapido = [
{
- title: "Publicar Recurso",
+ title: "Publicar",
icon: FileUploadIcon,
href: "/publicar",
id: "Publicar Recurso",
@@ -44,10 +52,10 @@ const acessoRapido = [
id: "Recursos",
},
{
- title: "Usuários",
+ title: "Meu perfil",
icon: Person,
- href: "User",
- id: "Usuários",
+ href: "/perfil",
+ id: "Meu perfil",
},
{
title: "Sobre",
@@ -56,7 +64,7 @@ const acessoRapido = [
id: "Sobre",
},
{
- title: "Entre em contato",
+ title: "Contato",
icon: EmailRoundedIcon,
href: "/contato",
id: "Contato",
@@ -71,8 +79,8 @@ function tradutor(name) {
return "Coleções"
case "MEC":
return "MEC"
- case "User":
- return "Usuários"
+ case "/perfil":
+ return "Meu perfil"
case "/publicar":
return "Publicar Recurso"
case "/contato":
@@ -83,17 +91,21 @@ function tradutor(name) {
}
-/**
- * @param {Object} props
- * @param {Function} props.setFilterSubject
- * @param {Boolean} props.openMenu
- */
-export default function SideBar() {
-
+export default function SideBar({ setFilterState, filterState }) {
let searchParams = useSearchParams();
const page = searchParams.get('page')
const pathname = usePathname();
+ useEffect(() => {
+ mecredApi
+ .get("/subjects")
+ .then(({ data }) => {
+ setSubjects(data);
+ setSelectedSubject(data.map(() => false));
+ })
+ .catch((error) => console.error(error));
+ }, []);
+
const getHref = (href) => {
switch (href) {
case "/sobre":
@@ -102,6 +114,8 @@ export default function SideBar() {
return "/publicar";
case "/contato":
return "/contato"
+ case "/perfil":
+ return `/perfil/${id}`;
default:
return `/busca?page=${href}`;
}
@@ -110,44 +124,54 @@ export default function SideBar() {
const [needLoginOpen, setNeedLoginOpen] = useState(false);
- const handleOpenLoggin = () => {
+ const handleOpenLogin = () => {
if (!isLoggedIn()) {
setNeedLoginOpen(true);
}
};
+ const [id, setId] = useState(null);
+ const [logged, setLogged] = useState(false);
+
+ const router = useRouter();
+
+ useEffect(() => {
+ if (isLoggedIn()) {
+ let data = JSON.parse(getStoredValue("user_data"));
+ setId(data["id"]);
+ }
+ setLogged(isLoggedIn());
+ }, []);
+
return (
<>
<NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
-
- <div className="max-md:hidden ">
- <div className="flex flex-col pt-2 items-strech gap-1 top-4 sm:top-[125px] start-0 overflow-y-auto p-2 bg-transparent w-24 text-white fixed h-full z-40 ease-in-out duration-300 ">
- {acessoRapido.map((item, index) => {
- return (
- <Link
- // id={item.id}
- onClick={item.href === "/publicar" ? handleOpenLoggin : () => { }}
- href={item.href === "/publicar" ? (isLoggedIn() ? "/publicar" : "") : getHref(item.href)}
- key={index}
- alt={item.title}
- title={item.title}
- className={`cursor-pointer hover:bg-main-hover focus:bg-main-hover text-center text-xs rounded-lg p-2 mb-0 ${(page === item.href) || (pathname === item.href) ? "bg-main-hover text-secondary-hover " : "text-gray-color"
- }`}
- >
- <item.icon
- className={` text-3xl rounded-xl cursor-pointer ${page === item.href ? "text-secondary-hover " : "text-gray-color"
- } `}
- />
- <div className="py-1 text-text-color font-medium">
- {item.title}
- </div>
- </Link>
- );
- })}
- </div>
+ <div className="max-md:hidden h-full min-h-0 overflow-y-auto">
+ <div className="flex flex-col items-center gap-3 overflow-y-auto w-full text-white h-full">
+ {acessoRapido.map((item, index) => {
+ return (
+ <Link
+ onClick={item.href === "/publicar" ? handleOpenLogin : () => { }}
+ href={item.href === "/publicar" ? (isLoggedIn() ? "/publicar" : "") : getHref(item.href)}
+ key={index}
+ alt={item.title}
+ title={item.title}
+ className={`aspect-square cursor-pointer hover:bg-main-hover focus:bg-main-hover text-center text-xs rounded-lg p-2 mb-0 ${(page === item.href) || (pathname === item.href) ? "bg-main-hover text-secondary-hover " : "text-gray-color"
+ }`}
+ >
+ <item.icon
+ className={`text-4xl rounded-xl cursor-pointer ${page === item.href ? "text-secondary-hover" : "text-gray-color"}`}
+ />
+ <div className="py-1 text-text-color text-lg font-light">
+ {item.title}
+ </div>
+ </Link>
+ );
+ })}
</div>
+ </div>
</>
);
-}
+}
\ No newline at end of file
diff --git a/src/app/components/collectionPreview.js b/src/app/components/collectionPreview.js
index db3b07361f92bfd211f6d9d7268c3d914783d214..96554dc57a8996b37ed65f3c29f89287d479cd97 100644
--- a/src/app/components/collectionPreview.js
+++ b/src/app/components/collectionPreview.js
@@ -56,7 +56,7 @@ export default function CollectionPreview({ collection }) {
const uri = mecredURL + "inline/" + collection.id;
let content = (
- <div className="relative aspect-video w-full h-full">
+ <div className="relative aspect-video h-full">
<Image
fill
priority
diff --git a/src/app/contato/page.js b/src/app/contato/page.js
index 11a5ab810f16f4bbcc273e308d5da7648fa32b8f..7ba9babead93e40fd8f8ac580b77a39d4ff58d47 100644
--- a/src/app/contato/page.js
+++ b/src/app/contato/page.js
@@ -65,7 +65,7 @@ export default function Contact() {
};
return (
- <Overlay>
+ <Overlay type="twoColumns">
<ModalSucess
open={successOpen}
onClose={() => {
diff --git a/src/app/globals.css b/src/app/globals.css
index ce9d9e854ed3b790608bea17d15ab702038aa106..d77bbe6ee81e6739cce6a52f8ddf78585bb63e98 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -54,6 +54,7 @@
rgba(245, 249, 249, 1)),
url("/images/fundo.webp");
--logo: url("/mecred.svg");
+ --logo-square: url("/mecred_square.svg");
--input-focus: #00bacc;
diff --git a/src/app/perfil/[id]/components/AboutCard.js b/src/app/perfil/[id]/components/AboutCard.js
index 50a2bb6f802688436e4135f229e3c3363db36758..cbd6ec097de8c14f090689e8340f97136c044943 100644
--- a/src/app/perfil/[id]/components/AboutCard.js
+++ b/src/app/perfil/[id]/components/AboutCard.js
@@ -10,7 +10,7 @@ const AboutCard = ({ content }) => {
return (
- <div className=" min-w-[200px] overflow-hidden transition-height bg-white ">
+ <div className=" min-w-[200px] overflow-hidden transition-height bg-white max-sm:pb-10 ">
<div className='p-4 rounded-md min-w-[200px] min-h-[180px] ' >
{content ?
<div id="content" className="content pt-2 px-2">
diff --git a/src/app/perfil/[id]/components/FollowersCards.js b/src/app/perfil/[id]/components/FollowersCards.js
index 0c1f97e75acf5db4abd2c1d98aa839836324b191..a0207902ae698852c0013c91d3634058203bcbc3 100644
--- a/src/app/perfil/[id]/components/FollowersCards.js
+++ b/src/app/perfil/[id]/components/FollowersCards.js
@@ -75,7 +75,7 @@ export default function FollowersCards({ id, count }) {
className="mb-2 border-hidden hover:bg-transparent rounded-xl normal-case"
onClick={toggleContent}
>
- <p className="hover:bg-main px-4 text-other-links text-lg rounded-md">
+ <p className="hover:bg-main px-4 pb-4 text-other-links text-lg rounded-md">
Ver mais...
</p>
</Button>
diff --git a/src/app/perfil/[id]/components/FollowingCards.js b/src/app/perfil/[id]/components/FollowingCards.js
index 2204b13efcd4703a67b09c754341df6a31b81295..4abd67d2aab35ffe7a6c288893951f15d88c6748 100644
--- a/src/app/perfil/[id]/components/FollowingCards.js
+++ b/src/app/perfil/[id]/components/FollowingCards.js
@@ -76,7 +76,7 @@ export default function FollowingCards({ id, count }) {
className="mb-2 border-hidden hover:bg-transparent rounded-xl normal-case"
onClick={toggleContent}
>
- <p className="hover:bg-main px-4 text-other-links text-lg rounded-md">
+ <p className="hover:bg-main px-4 pb-4 text-other-links text-lg rounded-md">
Ver mais...
</p>
</Button>
diff --git a/src/app/perfil/[id]/components/ProfileComplaints.js b/src/app/perfil/[id]/components/ProfileComplaints.js
index c305c1bda667600f89331433e469992afd0e28e8..fc96bdebeb2a57520fb55d93ed47cab571a5dd41 100644
--- a/src/app/perfil/[id]/components/ProfileComplaints.js
+++ b/src/app/perfil/[id]/components/ProfileComplaints.js
@@ -74,7 +74,7 @@ export default function ProfileComplaints({ id }) {
className="my-4 border-hidden hover:bg-transparent rounded-xl normal-case"
onClick={() => toggleContent()}
>
- <p className="hover:bg-main px-4 text-other-links text-lg rounded-md">
+ <p className="hover:bg-main px-4 pb-4 text-other-links text-lg rounded-md">
Ver mais...
</p>
</Button>
diff --git a/src/app/perfil/[id]/components/ProfileHomologation.js b/src/app/perfil/[id]/components/ProfileHomologation.js
index 52b2913b0443f6749235caa38c6b11d0e5dc3d46..0b140c65fc5c141a3870ce9180a7190f430241fc 100644
--- a/src/app/perfil/[id]/components/ProfileHomologation.js
+++ b/src/app/perfil/[id]/components/ProfileHomologation.js
@@ -65,7 +65,7 @@ export default function ProfileHomologation({ id }) {
className="my-4 border-hidden hover:bg-transparent rounded-xl normal-case"
onClick={() => toggleContent()}
>
- <p className="hover:bg-main px-4 text-other-links text-lg rounded-md">
+ <p className="hover:bg-main px-4 pb-4 text-other-links text-lg rounded-md">
Ver mais...
</p>
</Button>
diff --git a/src/app/perfil/[id]/components/ProfileResources.js b/src/app/perfil/[id]/components/ProfileResources.js
index 50b0e02e56f5c320784d92e85e3ca0f1d6756a5d..9b412330725c166808eb4260302096df996ae2d6 100644
--- a/src/app/perfil/[id]/components/ProfileResources.js
+++ b/src/app/perfil/[id]/components/ProfileResources.js
@@ -107,7 +107,7 @@ export default function ProfileResources({ id, idLogin }) {
{resourcesCount + homologaCount == 0 ? (
<NotFound name="recursos" />
) : (
- <div className="p-3 my-5 mx-5 rounded-md min-w-[200px] min-h-[180px] bg-white">
+ <div className="p-3 my-5 mb-24 mx-5 rounded-md min-w-[200px] min-h-[180px] bg-white">
<div className="flex flex-wrap justify-center">
{resources.map((resource, index) => (
<Cards
diff --git a/src/app/perfil/[id]/page.js b/src/app/perfil/[id]/page.js
index cea134be502c62e178d4eea16e76302c8741a4a4..f8be8e6bd82be91ef8d74b705db8123a2396a95c 100644
--- a/src/app/perfil/[id]/page.js
+++ b/src/app/perfil/[id]/page.js
@@ -69,7 +69,7 @@ export default function Perfil({ params }) {
return (
<>
- <Overlay>
+ <Overlay type="twoColumns">
{error ? <ErrorComponent name="Usuário" /> :
(profileData && <UserCard profileData={profileData} idLogin={idLogin} tab={optTab} />)}
</Overlay>
diff --git a/src/app/publicar/components/Form.js b/src/app/publicar/components/Form.js
index 1fe860c2ab19fa4583acf0008086ba922533325c..8d0e994ddfec365668f232bb95356f12f68a95c9 100644
--- a/src/app/publicar/components/Form.js
+++ b/src/app/publicar/components/Form.js
@@ -55,8 +55,8 @@ export default function Form() {
return (
<>
- <div className="w-[50%] max-xl:w-full mt-10">
- <HorizontalLinearAlternativeLabelStepper step={step} />
+ <div className="flex justify-center flex-col items-center ml-5 max-lg:w-full mt-15 max-sm:mx-0">
+ <HorizontalLinearAlternativeLabelStepper step={step} />
{step === 0 && userData && <InfoForm userData={userData} setStep={setStep} draft={draft} setDraft={setDraft} authorType={authorType} setAuthorType={setAuthorType} />}
{step === 1 && <UploadForm thumbURL={thumbURL} setThumbURL={setThumbURL} thumb={thumb} setThumb={setThumb} setStep={setStep} draft={draft} setDraft={setDraft} file={file} setFile={setFile} attachmentId={attachmentId} setAttachmentId={setAttachmentId} />}
{step === 2 && <RevisionForm setStep={setStep} draft={draft} setDraft={setDraft} />}
diff --git a/src/app/publicar/components/InfoForm.js b/src/app/publicar/components/InfoForm.js
index 04a3eb091b0b3fd219935102d77c2ee46c732667..39d931f939a6db0c5c3ffd663f2074e8592f87fa 100644
--- a/src/app/publicar/components/InfoForm.js
+++ b/src/app/publicar/components/InfoForm.js
@@ -176,7 +176,7 @@ export default function InfoForm({ userData, setStep, draft, setDraft, authorTyp
<>
<form className="mb-10" onSubmit={handleSubmit} onKeyDown={(e) => { if (e.key === "Enter") e.preventDefault() }} >
<Paper
- className="rounded-lg p-10 max-xl:p-5 max-xl:mx-5"
+ className="rounded-lg p-10 max-xl:p-5 max-xl:mx-5 max-w-[1125px]"
elevation={1}
sx={{
backgroundColor: 'var(--white)',
diff --git a/src/app/publicar/components/Stepper.js b/src/app/publicar/components/Stepper.js
index f19c057e6c142b4c36ea95fa9922b715e320ab02..fc79ecde0e1695b201dba4fba36d7779e6705a99 100644
--- a/src/app/publicar/components/Stepper.js
+++ b/src/app/publicar/components/Stepper.js
@@ -40,7 +40,7 @@ const CustomStepLabel = styled(StepLabel)(({ theme }) => ({
export default function HorizontalLinearAlternativeLabelStepper({ step }) {
return (
- <Box sx={{ width: '100%' }} className="mb-5">
+ <Box sx={{ width: '100%' }} className="mb-5 mt-5 max-w-[1125px]">
<Stepper
activeStep={step}
alternativeLabel
diff --git a/src/app/publicar/page.js b/src/app/publicar/page.js
index 5e6da7e49a6212e102b61fb04825cdce15190615..fbea8ded6164f71d8d3f69fd85fc6740806e0cf2 100644
--- a/src/app/publicar/page.js
+++ b/src/app/publicar/page.js
@@ -12,10 +12,8 @@ export default function Submit() {
}, [loginBarrier])
return (
- <Overlay>
- <div className="flex w-full justify-center items-center">
+ <Overlay type="twoColumns">
<Form/>
- </div>
</Overlay>
);
}
diff --git a/src/app/recurso/[id]/components/collectionInfo.js b/src/app/recurso/[id]/components/collectionInfo.js
index 3fdec01e13ffbe62cecbb9f7888592d22060994c..f38b9daab6812d4a48e7e3dd1e0f0f8ad49c8ad8 100644
--- a/src/app/recurso/[id]/components/collectionInfo.js
+++ b/src/app/recurso/[id]/components/collectionInfo.js
@@ -73,4 +73,4 @@ export default function CollectionInfo({ resourceId, collectionId }) {
</div>
);
-}
\ No newline at end of file
+}
diff --git a/src/app/recurso/[id]/components/relatedResources.js b/src/app/recurso/[id]/components/relatedResources.js
index 1a2e0335cca417067775f38822b06f95b50ee2d3..f1c0ec36e94566b7e16839dcbf64d3bba524bd0f 100644
--- a/src/app/recurso/[id]/components/relatedResources.js
+++ b/src/app/recurso/[id]/components/relatedResources.js
@@ -52,27 +52,31 @@ export default function RelatedResources({ learningObject }) {
return (
<Loading loaded={got}>
- <div className="flex flex-col bg-main">
- <div className="text-main-text font-bold text-xl ml-2">Recursos Relacionados</div>
+ <div className="flex flex-col">
+ <div className="text-main-text font-bold text-xl">Recursos Relacionados</div>
<div>
{related.map((item, index) => {
return (
- <Cards
- horizontal={!isSm}
- noAvatar={!isSm}
- id={item["id"]}
- key={index}
- title={item["name"]}
- author={item["publisher"]["name"]}
- avatar={item["publisher"]["avatar"]}
- image={item["thumbnail"]}
- type={item["object_type"]}
- updated_at={item["updated_at"]}
- thumbWidth={isSm ? "100%" : "230px"}
- thumbHeight="auto"
- width="100%"
- page="recurso"
- />
+ <div
+ className="my-3"
+ key={index}
+ >
+ <Cards
+ horizontal={!isSm}
+ noAvatar={!isSm}
+ id={item["id"]}
+ title={item["name"]}
+ author={item["publisher"]["name"]}
+ avatar={item["publisher"]["avatar"]}
+ image={item["thumbnail"]}
+ type={item["object_type"]}
+ updated_at={item["updated_at"]}
+ thumbWidth={isSm ? "100%" : "230px"}
+ thumbHeight="auto"
+ width="100%"
+ page="recurso"
+ />
+ </div>
);
})}
</div>
diff --git a/src/app/recurso/[id]/page.js b/src/app/recurso/[id]/page.js
index ee7eb6b2cad5e7c8939c7b305d38e8d9adcbb942..b4152e1196a149a670dcf065953bc876b1671c40 100644
--- a/src/app/recurso/[id]/page.js
+++ b/src/app/recurso/[id]/page.js
@@ -67,7 +67,14 @@ export default function Recurso({ params }) {
useEffect(() => {
setComplained(learningObject?.state === "suspended");
- }, [learningObject]);
+ }, [learningObject]);
+
+ useEffect(() => {
+ const container = document.querySelector(".scroll-container");
+ if (container) {
+ container.scrollTop = 0; // Rola para o topo
+ }
+ });
return (
<>
@@ -81,8 +88,7 @@ export default function Recurso({ params }) {
<HomologationModal open={submitOpen} onClose={() => setSubmitOpen(false)} name={learningObject.name} id={learningObject.submission_id} setSubmitted={setState} />
<ComplaintModal open={submitComplaintOpen} onClose={() => setSubmitComplaintOpen(false)} name={learningObject.name} id={learningObject.id} setSubmitted={setComplained} />
<NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
- <div className="flex flex-col lg:flex-row">
- <div className="flex flex-col bg-main p-3 lg:w-[55%] flex-shrink-0">
+ <div className="flex flex-col bg-main p-3 flex-shrink-0 min-height-0 overflow-y-auto scroll-container">
<div className=" flex justify-center">
{/* Pré-visualização */}
<ResourcePreview learningObject={learningObject} />
@@ -127,12 +133,11 @@ export default function Recurso({ params }) {
<Comments learningObjectId={params.id} />
</div>
</div>
- <div className="flex-grow p-3 bg-main">
+ <div className="px-[25px] p-3 min-h-0 overflow-y-auto">
<div className=""> {/* recommendations */} </div>
- {(collectionId !== null && collectionId !== undefined) ? <CollectionInfo resourceId={params.id} collectionId={collectionId} /> : <></>}
+ {(collectionId !== null && collectionId !== undefined) ? <CollectionInfo resourceId={params.id} collectionId={collectionId} /> : <></>}
<RelatedResources learningObject={learningObject} />
</div>
- </div>
</>
)}
</Overlay>
diff --git a/src/app/topicosAjuda/page.js b/src/app/topicosAjuda/page.js
index cd338bc70deb46c89b8c2c4cb4f7509d67bcbe6c..b94eb908b7561ff14f9daec95d5e00e950248b06 100644
--- a/src/app/topicosAjuda/page.js
+++ b/src/app/topicosAjuda/page.js
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Card } from "@mui/material"
import Overlay from "../components/Overlay"
+import { ImArrowLeft } from "react-icons/im";
export default function HelpTopics() {
const router = useRouter();
@@ -165,9 +166,9 @@ export default function HelpTopics() {
const pos = searchParams.get('pos');
const section = searchParams.get('section')
- const [questionChosen, setQuestionChosen] = useState( teste[section]?.questions?.[pos]?.question || '');
+ const [questionChosen, setQuestionChosen] = useState(teste[section]?.questions?.[pos]?.question || '');
- const [answerChosen, setAnswerChosen] = useState( teste[section]?.questions?.[pos]?.answer|| '')
+ const [answerChosen, setAnswerChosen] = useState(teste[section]?.questions?.[pos]?.answer || '')
function changeQuestion(itemQuestion) {
setQuestionChosen(itemQuestion.question)
@@ -176,37 +177,35 @@ export default function HelpTopics() {
return (
<Overlay>
- <div className="flex flex-col justify-center items-center mt-6 mb-10">
- <div className="flex flex-row">
+ <div className="flex flex-col 2xl:justify-center items-center mb-5 max-xl:mx-6">
+ <p className="text-center text-2xl font-bold text-text-filter my-5 2xl:hidden">Tópicos de ajuda</p>
+ <div className="flex flex-row max-xl:flex-col">
<Card
- className="bg-white outline outline-1 outline-outlineColor"
+ className="bg-white outline outline-1 outline-outlineColor w-[360px] h-[740px] p-[30px] max-xl:p-[0px] max-xl:w-full max-xl:h-auto"
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "flex-start",
- width: 360,
- height: 740,
backgroundColor: "#FFFFFF",
boxShadow: "none",
- padding: "30px",
}}
>
- <div className="flex flex-col overflow-y-auto mt-3 ml-8 mr-4 text-text-filter gap-5">
+ <div className="flex flex-col overflow-y-auto mt-3 ml-8 mr-4 text-text-filter gap-5 max-xl:hidden">
<p className="mt-5 text-2xl font-bold flex text-center">Tópicos de Ajuda</p>
- {teste.map((item, index) => (
+ {teste?.map((item, index) => (
<div key={index}>
<p className="mt-5 text-lg font-bold flex text-center">{item.title}</p>
<div className="flex flex-col gap-2 mt-2">
- {item.questions.map((questionItem, ind) => (
- <button
- onClick={() => changeQuestion(questionItem)}
- className={`text-sm text-left ${questionItem.question === questionChosen ? 'bg-main-hover font-bold rounded-sm p-1' : ''}`}
- key={ind}
- >
- {questionItem.question}
- </button>
+ {item?.questions?.map((questionItem, ind) => (
+ <button
+ onClick={() => changeQuestion(questionItem)}
+ className={`text-sm text-left ${questionItem.question === questionChosen ? 'bg-main-hover font-bold rounded-sm p-1' : ''}`}
+ key={ind}
+ >
+ {questionItem.question}
+ </button>
))}
</div>
</div>
@@ -214,29 +213,30 @@ export default function HelpTopics() {
</div>
</Card>
<Card
- className="bg-white outline outline-1 outline-outlineColor"
+ className="bg-white outline outline-1 outline-outlineColor justify-start p-[30px] max-sm:p-[10px] max-xl:mb-[160px] max-xl:w-full max-xl:h-auto "
sx={{
display: "flex",
flexDirection: "column",
- justifyContent: "flex-start",
width: 820,
height: 740,
backgroundColor: "#FFFFFF",
boxShadow: "none",
- padding: "30px",
}}
>
- <div className="flex justify-start flex-col text-text-filter gap-7 mt-3 mr-16">
+ <div className="flex justify-start flex-col text-text-filter gap-7 mt-3 mr-16 max-xl:m-5 max-xl:mb-0 max-xl:mt-0">
<p className="mt-5 text-2xl font-bold mb-5">{questionChosen}</p>
<div className="text-xl text-text-color font-light mb-5 leading-6">
- {answerChosen.map((line, index) => (
+ {answerChosen?.map((line, index) => (
<p key={index}>{line}<br /><br /></p>
))}
</div>
</div>
+ <button onClick={() => router.push("/ajuda")} className="flex pl-5 pb-2 text-text-filter font-bold 2xl:hidden">Voltar</button>
</Card>
</div>
- <div className="flex justify-center flex-col items-center mt-8">
+ </div>
+ <div className="flex flex-col pt-8 items-center max-xl:hidden">
+ <div className="flex flex-col items-center bg-white rounded-xl px-10 py-7 mx-20 ">
<div className="text-main-text mt-5 text-2xl font-bold">Não encontrou o que precisa?</div>
<div className="text-main-text text-lg mt-4 ml-3">Entre em contato com nossa equipe</div>
<button onClick={() => router.push("/contato")} className="mt-4 bg-secondary text-lg text-white p-2 px-4 rounded-lg hover:bg-secondary-hover">Página de contato</button>
diff --git a/src/app/usuarios/page.js b/src/app/usuarios/page.js
index e4ad39f058246811582302f2c42694587b1c55b3..6fb4de225065ed4491af52a2a7d51f95ed29f9f7 100644
--- a/src/app/usuarios/page.js
+++ b/src/app/usuarios/page.js
@@ -10,7 +10,6 @@ export default function Users(){
return (
<Suspense fallback={<Loading />}>
-
<Content name="User" inputFilter={filter} />
</Suspense>
)
diff --git a/tailwind.config.js b/tailwind.config.js
index 0b51927e25525cb35a33e0245a5c5c915eff4baa..c479aad6e4e171950871233a57c5c2803d69369e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -63,6 +63,7 @@ module.exports = {
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
"fundo": 'var(--fundo)',
"logo": 'var(--logo)',
+ "logo-square": 'var(--logo-square)',
},
keyframes: {
scrollHint: {