Skip to content
Snippets Groups Projects
Commit 5f64506e authored by Henrique Varella Ehrenfried's avatar Henrique Varella Ehrenfried :speech_balloon:
Browse files

Merge branch 'TrainingMaterials' into Fix_Console_Error

parents b721d329 e1603184
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,!27Training materials
Hide whitespace changes
Inline Side-by-side
src/Components/AreasSubPages.js
+ 58
− 13
View file @ 5f64506e
......@@ -29,6 +29,10 @@ import materiais from "../img/ilustra_materiais.png";
import colecoes from "../img/ilustra_colecoes.png";
import ResourceCardFunction from "./ResourceCardFunction.js";
import CollectionCardFunction from "./CollectionCardFunction.js";
import colecoes_obj from './FormationMaterialsResources/formationMaterials';
import ExpandedMaterial from './ExpandedMaterials';
const materials = colecoes_obj();
class ReqResources extends Component {
constructor(props) {
......@@ -164,6 +168,16 @@ class ReqCollections extends Component {
}
class SubPages extends Component {
constructor(props) {
super(props);
this.state = {
currMaterial: {
open: false,
material: {}
},
};
}
areaRender() {
switch (this.props.banner) {
case "Recursos":
......@@ -206,6 +220,25 @@ class SubPages extends Component {
</React.Fragment>
);
case "Materiais":
const HandleExpandMaterial = (id) => {
if (id !== this.state.currMaterial.material.id)
this.setState({
currMaterial: {
open: true,
material: { ...materials[id] }
}
})
else
this.setState({
currMaterial: {
open: false,
material: {}
}
})
}
return (
<React.Fragment>
<div style={{ backgroundColor: "#e81f4f", position:"relative" }}>
......@@ -243,22 +276,32 @@ class SubPages extends Component {
showStatus={false}
>
<Row>
<Col md={3}>
<MaterialCard name="oioi" />
</Col>
<Col md={3}>
<MaterialCard name="oioi" />
</Col>
<Col md={3}>
<MaterialCard name="oioi" />
</Col>
<Col md={3}>
<MaterialCard name="oioi" />
</Col>
{
materials.map((material, index) => {
return (
<Col md={3} key={index}>
<MaterialCard
name={material.name}
thumb={material.img}
score={material.score}
modules={material.topics}
handleExpand={HandleExpandMaterial}
id={index}
/>
</Col>
)
})
}
</Row>
</Carousel>
{
this.state.currMaterial.open ?
<ExpandedMaterial material={this.state.currMaterial.material} />
:
null
}
</Container>
</React.Fragment>
</React.Fragment >
);
case "Colecoes":
return (
......@@ -302,4 +345,6 @@ class SubPages extends Component {
return <div>{this.areaRender()}</div>;
}
}
export default SubPages;
src/Components/ExpandedMaterialCard.js 0 → 100644
+ 67
− 0
View file @ 5f64506e
/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana
This file is part of Plataforma Integrada MEC.
Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, { useState } from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
import Typography from '@material-ui/core/Typography';
import styled from 'styled-components';
import Button from '@material-ui/core/Button';
import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
import ExpandLessRoundedIcon from '@material-ui/icons/ExpandLessRounded';
export default function MaterialCard(props) {
const [expanded, setExpanded] = useState(false);
const thumb = require(`../../public/${props.thumb}`)
return (
<Card>
<img style={{maxHeight : "100%", maxWidth:"100%"}} src={thumb} alt="thumbnail do recurso" />
<CardContent style={{ height: "50px"}}>
<Title>
{props.name}
</Title>
</CardContent>
<CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
<Button
color="secondary"
endIcon={expanded ? <ExpandLessRoundedIcon /> : <ExpandMoreRoundedIcon />}
>
Ver módulos
</Button>
</CardActions>
</Card >
)
}
const SizedBox = styled.div`
width : 5px;
`
const Title = styled(Typography)`
text-overflow: ellipsis;
overflow: hidden;
margin-bottom: 10px;
font-size: 1.2em;
line-height: 1.1;
max-height: 46px;
color: #666;
`
\ No newline at end of file
src/Components/ExpandedMaterials.js 0 → 100644
+ 121
− 0
View file @ 5f64506e
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import styled from 'styled-components';
import Chip from '@material-ui/core/Chip';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import ExpandedMaterialCard from './ExpandedMaterialCard';
import Paper from '@material-ui/core/Paper';
import Library from '@material-ui/icons/LibraryBooks';
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
flexWrap: 'wrap',
'& > *': {
margin: theme.spacing(0.5),
},
},
}));
const ExpandedMaterial = (props) => {
const material = { ...props.material };
const classes = useStyles();
return (
<Paper elevation={3} style={{ backgroundColor: "#444444", padding: "20px" }}>
<Grid container direction="row" spacing={2}>
<Grid item direction="column" xs={4}>
<Grid item>
<Title variant="body2">
{
material.name
}
</Title>
</Grid>
<SizedHeightBox />
<Grid item>
<ChipsDiv className={classes.root}>
{
material.tags.map((tag, index) => {
return (
<Chip color="default" label={tag.name} key={index} style={{ padding: "0.5px" }} />
)
})
}
</ChipsDiv>
</Grid>
<SizedHeightBox2 />
<Grid item direction="column" style={{ color: '#E5E7E9', fontWeight: "500" }}>
<DevelopedByDiv>
{
`Desenvolvido por: ${material.developed}`
}
</DevelopedByDiv>
<SizedHeightBox3 />
<Button variant="contained" color="secondary">
Ver todos
</Button>
</Grid>
</Grid>
<Grid item direction="column" xs={8}>
<Grid container direction="row" alignItems="center">
<Library style={{ color: "White" }} />
<SizedWidthBox />
<Title>
{material.topics.length} módulos
</Title>
</Grid>
<SizedHeightBox />
<Grid container direction="row" spacing={3}>
{/* <Grid item md={3}>
<ExpandedMaterialCard
name={material.topics[1].pre_title + material.topics[1].title}
thumb={material.topics[1].img}
/>
</Grid> */}
{
material.topics.map((material, index) => {
return (
<Grid item key={index} md={4}>
<ExpandedMaterialCard
name={material.pre_title + material.title}
thumb={material.img}
/>
</Grid>
)
})
}
</Grid>
</Grid>
</Grid>
</Paper>
);
}
const Title = styled.h3`
color: White;
font-weight: 500;
padding : 0;
margin : 0;
`
const DevelopedByDiv = styled.div`
`
const ChipsDiv = styled.div`
margin-left : -5px;
`
const SizedHeightBox = styled.div`
height : 3em;
`
const SizedHeightBox2 = styled.div`
height : 2em;
`
const SizedHeightBox3 = styled.div`
height : 0.5em;
`
const SizedWidthBox = styled.div`
width : 5px;
`
export default ExpandedMaterial;
\ No newline at end of file
src/Components/MaterialCard.js
+ 68
− 30
View file @ 5f64506e
......@@ -16,40 +16,78 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, {Component} from 'react';
import React, {useState} from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
import Typography from '@material-ui/core/Typography';
import livro from "../img/laranja/LIVRO_DIGITAL.jpg";
import Library from '@material-ui/icons/LibraryBooks';
import Rating from '@material-ui/lab/Rating';
import StarBorderIcon from '@material-ui/icons/StarBorder';
import Grid from '@material-ui/core/Grid';
import styled from 'styled-components';
import Button from '@material-ui/core/Button';
import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
import ExpandLessRoundedIcon from '@material-ui/icons/ExpandLessRounded';
export default function MaterialCard(props) {
class MaterialCard extends Component {
constructor(props) {
super(props);
this.state={
thumbnail: livro,
};
}
render(){
return (
<Card>
<img src={this.state.thumbnail} alt="thumbnail do recurso"/>
<CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}>
<Typography variant="body2" color="textSecondary" component="p" style={{overflow: "hidden", fontSize: "0.8em"}}>
{this.props.name}
</Typography>
</CardContent>
<CardActions style={{justifyContent: "space-between"}}>
<Library style={{color:"#e81f4f"}} />
</CardActions>
<CardActions style={{borderTop:"1px solid #e5e5e5", justifyContent: "space-between"}}>
<Typography>Expandir??</Typography>
</CardActions>
</Card>
);}
}
export default MaterialCard;
const [expanded, setExpanded] = useState(false);
const thumb = require(`../../public/${props.thumb}`)
return (
<Card>
<img src={thumb} alt="thumbnail do recurso" />
<CardContent style={{ height: "60px", textAlign: "left", paddingBottom: "0px", width: "100%" }}>
<Title>
{props.name}
</Title>
</CardContent>
<CardActions>
<Grid container direction="column" justify="flex-start" alignItems="flex-start" style={{ marginLeft: "5px" }}>
<Grid item>
<Rating
name="customized-empty"
value={props.score}
precision={0.5}
style={{ color: "#666" }}
emptyIcon={<StarBorderIcon fontSize="inherit" />}
readOnly
/>
</Grid>
<Grid container direction="row" alignItems="center">
<Library style={{ color: "#e81f4f" }} />
<SizedBox />
<Typography variant="body2" color="textSecondary" component="p" style={{ overflow: "hidden", fontSize: "0.8em" }}>
{props.modules.length} módulos
</Typography>
</Grid>
</Grid>
</CardActions>
<CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
<Button
color="secondary"
endIcon={expanded ? <ExpandLessRoundedIcon/> : <ExpandMoreRoundedIcon/>}
onClick={() => props.handleExpand(props.id)}
>
Ver módulos
</Button>
</CardActions>
</Card >
)
}
const SizedBox = styled.div`
width : 5px;
`
const Title = styled(Typography)`
text-overflow: ellipsis;
overflow: hidden;
margin-bottom: 10px;
font-size: 1.2em;
line-height: 1.1;
max-height: 46px;
color: #666;
`
\ No newline at end of file
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