Skip to content
Snippets Groups Projects
Commit d7a8ae6f authored by lfr20's avatar lfr20
Browse files

Fixed position of the achievements section

parent 55bcea22
Branches Gamification
No related tags found
1 merge request!47Merge
Show whitespace changes
Inline Side-by-side
src/Components/TabPanels/TabPanelStatusEConquistas.js
+ 250
− 25
View file @ d7a8ae6f
......@@ -15,51 +15,271 @@ import { Grid } from '@material-ui/core'
export default function TabPanelStatusEConquistas(props) {
const [achievements, setAchievements] = useState([
{
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [
{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 5,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 5
},
]
},
{
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name : "yep!",
description : "yep!"
}]
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 5
},
]
},
{
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name : "yep!",
description : "yep!"
}]
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
},
{
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name : "yep!",
description : "yep!"
}]
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
},
{
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name : "yep!",
description : "yep!"
}]
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
},
{
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name : "yep!",
description : "yep!"
}]
}
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, {
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, {
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, {
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, {
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, {
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, {
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, {
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, {
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, {
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
},
]);
const [level, setLevel] = useState(0);
const [xp, setXP] = useState(0);
......@@ -98,15 +318,15 @@ export default function TabPanelStatusEConquistas(props) {
</Paper>
</ContainerDivStyled>
<AchievementsContainer>
<AchievementsList>
<AchievementsSectionTitle>
Conquistas
</AchievementsSectionTitle>
<AchievementsList>
<Grid container direction="row" justify="space-around" alignItems="center">
<Grid container direction="row" justify="center" alignItems="center" spacing={4} xs={12}>
{achievements.map(
(a) => {
(a, index) => {
return (
<Grid item xs={12} md={5}>
<Grid item key={index}>
<AchievementDescriptionCard
name={a.title}
description={a.description}
......@@ -129,12 +349,17 @@ const AchievementsSectionTitle = styled.h1`
`
const AchievementsContainer = styled.div`
max-width : 1140px;
margin-left : auto;
margin-right : auto;
margin-bottom: 30px;
margin-top: 70px;
margin-left : auto;
margin-right : auto;
`
const AchievementsList = styled.div`
display: flex;
flex-direction: column
flex: 1;
justify-content: center;
alignItems: center;
`
const CardContainer = styled.div`
`
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment