From a3aea29822dd13a4435d9ac6ea97d70988a05c2c Mon Sep 17 00:00:00 2001
From: Romain CREY <ext.sopra.rcrey@grandlyon.com>
Date: Wed, 20 May 2020 10:19:00 +0200
Subject: [PATCH] fix: finished challenge badge
---
.../AvailableChallengeDetailsViewContainer.tsx | 2 +-
.../FinishedChallengeDetailsViewContainer.tsx | 14 ++------------
src/services/challengeDataMapperService.ts | 2 ++
src/styles/components/_challenges.scss | 12 +++++++-----
4 files changed, 12 insertions(+), 18 deletions(-)
diff --git a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
index 8fa48dc83..6197d6774 100644
--- a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
@@ -96,7 +96,7 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
<>
<div className="cp-root --available">
<div className="cp-content">
- <div className="cp-info">
+ <div className="cp-info --available">
<div className="cp-title text-22-bold">{challenge.title}</div>
<StyledIconButton
className="cp-icon"
diff --git a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
index 008240a92..5f4af50a6 100644
--- a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
@@ -110,27 +110,17 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
</div>
)
) : null}
- {/* <StyledIconButton
- className="cp-icon"
- icon={badgeIcon ? badgeIcon : DefaultChallengeIcon}
- size={screenType === ScreenType.MOBILE ? 200 : 350}
- /> */}
- {/* <StyledIcon
- className="cm-win-star"
- icon={StarIcon}
- size={300}
- /> */}
<div className="cp-win-badge-star">
<StyledIcon
className="cp-win-badge"
icon={badgeIcon ? badgeIcon : DefaultChallengeIcon}
- size={screenType === ScreenType.MOBILE ? 180 : 200}
+ size={screenType === ScreenType.MOBILE ? 150 : 200}
/>
{challenge.badge === 1 ? (
<StyledIcon
className="cp-win-star"
icon={StarIcon}
- size={300}
+ size={screenType === ScreenType.MOBILE ? 220 : 300}
/>
) : null}
</div>
diff --git a/src/services/challengeDataMapperService.ts b/src/services/challengeDataMapperService.ts
index 7cc4770d3..198957092 100644
--- a/src/services/challengeDataMapperService.ts
+++ b/src/services/challengeDataMapperService.ts
@@ -166,6 +166,7 @@ export default class ChallengeDataMapper {
completeAvailableEcogestures.push(unfilteredEcogestures[0])
}
}
+ // --> fluid dependancy for challenge
// let filteredAvailableEcogestures = completeAvailableEcogestures.filter(
// eg =>
@@ -174,6 +175,7 @@ export default class ChallengeDataMapper {
// fluidTypes.includes(eg.fluidTypes[1]) ||
// fluidTypes.includes(eg.fluidTypes[2]))
// )
+
let filteredAvailableEcogestures = completeAvailableEcogestures
const fluidFilteredEcogestures = [...new Set(filteredAvailableEcogestures)]
diff --git a/src/styles/components/_challenges.scss b/src/styles/components/_challenges.scss
index 1a99a96a6..0a2815637 100644
--- a/src/styles/components/_challenges.scss
+++ b/src/styles/components/_challenges.scss
@@ -368,13 +368,14 @@
align-items: center;
flex-direction: column;
color: $text-bright;
- height: 84vh;
+ min-height: 84vh;
justify-content: space-between;
&.--locked {
@extend .cp-content;
justify-content: center;
}
+
.cp-info {
display: flex;
flex-direction: column;
@@ -382,9 +383,12 @@
justify-content: space-between;
background-color: $dark-light-2;
width: 100%;
- height: 60%;
- padding-top: 2rem;
+ padding-top: 1rem;
padding-bottom: 0.5rem;
+ &.--available {
+ @extend .cp-info;
+ height: 74vh;
+ }
.cp-icon {
margin-bottom: 1rem;
}
@@ -395,8 +399,6 @@
display: grid;
align-items: center;
justify-items: center;
- position: absolute;
- top: 222px;
.cp-win-badge {
grid-column: 1;
grid-row: 1;
--
GitLab