Add a function to decide if it will to display expanded material component

src/Components/MaterialCard.js

@@ -28,6 +28,7 @@ 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) {
 
@@ -37,6 +38,9 @@ export default function MaterialCard(props) {
         props.handleExpand(props.id);
     }
 
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+
     return (
         <Card>
             <img src={thumb} alt="thumbnail do recurso" />
@@ -67,6 +71,18 @@ export default function MaterialCard(props) {
                 </Grid>
             </CardActions>
             <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
+                {
+                    width <= 767 ?
+                        <StyledLink to={`/colecao?colecao=${props.id}`}>
+                            <Button
+                                color="secondary"
+                                endIcon={<ExpandMoreRoundedIcon />}
+                            >
+
+                                Ver módulos
+                            </Button>
+                        </StyledLink>
+                        :
                         <Button
                             color="secondary"
                             endIcon={<ExpandMoreRoundedIcon />}
@@ -75,6 +91,7 @@ export default function MaterialCard(props) {
 
                             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