From ecd08e9410573694482b5a75efa59d268823a917 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Mon, 1 Feb 2021 12:15:26 -0300
Subject: [PATCH] Add a function to decide if it will to display expanded
material component
---
src/Components/MaterialCard.js | 56 ++++++++++++++++++++++++----------
1 file changed, 40 insertions(+), 16 deletions(-)
diff --git a/src/Components/MaterialCard.js b/src/Components/MaterialCard.js
index 18c37b4d..a79236b9 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
--
GitLab