diff --git a/src/Components/ResourceCard.js b/src/Components/ResourceCard.js index 03576afd0ada0fd7794198681c73cda37cdf68b1..8752fe3e145397ecd8dc3971d9f90130f4ca5d9d 100644 --- a/src/Components/ResourceCard.js +++ b/src/Components/ResourceCard.js @@ -25,6 +25,7 @@ import CardActions from "@material-ui/core/CardActions"; import IconButton from "@material-ui/core/IconButton"; import Typography from "@material-ui/core/Typography"; import FavoriteIcon from "@material-ui/icons/Favorite"; +import styled from 'styled-components'; import animacao from "../img/laranja/ANIMACAO_SIMULACAO.jpg"; import apresentacao from "../img/laranja/APRESENTACAO.jpg"; import aplicativo from "../img/laranja/APP.jpg"; @@ -74,7 +75,7 @@ const slideStyle = { const publisherStyle = { color: "white", paddinLeft: "30px", - fontSize: "15px" + fontSize: "15px", }; class ResourceCard extends Component { @@ -86,16 +87,16 @@ class ResourceCard extends Component { userAvatar: null }; } - renderType(type){ - if (!this.state.thumbnail) { - if(!this.props.thumbnail) { - const aux = types.find(function(element){return element.label === type}); - this.setState({thumbnail: aux.thumb}); - } - else{ - this.setState({thumbnail: `${apiDomain}` + this.props.thumbnail}); - } + renderType(type) { + if (!this.state.thumbnail) { + if (!this.props.thumbnail) { + const aux = types.find(function (element) { return element.label === type }); + this.setState({ thumbnail: aux.thumb }); } + else { + this.setState({ thumbnail: `${apiDomain}` + this.props.thumbnail }); + } + } // {/*if (!this.state.thumbnail && !this.props.thumbnail ) { // var aux = types.find(function(element){ return element.label === type}); // this.setState({thumbnail: aux.thumb}); @@ -135,10 +136,10 @@ class ResourceCard extends Component { > <div className={this.state.userStyle}> <img style={slideStyle} src={this.state.userAvatar} alt="Avatar" /> - <Typography style={publisherStyle}> + <StyledPublisher style={publisherStyle}> Enviado por: <br /> {this.props.author} - </Typography> + </StyledPublisher> </div> <img src={this.state.thumbnail} @@ -172,8 +173,8 @@ class ResourceCard extends Component { {this.props.type === "VÃdeo" ? ( <Video style={{ color: "#ff7f00" }} /> ) : ( - <br /> - )} + <br /> + )} <IconButton aria-label="Favoritar" size="small"> <FavoriteIcon /> </IconButton> @@ -194,4 +195,11 @@ class ResourceCard extends Component { } } +const StyledPublisher = styled(Typography)` + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +` + export default ResourceCard;