diff --git a/src/Components/MaterialCard.js b/src/Components/MaterialCard.js index 18c37b4d4cad65e798a61f9c3926f60126e8c4a5..a79236b91e994e5f45bc502620ebd44b189afd36 100644 --- a/src/Components/MaterialCard.js +++ b/src/Components/MaterialCard.js @@ -16,7 +16,7 @@ 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 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'; @@ -28,15 +28,19 @@ 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 {Link} from 'react-router-dom'; export default function MaterialCard(props) { const thumb = require(`../../public/${props.thumb}`) const HandleButtonPressed = () => { - props.handleExpand(props.id); + props.handleExpand(props.id); } + const width = window.innerWidth; + const height = window.innerHeight; + return ( <Card> <img src={thumb} alt="thumbnail do recurso" /> @@ -67,14 +71,27 @@ export default function MaterialCard(props) { </Grid> </CardActions> <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}> - <Button - color="secondary" - endIcon={<ExpandMoreRoundedIcon/>} - onClick={HandleButtonPressed} - > - - Ver módulos - </Button> + { + width <= 767 ? + <StyledLink to={`/colecao?colecao=${props.id}`}> + <Button + color="secondary" + endIcon={<ExpandMoreRoundedIcon />} + > + + Ver módulos + </Button> + </StyledLink> + : + <Button + color="secondary" + endIcon={<ExpandMoreRoundedIcon />} + onClick={HandleButtonPressed} + > + + Ver módulos + </Button> + } </CardActions> </Card > ) @@ -84,11 +101,18 @@ const SizedBox = styled.div` width : 5px; ` const Title = styled(Typography)` - text-overflow: ellipsis; + font-weight: 500; + color: rgb(102, 102, 102); + font-size: 0.9em; + margin-left: 10px; + margin-right: 10px; + + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; overflow: hidden; - margin-bottom: 10px; - font-size: 1.2em; - line-height: 1.1; - max-height: 46px; - color: #666; +` +const StyledLink = styled(Link)` + text-decoration: none ; + color: inherit ; ` \ No newline at end of file