From ca866d21c6ecf607dd31593b1c65a8596ad0c21e Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Thu, 28 Jan 2021 10:15:36 -0300
Subject: [PATCH] Add Paper component
---
src/Components/ExpandedMaterials.js | 85 +++++++++++++++++++++--------
1 file changed, 61 insertions(+), 24 deletions(-)
diff --git a/src/Components/ExpandedMaterials.js b/src/Components/ExpandedMaterials.js
index 96308a6f..3cf9b525 100644
--- a/src/Components/ExpandedMaterials.js
+++ b/src/Components/ExpandedMaterials.js
@@ -1,10 +1,12 @@
import React from 'react';
-import { Typography } from "@material-ui/core";
import { makeStyles } from '@material-ui/core/styles';
import styled from 'styled-components';
import Chip from '@material-ui/core/Chip';
import Grid from '@material-ui/core/Grid';
-import { Container } from "react-grid-system";
+import Button from '@material-ui/core/Button';
+import ExpandedMaterialCard from './ExpandedMaterialCard';
+import Paper from '@material-ui/core/Paper';
+import Library from '@material-ui/icons/LibraryBooks';
const useStyles = makeStyles((theme) => ({
root: {
@@ -21,8 +23,8 @@ const ExpandedMaterial = (props) => {
const classes = useStyles();
return (
- <Container style={{ backgroundColor: "#444444", padding : "20px" }}>
- <Grid container direction="row">
+ <Paper elevation={3} style={{ backgroundColor: "#444444", padding: "20px" }}>
+ <Grid container direction="row" spacing={2}>
<Grid item direction="column" xs={4}>
<Grid item>
<Title variant="body2">
@@ -31,30 +33,63 @@ const ExpandedMaterial = (props) => {
}
</Title>
</Grid>
+ <SizedHeightBox />
<Grid item>
<ChipsDiv className={classes.root}>
{
material.tags.map((tag, index) => {
return (
- <Chip color="default" label={tag.name} key={index} style={{padding : "0.5px"}} />
+ <Chip color="default" label={tag.name} key={index} style={{ padding: "0.5px" }} />
)
})
}
</ChipsDiv>
</Grid>
- <div>
- <DevelopedTypo>
- Desenvolvido por:
- </DevelopedTypo>
- <DevelopedSpan>
+ <SizedHeightBox2 />
+ <Grid item direction="column" style={{ color: '#E5E7E9', fontWeight: "500" }}>
+ <DevelopedByDiv>
{
- material.developed
+ `Desenvolvido por: ${material.developed}`
}
- </DevelopedSpan>
- </div>
+ </DevelopedByDiv>
+ <SizedHeightBox3 />
+ <Button variant="contained" color="secondary">
+ Ver todos
+ </Button>
+ </Grid>
+ </Grid>
+ <Grid item direction="column" xs={8}>
+ <Grid container direction="row" alignItems="center">
+ <Library style={{ color: "White" }} />
+ <SizedWidthBox />
+ <Title>
+ {material.topics.length} módulos
+ </Title>
+ </Grid>
+ <SizedHeightBox />
+ <Grid container direction="row" spacing={3}>
+ {/* <Grid item md={3}>
+ <ExpandedMaterialCard
+ name={material.topics[1].pre_title + material.topics[1].title}
+ thumb={material.topics[1].img}
+ />
+ </Grid> */}
+ {
+ material.topics.map((material, index) => {
+ return (
+ <Grid item key={index} md={4}>
+ <ExpandedMaterialCard
+ name={material.pre_title + material.title}
+ thumb={material.img}
+ />
+ </Grid>
+ )
+ })
+ }
+ </Grid>
</Grid>
</Grid>
- </Container>
+ </Paper>
);
}
@@ -64,21 +99,23 @@ const Title = styled.h3`
padding : 0;
margin : 0;
`
+const DevelopedByDiv = styled.div`
+`
const ChipsDiv = styled.div`
margin-left : -5px;
`
-
-const DevelopedSpan = styled.span`
- color : white;
- opacity : 0.9;
-
+const SizedHeightBox = styled.div`
+ height : 3em;
`
-
-const DevelopedTypo = styled(Typography)`
- color : white;
- font-weight: bold;
+const SizedHeightBox2 = styled.div`
+ height : 2em;
+`
+const SizedHeightBox3 = styled.div`
+ height : 0.5em;
+`
+const SizedWidthBox = styled.div`
+ width : 5px;
`
-
export default ExpandedMaterial;
\ No newline at end of file
--
GitLab