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

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