Skip to content
Snippets Groups Projects
Commit 2e19a369 authored by Henrique Varella Ehrenfried's avatar Henrique Varella Ehrenfried :speech_balloon:
Browse files

Start to fix responsivity of Search page 


Signed-off-by: Henrique Varella Ehrenfried's avatarHenrique V. Ehrenfried <hvehrenfried@inf.ufpr.br>
parent 8553981d
No related branches found
No related tags found
5 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!39Update admin system,!32Homologa,!31Fix console error
Hide whitespace changes
Inline Side-by-side
Showing
with 152 additions and 198 deletions
src/Pages/Search.js
+ 152
− 198
View file @ 2e19a369
...@@ -53,7 +53,7 @@ export default function Search(props) { ...@@ -53,7 +53,7 @@ export default function Search(props) {
const [isloading, setIsLoading] = useState(false); const [isloading, setIsLoading] = useState(false);
const [loadingMoreData, setLoadingMoreData] = useState(false); const [loadingMoreData, setLoadingMoreData] = useState(false);
const [isFiltering, setIsFiltering] = useState(false); const [isFiltering, setIsFiltering] = useState(false);
const [resultsPerPage, setResultsPerPage] = useState(6); const [resultsPerPage, setResultsPerPage] = useState(12);
const [totalResults, setTotalResults] = useState(0); const [totalResults, setTotalResults] = useState(0);
const [options] = React.useState([ const [options] = React.useState([
{ label: "Recursos", value: "LearningObject" }, { label: "Recursos", value: "LearningObject" },
...@@ -147,195 +147,84 @@ export default function Search(props) { ...@@ -147,195 +147,84 @@ export default function Search(props) {
<span>Busca</span> <span>Busca</span>
</StyledBreadCrumbs> </StyledBreadCrumbs>
</BreadCrumbsDiv> </BreadCrumbsDiv>
<HeaderFilters elevation={4} square>
<Grid container spacing={0} style={{ height: "100%" }}>
<Grid
item
xs={4}
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
paddingLeft: 20,
}}
>
<div style={{ display: "flex", flexDirection: "row" }}>
<span style={{ alignSelf: "center", marginRight: 10 }}>
MOSTRAR:
</span>
<Dropdown
options={options}
value={optionResult}
onChange={(e) => {
setIsLoading(true);
setOption(e.value);
collectStuff(e.value, "");
}}
placeholder="Select an type"
/>
</div>
</Grid>
<Grid
item
xs={4}
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
}}
>
<div>
Resultados encontrados: {totalResults}
</div>
</Grid>
{
optionResult === "User" ? null :
<Grid
item
xs={4}
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
paddingRight: 20,
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "end",
}}
>
<span
style={{
textAlign: "right",
alignSelf: "center",
marginRight: 10,
}}
>
ORDENAR POR:
</span>
<Dropdown
options={ordenar}
value={currOrder}
onChange={(e) => {
order = e.value;
setCurrOrder(e.label)
collectStuff(optionResult, currFilter);
}}
placeholder="Select an order "
/>
</div>
</Grid>
}
</Grid>
</HeaderFilters>
{ <div style={{margin:"15px 2%", }}>
isloading ? <LoadingSpinner text="Carregando..." /> : <HeaderFilters elevation={4} square>
optionResult === "Collection" ? ( <Grid container spacing={0} style={{ height: "100%" }}>
<GridBuscaCollection container spacing={2}> <Grid item xs style={{display:"flex", flexDirection:"column", justifyContent:"center", paddingLeft:20}}>
<Grid item md={12} xs={12}> <div style={{ marginRight:5 }}>
<Grid container spacing={2}> <div className="textInfo">
{resultsCollection.map((card) => ( <span style={{ fontWeight:"bold" }}>
<Grid item md={4} xs={6} key={card.id}> MOSTRAR
<CollectionCardFunction </span>
name={card.name}
rating={card.score}
id={card.id}
author={card.owner.name}
description={card.description}
thumbnails={card.items_thumbnails}
avatar={card.owner.avatar}
/>
</Grid>
))}
</Grid>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "center",
}}
>
<button
style={{
height: 36,
backgroundColor: "#ff7f00",
marginBottom: 50,
marginTop: 50,
fontSize: 14,
color: "white",
borderRadius: 4,
border: "none",
}}
onClick={() => {
setLoadingMoreData(true);
setResultsPerPage(resultsPerPage + 12)
// collectStuff("Collection", "");
}}
>
{
loadingMoreData ? <CircularProgress size={24} color="inherit" /> : "Carregar mais 12"
}
</button>
</div> </div>
</Grid> <Dropdown options={options} value={optionResult} onChange={(e) => {
</GridBuscaCollection> setIsLoading(true);
) : setOption(e.value);
collectStuff(e.value, "");
}}
placeholder="Selecione um tipo"
/>
</div>
</Grid>
optionResult === "LearningObject" ? ( {
<GridBuscaResource container spacing={2}> optionResult === "User" ? null :
<Grid item md={3} xs={12}> <Grid item xs style={{display: "flex", flexDirection: "column", justifyContent: "center", paddingRight: 20,}}>
<Paper elevation={4} square> <div style={{marginLeft:5}}>
<SearchExpansionPanel onChange={collectStuff} onFiltering={isFiltering} /> <div className="textInfo">
</Paper> <span style={{ fontWeight:"bold" }}>
ORDENAR POR
</span>
</div>
<Dropdown options={ordenar} value={currOrder} onChange={(e) => {
order = e.value;
setCurrOrder(e.label)
collectStuff(optionResult, currFilter);
}}
placeholder="Selecione uma opção"
/>
</div>
</Grid> </Grid>
<Grid item md={9} xs={12}> }
</Grid>
</HeaderFilters>
<div style={{display: "flex", flexDirection: "column", justifyContent: "center" }}>
<div style={{textAlign: "center", paddingTop: 10, paddingBottom:30, fontWeight:"bolder"}}>
Exibindo {totalResults === 0 ? 0 : resultsPerPage} resultados de {totalResults} encontrados
</div>
</div>
{
isloading ? <LoadingSpinner text="Carregando..." /> :
optionResult === "Collection" ? (
<GridBuscaCollection container spacing={2}>
<Grid item xs>
<Grid container spacing={2}> <Grid container spacing={2}>
{resultsResource.map((card) => ( {resultsCollection.map((card) => (
<Grid item md={4} xs={6} key={card.id}> <Grid item xs key={card.id}>
<ResourceCardFunction <CollectionCardFunction
avatar={card.publisher.avatar} name={card.name}
rating={card.score}
id={card.id} id={card.id}
thumbnail={card.thumbnail} author={card.owner.name}
type={card.object_type ? card.object_type : "Outros"} description={card.description}
title={card.name} thumbnails={card.items_thumbnails}
published={card.state === "published" ? true : false} avatar={card.owner.avatar}
likeCount={card.likes_count}
liked={card.liked}
rating={card.review_average}
author={card.author}
tags={card.educational_stages}
href={"/recurso/" + card.id}
downloadableLink={card.default_attachment_location}
/> />
</Grid> </Grid>
))} ))}
</Grid> </Grid>
<div <div style={{ display: "flex", flexDirection: "row", justifyContent: "center", }}>
style={{
display: "flex",
flexDirection: "row",
justifyContent: "center",
}}
>
<button <button
style={{ style={{ height: 36, backgroundColor: "#ff7f00", marginBottom: 50, marginTop: 50, fontSize: 14,
height: 36, color: "white", borderRadius: 4,border: "none",
backgroundColor: "#ff7f00",
marginBottom: 50,
marginTop: 50,
fontSize: 14,
color: "white",
borderRadius: 4,
border: "none",
}} }}
onClick={() => { onClick={() => {
setLoadingMoreData(true); setLoadingMoreData(true);
setResultsPerPage(resultsPerPage + 12) setResultsPerPage(resultsPerPage + 12)
// collectStuff("LearningObject", ""); // collectStuff("Collection", "");
}} }}
> >
{ {
...@@ -344,24 +233,34 @@ export default function Search(props) { ...@@ -344,24 +233,34 @@ export default function Search(props) {
</button> </button>
</div> </div>
</Grid> </Grid>
</GridBuscaResource> </GridBuscaCollection>
) : ) :
optionResult === "User" && (
<GridBuscaUser container spacing={2}> optionResult === "LearningObject" ? (
<Grid item md={12} xs={12}> <GridBuscaResource container spacing={2}>
<Grid item xs={12} md={3}>
<Paper elevation={4} square>
<SearchExpansionPanel onChange={collectStuff} onFiltering={isFiltering} />
</Paper>
</Grid>
<Grid item xs>
<Grid container spacing={2}> <Grid container spacing={2}>
{resultsUser.map((card) => ( {resultsResource.map((card) => (
<Grid item md={4} xs={6} key={card.id}> <Grid item xs key={card.id}>
<ContactCard <ResourceCardFunction
name={card.name} avatar={card.publisher.avatar}
avatar={card.avatar ? apiDomain + card.avatar : null} id={card.id}
cover={card.cover ? apiDomain + card.cover : null} thumbnail={card.thumbnail}
numCollections={card.collections_count} type={card.object_type ? card.object_type : "Outros"}
numLearningObjects={card.learning_objects_count} title={card.name}
follow_count={card.follows_count} published={card.state === "published" ? true : false}
followed={card.followed || null} likeCount={card.likes_count}
followerID={card.id} liked={card.liked}
href={'/usuario-publico/' + card.id} rating={card.review_average}
author={card.author}
tags={card.educational_stages}
href={"/recurso/" + card.id}
downloadableLink={card.default_attachment_location}
/> />
</Grid> </Grid>
))} ))}
...@@ -387,18 +286,71 @@ export default function Search(props) { ...@@ -387,18 +286,71 @@ export default function Search(props) {
onClick={() => { onClick={() => {
setLoadingMoreData(true); setLoadingMoreData(true);
setResultsPerPage(resultsPerPage + 12) setResultsPerPage(resultsPerPage + 12)
// collectStuff("User", ""); // collectStuff("LearningObject", "");
}} }}
> >
{ {
loadingMoreData ? <CircularProgress color="inherit" size={24} /> : "Carregar mais 12" loadingMoreData ? <CircularProgress size={24} color="inherit" /> : "Carregar mais 12"
} }
</button> </button>
</div> </div>
</Grid> </Grid>
</GridBuscaUser> </GridBuscaResource>
) ) :
} optionResult === "User" && (
<GridBuscaUser container spacing={2}>
<Grid item xs >
<Grid container spacing={2}>
{resultsUser.map((card) => (
<Grid item xs key={card.id}>
<ContactCard
name={card.name}
avatar={card.avatar ? apiDomain + card.avatar : null}
cover={card.cover ? apiDomain + card.cover : null}
numCollections={card.collections_count}
numLearningObjects={card.learning_objects_count}
follow_count={card.follows_count}
followed={card.followed || null}
followerID={card.id}
href={'/usuario-publico/' + card.id}
/>
</Grid>
))}
</Grid>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "center",
}}
>
<button
style={{
height: 36,
backgroundColor: "#ff7f00",
marginBottom: 50,
marginTop: 50,
fontSize: 14,
color: "white",
borderRadius: 4,
border: "none",
}}
onClick={() => {
setLoadingMoreData(true);
setResultsPerPage(resultsPerPage + 12)
// collectStuff("User", "");
}}
>
{
loadingMoreData ? <CircularProgress color="inherit" size={24} /> : "Carregar mais 12"
}
</button>
</div>
</Grid>
</GridBuscaUser>
)
}
</div>
</Principal> </Principal>
</div> </div>
); );
...@@ -439,11 +391,14 @@ const GridBuscaUser = styled(Grid)` ...@@ -439,11 +391,14 @@ const GridBuscaUser = styled(Grid)`
`; `;
const HeaderFilters = styled(Paper)` const HeaderFilters = styled(Paper)`
height: 60px; height: 110px;
text-align: center; text-align: center;
background-color: #fff; background-color: #fff;
margin-bottom: 30px; margin-bottom: 30px;
color: #666; color: #666;
.textInfo{
text-align: start;
}
`; `;
const StyledBreadCrumbs = styled(Breadcrumbs)` const StyledBreadCrumbs = styled(Breadcrumbs)`
...@@ -465,6 +420,5 @@ const BreadCrumbsDiv = styled.div` ...@@ -465,6 +420,5 @@ const BreadCrumbsDiv = styled.div`
`; `;
const Principal = styled.div` const Principal = styled.div`
width: 1170px;
margin-inline: auto; margin-inline: auto;
`; `;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment