Skip to content
Snippets Groups Projects
Commit f8990a52 authored by lfr20's avatar lfr20
Browse files

Fixed responsviness and aligment

parent d2c2af1c
No related branches found
No related tags found
6 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!39Update admin system,!32Homologa,!31Fix console error,!28Training materials
Hide whitespace changes
Inline Side-by-side
src/Components/FormationMaterialDescription.js
+ 71
− 66
View file @ f8990a52
......@@ -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;
`
src/Components/FormationMaterialHeader.js
+ 88
− 75
View file @ f8990a52
......@@ -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;
`
src/Components/TopicFooter.js
+ 1
− 2
View file @ f8990a52
......@@ -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`
......
src/Components/TopicList.js
+ 3
− 1
View file @ f8990a52
......@@ -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>
);
})
......
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