Skip to content
Snippets Groups Projects
Commit b10f2deb authored by gsf20's avatar gsf20 Committed by mcs22
Browse files

Issue #127: FIX about dimensions

parent eee3fef6
Branches
No related tags found
1 merge request!135Issue #127: FIX about dimensions
Pipeline #38419 passed
Stage: build
Show whitespace changes
Inline Side-by-side
src/app/components/About.js
+ 78
− 124
View file @ b10f2deb
......@@ -2,11 +2,10 @@ import { useEffect, useState } from "react";
import mecredApi from "@/axiosConfig";
import Title from "./Title";
import Image from "next/image";
import packageInfo from "../../../package.json"
import packageInfo from "../../../package.json";
import Link from "next/link";
import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import { Button } from "@mui/material";
import { Carousel } from "./AboutCarousel";
/**
*
......@@ -14,8 +13,6 @@ import { Button } from "@mui/material";
*/
export default function AboutComponent() {
const [statistics, setStatistics] = useState({});
const [currentIndex, setCurrentIndex] = useState(0);
useEffect(() => {
mecredApi
......@@ -32,8 +29,14 @@ export default function AboutComponent() {
<div
className={`h-24 w-24 my-5 mx-10 pt-5 flex justify-center rounded-full ${color["bg"]}`}
>
<Image className={`rounded-lg w-14 h-14 bg-${color}`} style={{ filter: 'invert(100%)' }} alt={name} src={icon} width={10} height={10} />
<Image
className={`rounded-lg w-14 h-14 bg-${color}`}
style={{ filter: "invert(100%)" }}
alt={name}
src={icon}
width={10}
height={10}
/>
</div>
<h1 className={`text-xl font-bold ${color["text"]}`}>{data}</h1>
<h2 className={`text-sm font-bold ${color["text"]}`}>{name}</h2>
......@@ -68,22 +71,15 @@ export default function AboutComponent() {
const ActorInfo = ({ name, description, nameImage }) => {
return (
<div className="flex flex-col flex-wrap w-80 my-5 xl:m-5">
<div
className={`flex flex-col justify-end h-36 rounded-md mb-1 mt-5`}
>
<div className={`flex flex-col justify-start w-[300px] items-center rounded-md`}>
<Image
className="rounded-lg"
alt={name}
src={nameImage}
width={280} height={10}
width={300}
height={10}
/>
{/* <h1 className="pl-3 pb-1 text-start text-lg font-bold text-main">
{name}
</h1> */}
</div>
<span className="text-balance text-main-text text-sm text-left">
<span className="text-light text-main-text mt-4 text-md text-left">
{description}
</span>
</div>
......@@ -93,14 +89,14 @@ export default function AboutComponent() {
const Actors = () => {
return (
<>
<h1 className="text-xl text-main-text font-bold mb-3 mt-5">
A quem se destina?
<h1 className="text-2xl text-main-text font-bold mb-3 mt-10">
O que você pode fazer aqui?
</h1>
<h1 className="text-balance text-main-text xl:w-[50%] mb-5">
A plataforma é aberta e destina-se a todas as pessoas que se interessam
pela relação entre a escola e a cultura digital:
<h1 className="flex text-balance text-main-text xl:w-[50%] mb-10">
A plataforma é aberta e destina-se a todos e todas que se interessam
pela relação entre a escola e a Cultura Digital:
</h1>
<div className="w-[90%] flex flex-wrap max-xl:flex-col max-xl:items-center justify-center">
<div className="w-full grid grid-rows-2 max-sm:grid-rows-4 grid-flow-col gap-10 justify-center mb-10 ">
<ActorInfo
name="Professores"
description="Encontre recursos digitais que atendem aos objetivos das suas aulas! Aproveite para seguir outros professores, acessar coleções e conhecer novas experiências de uso!"
......@@ -131,11 +127,16 @@ export default function AboutComponent() {
<div className="flex max-xl:flex-col max-xl:items-center my-5">
<div>
<div
className={`flex h-24 w-24 my-2 mx-10 rounded-full justify-center ${color}`}>
<Image className={`rounded-lg w-14 h-14 mt-4 bg-${color} ${title === "Publicar o seu Recurso" && `rotate-180`}`}
style={{ filter: 'invert(100%)' }}
className={`flex h-24 w-24 my-2 mx-10 rounded-full items-center justify-center ${color}`}
>
<Image
className={` rounded-lg w-12 h-12 bg-${color} ${title === "Publicar o seu Recurso" && `rotate-180`
}`}
style={{ filter: "invert(100%)" }}
alt={title}
src={icon} width={10} height={10}
src={icon}
width={10}
height={10}
/>
</div>
</div>
......@@ -154,10 +155,10 @@ export default function AboutComponent() {
const Functionalities = () => {
return (
<>
<h1 className="text-xl text-main-text font-bold mb-3 mt-5">
<h1 className="text-2xl text-main-text font-bold mb-3 mt-5">
O que você pode fazer aqui?
</h1>
<h1 className="text-balance text-main-text xl:w-[50%] mb-5">
<h1 className="flex text-balance text-main-text xl:w-[50%] mb-5">
A plataforma é aberta e destina-se a todos e todas que se interessam
pela relação entre a escola e a Cultura Digital:
</h1>
......@@ -207,9 +208,8 @@ export default function AboutComponent() {
{description}
</h1>
</div>
)
}
);
};
const Differences = () => {
return (
......@@ -218,18 +218,19 @@ export default function AboutComponent() {
O que nos faz diferentes?
</h1>
<h1 className="text-balance text-main-text xl:w-[50%] mb-5">
A plataforma é aberta e destina-se a todos e todas que se interessam pela
relação entre a escola e a Cultura Digital:
A plataforma é aberta e destina-se a todos e todas que se interessam
pela relação entre a escola e a Cultura Digital:
</h1>
<div>
<div className="flex w-full align-middle px-28 justify-center max-xl:flex-col max-xl:items-center space-x-2">
<div className="flex w-full align-middle px-28 max-sm:px-0 mt-4 justify-center max-xl:flex-col max-xl:items-center space-x-2">
<div className="w-[30%] grid grid-cols-1 place-content-center">
<Image className={` -mt-4 rounded-lg`}
<Image
className={` -mt-4 rounded-lg`}
alt="imagem"
src="/images/professor.png"
width={230} height={10}
width={260}
height={10}
/>
</div>
<div className="w-[60%] pb-8">
<DifferencesInfo
......@@ -248,71 +249,15 @@ export default function AboutComponent() {
</div>
</div>
</>
)
}
const handleNext = (e) => {
e.preventDefault()
setCurrentIndex((prevIndex) => (prevIndex + 1) % carouselItems.length);
};
const handlePrev = (e) => {
e.preventDefault()
setCurrentIndex((prevIndex) => (prevIndex - 1 + carouselItems.length) % carouselItems.length);
);
};
const carouselItems = [
{
image: "/images/pratica.png",
},
{
image: "/images/estudante.png",
},
{
image: "/images/troca.png",
},
{
image: "/images/uso.png",
}
]
const Carousel = () => {
return (
<div className=" flex flex-row ">
<button onClick={(e) => handlePrev(e)} className=" text-2xl text-gray-700 hover:text-gray-900">
<KeyboardArrowLeftIcon fontSize="large" />
</button>
<div className=" relative align-middle carousel-item text-center">
<Image className={`rounded-lg outline outline-1 outline-outlineColor`}
alt="imagem"
src={carouselItems[currentIndex].image}
width={700} height={600}
/>
<div className={`absolute inset-0 bg-${carouselItems[currentIndex].color} w-72 h-28 rounded-lg mt-52 ml-10 flex items-center text-white p-4`}>
<p className="text-base font-bold">{carouselItems[currentIndex].text}</p>
</div>
</div>
<button onClick={(e) => handleNext(e)} className=" text-2xl text-gray-700 hover:text-gray-900">
<KeyboardArrowRightIcon fontSize="large" />
</button>
</div>
)
}
return (
<div className="flex ">
<div>
<div className="flex flex-col m-14 w-[70%] max-lg:w-auto max-lg:m-6">
<div className="flex flex-col text-center items-center mb-10 mx-14 ">
<div className="grid grid-cols-3 ">
<div className="flex max-lg:col-span-3 col-span-2">
{/* max-lg:w-auto max-lg:m-6 ---> retirado da div de baixo */}
<div className="flex flex-col px-3 w-full">
<Carousel />
</div>
<div className="flex flex-col text-center items-center rounded-lg bg-white">
<div className="max-xl:hidden">
<Title />
......@@ -329,20 +274,29 @@ export default function AboutComponent() {
<Differences />
</div>
<Link href="https://gitlab.c3sl.ufpr.br/mecred/frontend-mecred" className="flex flex-col text-center items-center mt-8">
<h6 className="underline text-gray-700">Versão {packageInfo.version}</h6>
<Link
href="https://gitlab.c3sl.ufpr.br/mecred/frontend-mecred"
className="flex flex-col text-center items-center mt-8"
>
<h6 className="underline text-gray-700">
Versão {packageInfo.version}
</h6>
</Link>
</div>
</div>
<div className="fixed max-lg:hidden right-[6%] top-32 ">
<div className="bg-white p-4 text-text-filter rounded-lg h-56 w-64 grid justify-items-center">
<p className="font-bold">Tudo certo?</p>
<p className="text-sm text-text-filter text-center">
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.
<div className="max-lg:hidden col-span-1 my-3">
<div className="fixed flex flex-col items-center gap-8 bg-white text-text-filter rounded-xl px-12 py-14 mx-3">
<p className="font-bold text-3xl w-full text-center">Tudo certo?</p>
<p className="text-md text-text-filter 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-white w-48 py-2 text-center rounded-lg hover:secondary-hover font-bold normal-case">
<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>
......
src/app/components/AboutCarousel.js 0 → 100644
+ 69
− 0
View file @ b10f2deb
import { useState } from "react";
import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
import Image from "next/image";
const carouselItems = [
{
image: "/images/pratica.png",
},
{
image: "/images/estudante.png",
},
{
image: "/images/troca.png",
},
{
image: "/images/uso.png",
},
];
export const Carousel = () => {
const [currentIndex, setCurrentIndex] = useState(0);
return (
<div className={`flex flex-col bg-transparent w-full my-3`}>
<div className="relative w-[100%] aspect-[2/1] flex items-center overflow-hidden rounded-xl object-contain">
<Image
priority
sizes="50vw"
fill
src={carouselItems[currentIndex].image}
alt={`Imagem ${currentIndex + 1} do Carrossel`}
/>
<button
onClick={() =>
setCurrentIndex(
(prevIndex) =>
(prevIndex - 1 + carouselItems.length) % carouselItems.length
)
}
className="absolute left-0 top-[50%] -translate-y-[50%] text-white"
>
<KeyboardArrowLeftIcon className="text-7xl" />
</button>
<button
onClick={() =>
setCurrentIndex(
(prevIndex) => (prevIndex + 1) % carouselItems.length
)
}
className="absolute right-0 top-[50%] -translate-y-[50%] text-white"
>
<KeyboardArrowRightIcon className="text-7xl" />
</button>
</div>
<div className="flex flex-row justify-center gap-1 items-center py-4">
{carouselItems.map((_, index) => (
<button
key={index}
className={`rounded-full w-[18px] h-[18px] ${
index === currentIndex ? "bg-text-filter" : "bg-main-hover"
} `}
onClick={() => setCurrentIndex(index)}
/>
))}
</div>
</div>
);
};
src/app/components/Content.js
+ 138
− 86
View file @ b10f2deb
"use client"
"use client";
import { useEffect, useState } from "react";
import InfiniteScroll from "../components/InfiniteScroll";
......@@ -7,20 +7,18 @@ import GroupButtonsFilters from "./GroupButtonsFilters";
import FiltersModal from "./FiltersModal";
import { useSearchParams, useRouter } from "next/navigation";
function tradutor(name) {
switch (name) {
case "LearningObject":
return "Recursos"
return "Recursos";
case "Collection":
return "Coleções"
return "Coleções";
case "MEC":
return "MEC"
return "MEC";
case "User":
return "Usuários"
return "Usuários";
default:
return
return;
}
}
......@@ -32,9 +30,8 @@ function tradutor(name) {
export default function Content({ name, inputFilter, searchPage }) {
const [titlePage, setTitlePage] = useState("Recentes");
const [newSize, setNewSize] = useState(false);
const [activeFilters, setActiveFilters] = useState(false)
const router = useRouter()
const [activeFilters, setActiveFilters] = useState(false);
const router = useRouter();
const [filterState, setFilterState] = useState({
languages: [], // em ids
......@@ -43,7 +40,7 @@ export default function Content({ name, inputFilter, searchPage }) {
objectTypes: [], // pdf, video, etc
educationalStages: [], // ensino fundamental, médio, etc
query: "*", // string de busca
order: "publicationdesc" // ordem
order: "publicationdesc", // ordem
});
const itemsBySearchClass = {};
......@@ -51,58 +48,113 @@ export default function Content({ name, inputFilter, searchPage }) {
const abortControllerBySearchClass = {};
const setAbortControllerBySearchClass = {};
[abortControllerBySearchClass["LearningObject"], setAbortControllerBySearchClass["LearningObject"]] = useState(new AbortController());
[abortControllerBySearchClass["Collection"], setAbortControllerBySearchClass["Collection"]] = useState(new AbortController());
[abortControllerBySearchClass["User"], setAbortControllerBySearchClass["User"]] = useState(new AbortController());
[abortControllerBySearchClass["MEC"], setAbortControllerBySearchClass["MEC"]] = useState(new AbortController());
[itemsBySearchClass["LearningObject"], setItemsBySearchClass["LearningObject"]] = useState([]);
[itemsBySearchClass["Collection"], setItemsBySearchClass["Collection"]] = useState([]);
[
abortControllerBySearchClass["LearningObject"],
setAbortControllerBySearchClass["LearningObject"],
] = useState(new AbortController());
[
abortControllerBySearchClass["Collection"],
setAbortControllerBySearchClass["Collection"],
] = useState(new AbortController());
[
abortControllerBySearchClass["User"],
setAbortControllerBySearchClass["User"],
] = useState(new AbortController());
[
abortControllerBySearchClass["MEC"],
setAbortControllerBySearchClass["MEC"],
] = useState(new AbortController());
[
itemsBySearchClass["LearningObject"],
setItemsBySearchClass["LearningObject"],
] = useState([]);
[itemsBySearchClass["Collection"], setItemsBySearchClass["Collection"]] =
useState([]);
[itemsBySearchClass["User"], setItemsBySearchClass["User"]] = useState([]);
[itemsBySearchClass["MEC"], setItemsBySearchClass["MEC"]] = useState([]);
useEffect(() => {
for (const [searchClass, abortController] of Object.entries(abortControllerBySearchClass)) {
for (const [searchClass, abortController] of Object.entries(
abortControllerBySearchClass
)) {
setItemsBySearchClass[searchClass]([]);
abortController.abort();
if (searchClass === searchPage) {
setAbortControllerBySearchClass[searchClass](new AbortController());
}
}
setFilterState(old => { return { ...old, searchClass: searchPage, query: (inputFilter === null ? "*" : inputFilter) } })
}, [inputFilter, searchPage])
setFilterState((old) => {
return {
...old,
searchClass: searchPage,
query: inputFilter === null ? "*" : inputFilter,
};
});
}, [inputFilter, searchPage]);
{/* GroupButtonsFilters: Botões para seleção do tipo de filtro usado (selectFilter) */ }
{
/* 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}
>
<>
{(filterState.searchClass !== "MEC" && filterState.searchClass != "User") ?
(
{filterState.searchClass !== "MEC" &&
filterState.searchClass != "User" ? (
<>
<div className="ml-1 fixed top-[120px] w-full
<div
className="ml-1 fixed max-sm:top-[88px] top-[168px] w-full
bg-fundo
bg-repeat
bg-fixed"
>
<h1 className="text-2xl ml-4 font-bold text-text-color mb-3 mt-4">
{tradutor(filterState.searchClass)} {(tradutor(name) === "Alfabética") ? "ordem Alfabética" : " mais " + titlePage}
{tradutor(filterState.searchClass)}{" "}
{tradutor(name) === "Alfabética"
? "ordem Alfabética"
: " mais " + titlePage}
</h1>
<div className="flex w-full justify-between pr-6">
<GroupButtonsFilters activeFilters={activeFilters} setActiveFilters={setActiveFilters} filterState={filterState} setFilterState={setFilterState} setItems={setItemsBySearchClass[filterState.searchClass]} />
<GroupButtonsFilters
activeFilters={activeFilters}
setActiveFilters={setActiveFilters}
filterState={filterState}
setFilterState={setFilterState}
setItems={setItemsBySearchClass[filterState.searchClass]}
/>
</div>
</div>
<div className="ml-4 pt-36">
<InfiniteScroll filterState={filterState} setNewSize={setNewSize} setItems={setItemsBySearchClass[filterState.searchClass]} items={itemsBySearchClass[filterState.searchClass]} abortController={abortControllerBySearchClass[filterState.searchClass]} />
<InfiniteScroll
filterState={filterState}
setNewSize={setNewSize}
setItems={setItemsBySearchClass[filterState.searchClass]}
items={itemsBySearchClass[filterState.searchClass]}
abortController={
abortControllerBySearchClass[filterState.searchClass]
}
/>
</div>
</>
)
:
) : (
<>
<InfiniteScroll filterState={filterState} setNewSize={setNewSize} setItems={setItemsBySearchClass[filterState.searchClass]} items={itemsBySearchClass[filterState.searchClass]} abortController={abortControllerBySearchClass[filterState.searchClass]} />
</>
<InfiniteScroll
filterState={filterState}
setNewSize={setNewSize}
setItems={setItemsBySearchClass[filterState.searchClass]}
items={itemsBySearchClass[filterState.searchClass]}
abortController={
abortControllerBySearchClass[filterState.searchClass]
}
/>
</>
)}
</>
</Overlay>
)
);
}
src/app/components/Header.js
+ 3
− 3
View file @ b10f2deb
......@@ -142,7 +142,7 @@ function DefaultContent({
);
}
function MobileSearch({ setFilterState, handleToggleMobileSearch }) {
function MobileSearch({ setFilterState, filterState, handleToggleMobileSearch }) {
return (
<div className="flex w-full items-center gap-3">
<SearchComponent setFilterState={setFilterState} filterState={filterState} />
......@@ -182,7 +182,7 @@ export default function Header({ setFilterState, filterState, handleOpenMenu })
bg-repeat
bg-fixed">
{mobileSearchOpen ? (
<MobileSearch handleToggleMobileSearch={handleToggleMobileSearch} />
<MobileSearch handleToggleMobileSearch={handleToggleMobileSearch} setFilterState={setFilterState} filterState={filterState}/>
) : (
<DefaultContent
handleToggleMobileSearch={handleToggleMobileSearch}
......
src/app/components/Overlay.js
+ 1
− 1
View file @ b10f2deb
......@@ -61,7 +61,7 @@ export default function Overlay({
<div
className={`flex flex-col ml-0 ${
openMenu ? "md:ml-64" : "md:ml-24"
} mt-[165px]`}
} mt-[168px]`}
>
{children}
</div>
......
src/app/components/SideBar.js
+ 1
− 1
View file @ b10f2deb
......@@ -198,7 +198,7 @@ export default function SideBar({ setFilterState, filterState, openMenu }) {
</div>
{!openMenu && (
<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 ">
<div className="flex flex-col pt-2 items-strech gap-1 top-4 sm:top-[168px] 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
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment