From 700ab88602596b583a17522dda7776853b35c8a7 Mon Sep 17 00:00:00 2001
From: "Henrique V. Ehrenfried" <hvehrenfried@inf.ufpr.br>
Date: Fri, 29 Jan 2021 12:03:53 -0300
Subject: [PATCH] Improve search layout
Signed-off-by: Henrique V. Ehrenfried <hvehrenfried@inf.ufpr.br>
---
.../SearchExpansionPanel/ExpansionPanel.css | 7 ++++
.../SearchExpansionPanel.js | 4 ++-
src/Pages/Search.js | 35 +++++++++++--------
3 files changed, 30 insertions(+), 16 deletions(-)
create mode 100644 src/Components/SearchExpansionPanel/ExpansionPanel.css
diff --git a/src/Components/SearchExpansionPanel/ExpansionPanel.css b/src/Components/SearchExpansionPanel/ExpansionPanel.css
new file mode 100644
index 00000000..c96e8361
--- /dev/null
+++ b/src/Components/SearchExpansionPanel/ExpansionPanel.css
@@ -0,0 +1,7 @@
+.MuiAccordionActions-root{
+ display: block !important;
+}
+.MuiListItemIcon-root{
+ min-width: 30px !important;
+}
+
diff --git a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
index 92a2d39a..6a8dea5d 100644
--- a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
+++ b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
@@ -13,6 +13,8 @@ import { TextField } from "@material-ui/core";
import Grid from '@material-ui/core/Grid';
import CircularProgress from '@material-ui/core/CircularProgress';
+import './ExpansionPanel.css'
+
const ExpansionPanel = withStyles({
root: {
border: "1px solid rgba(0, 0, 0, .125)",
@@ -101,7 +103,7 @@ export default function SearchExpansionPanel(props) {
style={{
fontSize: "18px",
textTransform: "uppercase",
- fontWeight: "500"
+ fontWeight: "500",
}}
>
Filtros
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index ae2c068e..67be2704 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -141,7 +141,7 @@ export default function Search(props) {
return (
<div style={{ backgroundColor: "#f4f4f4" }}>
<Principal>
- <BreadCrumbsDiv>
+ <BreadCrumbsDiv style={{margin:"15px 2%", }}>
<StyledBreadCrumbs>
<Link to="/">Página Inicial</Link>
<span>Busca</span>
@@ -152,7 +152,7 @@ export default function Search(props) {
<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 style={{ marginRight:5, marginTop:15 }}>
<div className="textInfo">
<span style={{ fontWeight:"bold" }}>
MOSTRAR
@@ -171,7 +171,7 @@ export default function Search(props) {
{
optionResult === "User" ? null :
<Grid item xs style={{display: "flex", flexDirection: "column", justifyContent: "center", paddingRight: 20,}}>
- <div style={{marginLeft:5}}>
+ <div style={{marginLeft:5, marginTop:15}}>
<div className="textInfo">
<span style={{ fontWeight:"bold" }}>
ORDENAR POR
@@ -187,14 +187,15 @@ export default function Search(props) {
</div>
</Grid>
}
+ <Grid item xs={12}>
+ <div style={{display: "flex", flexDirection: "column", justifyContent: "center" }}>
+ <div style={{textAlign: "center", paddingTop: 10, fontWeight:"bolder"}}>
+ Exibindo {totalResults === 0 ? 0 : resultsPerPage} resultados de {totalResults} encontrados
+ </div>
+ </div>
+ </Grid>
</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..." /> :
@@ -238,15 +239,19 @@ export default function Search(props) {
optionResult === "LearningObject" ? (
<GridBuscaResource container spacing={2}>
- <Grid item xs={12} md={3}>
- <Paper elevation={4} square>
- <SearchExpansionPanel onChange={collectStuff} onFiltering={isFiltering} />
- </Paper>
+ <Grid item xs={12} md={2}>
+ <Grid container >
+ <Grid item xs={12}>
+ <Paper elevation={4} square>
+ <SearchExpansionPanel onChange={collectStuff} onFiltering={isFiltering} />
+ </Paper>
+ </Grid>
+ </Grid>
</Grid>
<Grid item xs>
<Grid container spacing={2}>
{resultsResource.map((card) => (
- <Grid item xs key={card.id}>
+ <Grid item xs={12} sm={6} md={4} lg={3} key={card.id}>
<ResourceCardFunction
avatar={card.publisher.avatar}
id={card.id}
@@ -391,7 +396,7 @@ const GridBuscaUser = styled(Grid)`
`;
const HeaderFilters = styled(Paper)`
- height: 110px;
+ height: 150px;
text-align: center;
background-color: #fff;
margin-bottom: 30px;
--
GitLab