From f8990a52db21178ef642a88d6bfa1cc43229a8a8 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Mon, 1 Feb 2021 12:26:13 -0300
Subject: [PATCH] Fixed responsviness and aligment
---
.../FormationMaterialDescription.js | 137 ++++++++-------
src/Components/FormationMaterialHeader.js | 163 ++++++++++--------
src/Components/TopicFooter.js | 3 +-
src/Components/TopicList.js | 4 +-
4 files changed, 163 insertions(+), 144 deletions(-)
diff --git a/src/Components/FormationMaterialDescription.js b/src/Components/FormationMaterialDescription.js
index 1ff56731..a1ef5c3a 100644
--- a/src/Components/FormationMaterialDescription.js
+++ b/src/Components/FormationMaterialDescription.js
@@ -21,87 +21,84 @@ export default function FormationMaterialDescription(props) {
const colecao_obj = props.colecao_obj;
const topico_obj = props.topico_obj;
- return (
+ return (
<WrappingCard>
<Grid container
direction="row"
justify="flex-start"
alignItems="center"
>
- <Grid item xs={9}>
- <HeightAdjustment>
+ <Grid item xs={12} md={8}>
<TextContainer>
<Title>
- { colecao ?
- "Sobre o Material"
- : "Resumo do "+props.colecao_obj.topic_name.slice(0, -1)
+ {colecao ?
+ "Sobre o Material"
+ : "Resumo do " + props.colecao_obj.topic_name.slice(0, -1)
}
</Title>
<Description>
- { colecao ?
+ {colecao ?
colecao_obj.description
: topico_obj.description
}
</Description>
- { colecao ?
- <SubTitle>Histórico do Curso</SubTitle>
- : <Strong>Autoria (autores):</Strong>
- }
+ {colecao ?
+ <SubTitle>Histórico do Curso</SubTitle>
+ : <Strong>Autoria (autores):</Strong>
+ }
<Description>
- { colecao ?
+ {colecao ?
colecao_obj.historic
: topico_obj.author
}
</Description>
</TextContainer>
- </HeightAdjustment>
</Grid>
- <Grid item xs={3}>
- <HeightAdjustment>
+ <Grid item xs={12} md={3}>
<IconList>
<IconItem>
- <LibraryBooksIcon/>
+ <LibraryBooksIcon />
<Strong>Tipo de recurso: </Strong>
Material de Formação
- <br/>
+ <br />
</IconItem>
<IconItem>
- <MoveToInboxIcon/>
+ <MoveToInboxIcon />
<Strong>Ano de publicação: </Strong>
- { colecao ?
+ {colecao ?
colecao_obj.created_at.split('-')[0]
: topico_obj.created_at.split('-')[0]
}
- <br/>
+ <br />
</IconItem>
- { [0, 1, 2].map(i => {
- const content = colecao ?
- (colecao_obj.language[i] ?
- colecao_obj.language[i].name
- : '')
- : (topico_obj.language[i] ?
- topico_obj.language[i].name
- : '')
- return (
- <IconItem>
- <TranslateIcon/>
- <Strong>Idioma: </Strong>
- { content }
- <br/>
- </IconItem>
- );
- })}
+ {[0, 1, 2].map(i => {
+ const content = colecao ?
+ (colecao_obj.language[i] ?
+ colecao_obj.language[i].name
+ : '')
+ : (topico_obj.language[i] ?
+ topico_obj.language[i].name
+ : '')
+ return (
+ <IconItem>
+ <TranslateIcon />
+ <Strong>Idioma: </Strong>
+ {content}
+ <br />
+ </IconItem>
+ );
+ })}
<IconItem>
- <Strong>{ colecao ? "Criado" : "Enviado" } por:</Strong>
- <br/>
+ <Strong>{colecao ? "Criado" : "Enviado"} por:</Strong>
+ <br />
<StyledAnchor href={colecao_obj.developedurl}>
{
- colecao_obj.id === 3 ? <LongUserIcon src={require("../img/logo_parceiros/ic_peninsula.png")} />
- : <div>
- <UserIcon src={require("../img/logo_parceiros/ic_nute.png")}/>
+ colecao_obj.id === 3 ? <LongUserIcon src={require("../img/logo_parceiros/ic_peninsula.png")} />
+ : <div>
+ <UserIcon src={require("../img/logo_parceiros/ic_nute.png")} />
<Red>
{colecao_obj.developed}
</Red>
@@ -110,67 +107,78 @@ export default function FormationMaterialDescription(props) {
</StyledAnchor>
</IconItem>
</IconList>
- </HeightAdjustment>
</Grid>
</Grid>
</WrappingCard>
- );
+ );
}
-const Title=styled.h1`
+const Title = styled.h1`
font-weight: 100;
color: rgb(102, 102, 102);
`
-const SubTitle=styled.h3`
+const SubTitle = styled.h3`
font-weight: 900;
padding-top: 10px;
color: rgb(102, 102, 102);
`
-const UserIcon=styled.img`
+const UserIcon = styled.img`
width: 50px;
height: 50px;
border-radius: 100px;
margin: 10px 5px 10px 10px;
`
-const LongUserIcon=styled.img`
+const LongUserIcon = styled.img`
width: 90px;
margin: 10px;
`
-const Description=styled.p`
+const Description = styled.p`
color: #666;
`
-const TextContainer=styled.div`
+const TextContainer = styled.div`
margin: 15px;
height: 100%;
- border-right: solid 1px #e5e5e5;
+ @media screen and (max-width: 768px) {
+ border-bottom: solid 1px #e5e5e5;
+ padding : 0 0 10px 0
+ }
+ @media screen and (max-width: 990px) {
+ border-bottom: solid 1px #e5e5e5;
+ padding : 0 0 10px 0
+ }
+ @media screen and (min-width: 992px) {
+ border-right: solid 1px #e5e5e5;
+ padding : 0 15px 0 0
+
+ }
+ @media screen and (min-width: 1200px) {
+ border-right: solid 1px #e5e5e5;
+ padding : 0 15px 0 0
+ }
`
-const HeightAdjustment=styled.div`
+const HeightAdjustment = styled.div`
height: 450px;
`
-const WrappingCard=styled(Card)`
+const WrappingCard = styled(Card)`
border-radius: 0;
- height: 500px !important;
margin-right : auto;
margin-left : auto;
margin-bottom: 30px;
@media screen and (max-width: 768px) {
width : 100% !important;
- height: 600px !important;
}
@media screen and (min-width: 992px) {
width : 770px;
- height: 600px !important;
}
@media screen and (min-width: 1200px) {
width : 970px !important;
- height: 600px !important;
}
`
-const IconList=styled.div`
- margin-top: 50px;
+const IconList = styled.div`
+ margin: 15px;
`
-const IconItem=styled.span`
+const IconItem = styled.span`
width: 100%;
display: inline-block;
margin-bottom: 15px;
@@ -185,18 +193,15 @@ const IconItem=styled.span`
vertical-align: middle
}
- span {
- margin-left : 2%;
- }
`
-const Strong=styled.span`
+const Strong = styled.span`
font-weight: bold;
color: #666;
`
-const Red=styled.span`
+const Red = styled.span`
color: #e81f4f;
`
-const StyledAnchor=styled.a`
+const StyledAnchor = styled.a`
text-decoration: none !important;
color: inherit !important;
`
diff --git a/src/Components/FormationMaterialHeader.js b/src/Components/FormationMaterialHeader.js
index bf051eb5..0c497723 100644
--- a/src/Components/FormationMaterialHeader.js
+++ b/src/Components/FormationMaterialHeader.js
@@ -4,119 +4,131 @@ import styled from 'styled-components'
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import Button from '@material-ui/core/Button';
+import Chip from '@material-ui/core/Chip';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ '& > *': {
+ margin: theme.spacing(0.5),
+ },
+ },
+}));
+
export default function FormationMaterialHeader(props) {
const colecao = props.colecao;
const colecao_obj = props.colecao_obj;
const topico_obj = props.topico_obj;
+ const classes = useStyles();
+
const get_title = () => {
return colecao ?
- colecao_obj.name
- : (topico_obj.pre_title + topico_obj.title);
+ colecao_obj.name
+ : (topico_obj.pre_title + topico_obj.title);
}
const get_subtitle = () => {
return colecao ?
- colecao_obj.topics.length+' '+colecao_obj.topic_name
- : colecao_obj.name;
+ colecao_obj.topics.length + ' ' + colecao_obj.topic_name
+ : colecao_obj.name;
}
- return (
+ const getThumb = () => {
+ return colecao ?
+ require(`../../public/${colecao_obj.img}`)
+ : require(`../../public/${topico_obj.img}`)
+ }
+
+ return (
<WrappingCard>
- <Grid container
- direction="row"
+ <Grid container
+ direction="row"
+ justify="flex-start"
+ alignItems="stretch"
+ >
+ <Grid item xs={12} lg={5}>
+ <Img src={getThumb()} />
+ </Grid>
+ <Grid item xs={12} lg={7}
+ direction="column"
justify="flex-start"
alignItems="stretch"
+ style={{ padding: "8px 10px" }}
>
- <Grid item xs={5}>
- <Img src={require(`../../public/${colecao_obj.img}`)}/>
+ <Grid item>
+ <Title>{get_title()}</Title>
+ </Grid>
+ <Grid item>
+ <SubTitle>
+ {colecao ?
+ get_subtitle()
+ : <StyledLink to={'/colecao?id=' + colecao_obj.id}>{get_subtitle()}</StyledLink>}
+ </SubTitle>
</Grid>
- <Grid item container xs={7}
- direction="column"
- justify="flex-start"
- alignItems="stretch"
- >
- <Grid item>
- <Title>{get_title()}</Title>
- </Grid>
- <Grid item>
- <SubTitle>
- { colecao ?
- get_subtitle()
- : <StyledLink to={'/colecao?id='+colecao_obj.id}>{get_subtitle()}</StyledLink> }
- </SubTitle>
- </Grid>
- <Grid item>
- <TagList>
- {colecao_obj.tags.map((t) => {
- return (<Badge>{t.name}</Badge>);
- })}
- </TagList>
- </Grid>
- <Grid item>
- { colecao ?
- <Button
- variant="contained"
- color="secondary"
- style={{marginLeft: '15px'}}
- onClick={props.handleClick}
- >
- { props.colecao ? "Ver todos os módulos" : "Iniciar leitura" }
- </Button>
- :
- <StyledLink to={'/iframe-colecao?colecao='+colecao_obj.id+'&topico='+topico_obj.id}>
- <Button
- variant="contained"
- color="secondary"
- style={{marginLeft: '15px'}}
- onClick={props.handleClick}
- >
- { props.colecao ? "Ver todos os módulos" : "Iniciar leitura" }
- </Button>
- </StyledLink>
- }
- </Grid>
+ <Grid item>
+ <ChipsDiv className={classes.root}>
+ {colecao_obj.tags.map((t, index) => {
+ return (<Chip color="default" label={t.name} key={index} style={{ padding: "0.5px" }} />);
+ })}
+ </ChipsDiv>
+ </Grid>
+ <Grid item>
+ {colecao ?
+ <Button
+ variant="contained"
+ color="secondary"
+ style={{ marginLeft: '15px' }}
+ onClick={props.handleClick}
+ >
+ {props.colecao ? "Ver todos os módulos" : "Iniciar leitura"}
+ </Button>
+ :
+ <StyledLink to={'/iframe-colecao?colecao=' + colecao_obj.id + '&topico=' + topico_obj.id}>
+ <Button
+ variant="contained"
+ color="secondary"
+ style={{ marginLeft: '15px', marginTop: '10px' }}
+ onClick={props.handleClick}
+ >
+ {props.colecao ? "Ver todos os módulos" : "Iniciar leitura"}
+ </Button>
+ </StyledLink>
+ }
</Grid>
</Grid>
+ </Grid>
</WrappingCard>
- );
+ );
}
-const Badge=styled.span`
- background-color: #e5e5e5;
- color: #666;
- border-radius: 15px;
- margin-left: 5px;
- padding: 3px 7px;
- line-height: 1.2em;
- font-size: 0.7em;
- display: inline-block;
-`
-const TagList=styled.div`
+const ChipsDiv = styled.div`
margin-bottom: 10px;
width: 100%;
margin-left: 10px;
`
-const Img=styled.img`
- max-width: 100%;
+const Img = styled.img`
+ width: 100%;
+ height: 100%;
+ display: block; /* remove extra space below image */
background-color: #e5e5e5;
- display: inline-block;
`
-const Title=styled.h1`
+const Title = styled.h2`
font-weight: 100;
margin: 15px;
color: rgb(102, 102, 102);
`
-const SubTitle=styled.h3`
- font-weight: 100;
+const SubTitle = styled.h4`
+ font-weight: 50;
margin: 15px;;
margin-top: 0;
color: rgb(102, 102, 102);
`
-export const WrappingCard=styled(Card)`
+export const WrappingCard = styled(Card)`
border-radius: 0;
- height: 250px !important;
margin-right : auto;
margin-left : auto;
margin-bottom: 30px;
@@ -132,7 +144,8 @@ export const WrappingCard=styled(Card)`
width : 970px !important;
}
`
+
const StyledLink = styled(Link)`
text-decoration: none !important;
- color: inherit !important;
+ color: #e81f4f !important;
`
diff --git a/src/Components/TopicFooter.js b/src/Components/TopicFooter.js
index 153ee88b..c6ce8ea4 100644
--- a/src/Components/TopicFooter.js
+++ b/src/Components/TopicFooter.js
@@ -9,7 +9,7 @@ export default function TopicFooter(props) {
<Grid
container
direction="row"
- justify="flex-start"
+ justify="center"
alignItems="center"
>
<Grid item>
@@ -36,7 +36,6 @@ const Container=styled.div`
`
const FormationMaterialImage=styled.img`
width: 300px;
- display: block;
margin-right: 20px;
`
const Text=styled.h2`
diff --git a/src/Components/TopicList.js b/src/Components/TopicList.js
index 71c232cd..e965adad 100644
--- a/src/Components/TopicList.js
+++ b/src/Components/TopicList.js
@@ -19,11 +19,13 @@ export default function TopicList(props) {
<Grid
container
spacing={3}
+ justify="center"
+ alignItems="center"
>
{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} />
+ <TopicCard topic={t} colecao_id={props.colecao_id} />
</Grid>
);
})
--
GitLab