From d7a8ae6f151ef3f2687e50998101a89ae16f810e Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Tue, 26 Jan 2021 08:54:37 -0300
Subject: [PATCH] Fixed position of the achievements section
---
.../TabPanels/TabPanelStatusEConquistas.js | 275 ++++++++++++++++--
1 file changed, 250 insertions(+), 25 deletions(-)
diff --git a/src/Components/TabPanels/TabPanelStatusEConquistas.js b/src/Components/TabPanels/TabPanelStatusEConquistas.js
index 115752a9..18dbc38b 100644
--- a/src/Components/TabPanels/TabPanelStatusEConquistas.js
+++ b/src/Components/TabPanels/TabPanelStatusEConquistas.js
@@ -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>
- <AchievementsSectionTitle>
- Conquistas
- </AchievementsSectionTitle>
<AchievementsList>
- <Grid container direction="row" justify="space-around" alignItems="center">
+ <AchievementsSectionTitle>
+ Conquistas
+ </AchievementsSectionTitle>
+ <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`
+const AchievementsList = styled.div`
+ display: flex;
+ flex-direction: column
+ flex: 1;
+ justify-content: center;
+ alignItems: center;
`
const CardContainer = styled.div`
`
--
GitLab