From 11d2300d43c4be03c5659f34f8f3f0723b84bde4 Mon Sep 17 00:00:00 2001
From: gcarron <gcarron@grandlyon.com>
Date: Mon, 7 Dec 2020 17:32:12 +0100
Subject: [PATCH] Add autoSlide to current challenge + fix css
---
src/components/Season/SeasonCardOnGoing.tsx | 2 +-
src/components/Season/SeasonCardUnlocked.tsx | 2 +-
src/components/Season/SeasonView.tsx | 24 ++++++++++++++++++-
src/components/Season/seasonCard.scss | 1 -
src/components/Season/seasonCardLocked.scss | 1 +
src/components/Season/seasonCardUnlocked.scss | 23 +++++++++++++-----
6 files changed, 43 insertions(+), 10 deletions(-)
diff --git a/src/components/Season/SeasonCardOnGoing.tsx b/src/components/Season/SeasonCardOnGoing.tsx
index 9a3d635a1..9e68d0cad 100644
--- a/src/components/Season/SeasonCardOnGoing.tsx
+++ b/src/components/Season/SeasonCardOnGoing.tsx
@@ -153,7 +153,7 @@ const SeasonCardOnGoing: React.FC<SeasonCardOnGoingProps> = ({
<StyledIcon className="duelLocked" icon={duelLocked} size={60} />
</div>
)}
- <button onClick={resetProgress}>Reset stars</button>
+ {/* <button onClick={resetProgress}>Reset stars</button> */}
</div>
)
}
diff --git a/src/components/Season/SeasonCardUnlocked.tsx b/src/components/Season/SeasonCardUnlocked.tsx
index 15d46080d..10897e912 100644
--- a/src/components/Season/SeasonCardUnlocked.tsx
+++ b/src/components/Season/SeasonCardUnlocked.tsx
@@ -52,7 +52,7 @@ const SeasonCardUnlocked: React.FC<SeasonCardUnlockedProps> = ({
return (
<>
- <div className="cardContent">
+ <div className="cardContent cardUnlocked">
<p className="title">{t('season.card.title')}</p>
<span className="seasonTitle">{userSeason.title}</span>
<StyledIcon className="seasonIcon" icon={seasonIcon} />
diff --git a/src/components/Season/SeasonView.tsx b/src/components/Season/SeasonView.tsx
index 560b50d61..7a6a544d9 100644
--- a/src/components/Season/SeasonView.tsx
+++ b/src/components/Season/SeasonView.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
import './seasonView.scss'
import { useSelector } from 'react-redux'
import { EcolyoState } from 'store'
@@ -9,6 +9,8 @@ import SeasonCard from './SeasonCard'
import StyledIconbutton from 'components/CommonKit/IconButton/StyledIconButton'
import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
+import { UserSeasonState } from 'enum/userSeason.enum'
+import { indexOf } from 'lodash'
const SeasonView: React.FC = () => {
const { userSeasonList } = useSelector((state: EcolyoState) => state.season)
@@ -24,6 +26,7 @@ const SeasonView: React.FC = () => {
const [touchStart, setTouchStart] = useState<number>()
const [touchEnd, setTouchEnd] = useState<number>()
const [index, setindex] = useState<number>(0)
+ const [lastSeasonIndex, setlastSeasonIndex] = useState<number>(0)
const [containerTranslation, setcontainerTranslation] = useState<number>(
marginPx
)
@@ -93,6 +96,25 @@ const SeasonView: React.FC = () => {
if (e.nativeEvent instanceof MouseEvent) setTouchEnd(e.clientX)
}
+ useEffect(() => {
+ userSeasonList.map((season, i) => {
+ if (
+ season.state === UserSeasonState.UNLOCKED ||
+ season.state === UserSeasonState.ONGOING
+ ) {
+ setlastSeasonIndex(i)
+ if (lastSeasonIndex === 1) {
+ setcontainerTranslation(0 - cardWitdh * lastSeasonIndex)
+ } else {
+ setcontainerTranslation(
+ 0 - cardWitdh * lastSeasonIndex - marginPx * 1.2
+ )
+ }
+ setindex(i)
+ }
+ })
+ }, [userSeasonList, lastSeasonIndex, cardWitdh])
+
return (
<>
<CozyBar titleKey={'COMMON.APP_CHALLENGE_TITLE'} />
diff --git a/src/components/Season/seasonCard.scss b/src/components/Season/seasonCard.scss
index f151bfa43..1b48f50c5 100644
--- a/src/components/Season/seasonCard.scss
+++ b/src/components/Season/seasonCard.scss
@@ -10,7 +10,6 @@
color: white;
display: flex;
flex-direction: column;
- filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.55));
transform: scale(0.9);
&.active {
transform: scale(1.08);
diff --git a/src/components/Season/seasonCardLocked.scss b/src/components/Season/seasonCardLocked.scss
index 1f8d1f0e2..c08f7b2b2 100644
--- a/src/components/Season/seasonCardLocked.scss
+++ b/src/components/Season/seasonCardLocked.scss
@@ -2,6 +2,7 @@
@import '../../styles/base/color';
.cardLocked {
+ filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.55));
.seasonIcon {
@media all and(max-height: 700px) {
width: 70%;
diff --git a/src/components/Season/seasonCardUnlocked.scss b/src/components/Season/seasonCardUnlocked.scss
index 84a149912..82c912577 100644
--- a/src/components/Season/seasonCardUnlocked.scss
+++ b/src/components/Season/seasonCardUnlocked.scss
@@ -4,10 +4,21 @@
width: 100%;
height: 100%;
}
-.launchButton {
- width: fit-content !important;
- margin: auto !important;
- text-align: center;
- display: block !important;
- padding: 1rem 2rem !important;
+
+.cardUnlocked {
+ filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.55));
+
+ .launchButton {
+ width: fit-content !important;
+ margin: auto !important;
+ text-align: center;
+ display: block !important;
+ padding: 1rem 1.5rem !important;
+ }
+ .seasonIcon {
+ @media all and(max-height: 700px) {
+ width: 80%;
+ margin: auto;
+ }
+ }
}
--
GitLab