From b9e394e6d970c0c455fce24f2b7f0c4faf2c0eef Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Thu, 28 Jan 2021 15:44:36 -0300
Subject: [PATCH] Trying to make this component responsive
---
src/Components/TopicList.js | 34 +++++++++++++++++-----------------
1 file changed, 17 insertions(+), 17 deletions(-)
diff --git a/src/Components/TopicList.js b/src/Components/TopicList.js
index 77b8e468..71c232cd 100644
--- a/src/Components/TopicList.js
+++ b/src/Components/TopicList.js
@@ -13,23 +13,23 @@ export default function TopicList(props) {
setExpanded(!expanded);
}
- return (
+ return (
<Wrapper>
<Title>Módulos</Title>
<Grid
container
- direction="row"
- justify="space-evenly"
- alignItems="center"
+ spacing={3}
>
- { props.topicos.slice(0, (expanded ? -1 : 5)).map(t => {
- return (
- <TopicCard topico_obj={t} colecao_id={props.colecao_id}/>
- );
- })
+ {props.topicos.slice(0, (expanded ? -1 : 5)).map((t, index) => {
+ return (
+ <Grid item key={index} md={3}>
+ <TopicCard topico_obj={t} colecao_id={props.colecao_id} />
+ </Grid>
+ );
+ })
}
</Grid>
- { props.topicos.length > 5 ?
+ {props.topicos.length > 5 ?
<Grid container
direction="column"
justify="flex-start"
@@ -37,32 +37,32 @@ export default function TopicList(props) {
>
<Grid item>
<Fab size="medium" color="secondary" aria-label="edit" onClick={handleFabClick}>
- {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon /> }
+ {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</Fab>
</Grid>
<Grid item>
<FabText>
- { expanded ? "VER MENOS" : "VER TODOS OS MÓDULOS" }
+ {expanded ? "VER MENOS" : "VER TODOS OS MÓDULOS"}
</FabText>
</Grid>
</Grid>
- : <div></div>
+ : <div></div>
}
</Wrapper>
- );
+ );
}
-const FabText=styled.span`
+const FabText = styled.span`
color: #666;
font-weight: 900;
line-height: 2em;
`
-const Title=styled.h1`
+const Title = styled.h1`
font-weight: 100;
margin-left: 30px;
color: rgb(102, 102, 102);
`
-const Wrapper=styled.div`
+const Wrapper = styled.div`
margin-right : auto;
margin-left : auto;
margin-bottom: 30px;
--
GitLab