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) {
const [isloading, setIsLoading] = useState(false);
const [loadingMoreData, setLoadingMoreData] = useState(false);
const [isFiltering, setIsFiltering] = useState(false);
const [resultsPerPage, setResultsPerPage] = useState(6);
const [resultsPerPage, setResultsPerPage] = useState(12);
const [totalResults, setTotalResults] = useState(0);
const [options] = React.useState([
{ label: "Recursos", value: "LearningObject" },
......@@ -147,195 +147,84 @@ export default function Search(props) {
<span>Busca</span>
</StyledBreadCrumbs>
</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>
{
isloading ? <LoadingSpinner text="Carregando..." /> :
optionResult === "Collection" ? (
<GridBuscaCollection container spacing={2}>
<Grid item md={12} xs={12}>
<Grid container spacing={2}>
{resultsCollection.map((card) => (
<Grid item md={4} xs={6} key={card.id}>
<CollectionCardFunction
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 style={{margin:"15px 2%", }}>
<HeaderFilters elevation={4} square>
<Grid container spacing={0} style={{ height: "100%" }}>
<Grid item xs style={{display:"flex", flexDirection:"column", justifyContent:"center", paddingLeft:20}}>
<div style={{ marginRight:5 }}>
<div className="textInfo">
<span style={{ fontWeight:"bold" }}>
MOSTRAR
</span>
</div>
</Grid>
</GridBuscaCollection>
) :
<Dropdown options={options} value={optionResult} onChange={(e) => {
setIsLoading(true);
setOption(e.value);
collectStuff(e.value, "");
}}
placeholder="Selecione um tipo"
/>
</div>
</Grid>
optionResult === "LearningObject" ? (
<GridBuscaResource container spacing={2}>
<Grid item md={3} xs={12}>
<Paper elevation={4} square>
<SearchExpansionPanel onChange={collectStuff} onFiltering={isFiltering} />
</Paper>
{
optionResult === "User" ? null :
<Grid item xs style={{display: "flex", flexDirection: "column", justifyContent: "center", paddingRight: 20,}}>
<div style={{marginLeft:5}}>
<div className="textInfo">
<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 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}>
{resultsResource.map((card) => (
<Grid item md={4} xs={6} key={card.id}>
<ResourceCardFunction
avatar={card.publisher.avatar}
{resultsCollection.map((card) => (
<Grid item xs key={card.id}>
<CollectionCardFunction
name={card.name}
rating={card.score}
id={card.id}
thumbnail={card.thumbnail}
type={card.object_type ? card.object_type : "Outros"}
title={card.name}
published={card.state === "published" ? true : false}
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}
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",
}}
>
<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",
style={{ height: 36, backgroundColor: "#ff7f00", marginBottom: 50, marginTop: 50, fontSize: 14,
color: "white", borderRadius: 4,border: "none",
}}
onClick={() => {
setLoadingMoreData(true);
setResultsPerPage(resultsPerPage + 12)
// collectStuff("LearningObject", "");
// collectStuff("Collection", "");
}}
>
{
......@@ -344,24 +233,34 @@ export default function Search(props) {
</button>
</div>
</Grid>
</GridBuscaResource>
</GridBuscaCollection>
) :
optionResult === "User" && (
<GridBuscaUser container spacing={2}>
<Grid item md={12} xs={12}>
optionResult === "LearningObject" ? (
<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}>
{resultsUser.map((card) => (
<Grid item md={4} xs={6} 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}
{resultsResource.map((card) => (
<Grid item xs key={card.id}>
<ResourceCardFunction
avatar={card.publisher.avatar}
id={card.id}
thumbnail={card.thumbnail}
type={card.object_type ? card.object_type : "Outros"}
title={card.name}
published={card.state === "published" ? true : false}
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>
))}
......@@ -387,18 +286,71 @@ export default function Search(props) {
onClick={() => {
setLoadingMoreData(true);
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>
</div>
</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>
</div>
);
......@@ -439,11 +391,14 @@ const GridBuscaUser = styled(Grid)`
`;
const HeaderFilters = styled(Paper)`
height: 60px;
height: 110px;
text-align: center;
background-color: #fff;
margin-bottom: 30px;
color: #666;
.textInfo{
text-align: start;
}
`;
const StyledBreadCrumbs = styled(Breadcrumbs)`
......@@ -465,6 +420,5 @@ const BreadCrumbsDiv = styled.div`
`;
const Principal = styled.div`
width: 1170px;
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