From 57a15b35b5d59c70bd601c06a38ad5687d3336d7 Mon Sep 17 00:00:00 2001
From: gcarron <gcarron@grandlyon.com>
Date: Tue, 1 Dec 2020 14:31:26 +0100
Subject: [PATCH] Improve mobile adaptation for cards + change stylesheet
---
src/components/Routes/Routes.tsx | 2 +-
.../{Seasons => Season}/SeasonCard.tsx | 18 +++++++++++++++---
.../{Seasons => Season}/SeasonCardBoss.tsx | 2 +-
.../{Seasons => Season}/SeasonCardDone.tsx | 2 +-
.../{Seasons => Season}/SeasonCardLocked.tsx | 2 +-
.../{Seasons => Season}/SeasonCardOnGoing.tsx | 2 +-
.../{Seasons => Season}/SeasonCardUnlocked.tsx | 2 +-
.../{Seasons => Season}/SeasonView.spec.tsx | 2 +-
.../{Seasons => Season}/SeasonView.tsx | 8 +++++---
.../__snapshots__/SeasonView.spec.tsx.snap | 0
.../_Seasons.scss => Season/season.scss} | 4 ++--
11 files changed, 29 insertions(+), 15 deletions(-)
rename src/components/{Seasons => Season}/SeasonCard.tsx (78%)
rename src/components/{Seasons => Season}/SeasonCardBoss.tsx (90%)
rename src/components/{Seasons => Season}/SeasonCardDone.tsx (90%)
rename src/components/{Seasons => Season}/SeasonCardLocked.tsx (90%)
rename src/components/{Seasons => Season}/SeasonCardOnGoing.tsx (90%)
rename src/components/{Seasons => Season}/SeasonCardUnlocked.tsx (94%)
rename src/components/{Seasons => Season}/SeasonView.spec.tsx (93%)
rename src/components/{Seasons => Season}/SeasonView.tsx (96%)
rename src/components/{Seasons => Season}/__snapshots__/SeasonView.spec.tsx.snap (100%)
rename src/components/{Seasons/_Seasons.scss => Season/season.scss} (96%)
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index ec47e91cc..51c5898a4 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -1,7 +1,7 @@
import React, { Suspense, lazy } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import { FluidType } from 'enum/fluid.enum'
-import SeasonView from 'components/Seasons/SeasonView'
+import SeasonView from 'components/Season/SeasonView'
const HomeView = lazy(() => import('components/Home/HomeView'))
const SingleFluidView = lazy(() =>
diff --git a/src/components/Seasons/SeasonCard.tsx b/src/components/Season/SeasonCard.tsx
similarity index 78%
rename from src/components/Seasons/SeasonCard.tsx
rename to src/components/Season/SeasonCard.tsx
index f864c2263..53dc0d658 100644
--- a/src/components/Seasons/SeasonCard.tsx
+++ b/src/components/Season/SeasonCard.tsx
@@ -6,14 +6,20 @@ import SeasonCardDone from './SeasonCardDone'
import SeasonCardLocked from './SeasonCardLocked'
import SeasonCardOnGoing from './SeasonCardOnGoing'
import SeasonCardUnlocked from './SeasonCardUnlocked'
-import './_Seasons.scss'
+import './season.scss'
interface SeasonCardProps {
season: UserSeason
indexSlider: number
index: number
+ cardWitdh: number
}
-const SeasonCard = ({ season, indexSlider, index }: SeasonCardProps) => {
+const SeasonCard = ({
+ season,
+ indexSlider,
+ index,
+ cardWitdh,
+}: SeasonCardProps) => {
const renderCard = () => {
if (season.state) {
switch (season.state) {
@@ -33,7 +39,13 @@ const SeasonCard = ({ season, indexSlider, index }: SeasonCardProps) => {
}
}
return (
- <div className={indexSlider === index ? 'slide active' : 'slide'}>
+ <div
+ className={indexSlider === index ? 'slide active' : 'slide'}
+ style={{
+ minWidth: `${cardWitdh}px`,
+ maxWidth: `${cardWitdh}px`,
+ }}
+ >
{renderCard()}
</div>
)
diff --git a/src/components/Seasons/SeasonCardBoss.tsx b/src/components/Season/SeasonCardBoss.tsx
similarity index 90%
rename from src/components/Seasons/SeasonCardBoss.tsx
rename to src/components/Season/SeasonCardBoss.tsx
index 6d56655e7..bd5a764a2 100644
--- a/src/components/Seasons/SeasonCardBoss.tsx
+++ b/src/components/Season/SeasonCardBoss.tsx
@@ -1,6 +1,6 @@
import { UserSeason } from 'models'
import React from 'react'
-import './_Seasons.scss'
+import './season.scss'
interface SeasonCardBossProps {
season: UserSeason
diff --git a/src/components/Seasons/SeasonCardDone.tsx b/src/components/Season/SeasonCardDone.tsx
similarity index 90%
rename from src/components/Seasons/SeasonCardDone.tsx
rename to src/components/Season/SeasonCardDone.tsx
index 1ec53520e..d3f531e50 100644
--- a/src/components/Seasons/SeasonCardDone.tsx
+++ b/src/components/Season/SeasonCardDone.tsx
@@ -1,6 +1,6 @@
import { UserSeason } from 'models'
import React from 'react'
-import './_Seasons.scss'
+import './season.scss'
interface SeasonCardDoneProps {
season: UserSeason
diff --git a/src/components/Seasons/SeasonCardLocked.tsx b/src/components/Season/SeasonCardLocked.tsx
similarity index 90%
rename from src/components/Seasons/SeasonCardLocked.tsx
rename to src/components/Season/SeasonCardLocked.tsx
index 1fd7f3c32..f58d567fc 100644
--- a/src/components/Seasons/SeasonCardLocked.tsx
+++ b/src/components/Season/SeasonCardLocked.tsx
@@ -1,6 +1,6 @@
import { UserSeason } from 'models'
import React from 'react'
-import './_Seasons.scss'
+import './season.scss'
interface SeasonCardLockedProps {
season: UserSeason
diff --git a/src/components/Seasons/SeasonCardOnGoing.tsx b/src/components/Season/SeasonCardOnGoing.tsx
similarity index 90%
rename from src/components/Seasons/SeasonCardOnGoing.tsx
rename to src/components/Season/SeasonCardOnGoing.tsx
index 3b79400ec..52c707b5b 100644
--- a/src/components/Seasons/SeasonCardOnGoing.tsx
+++ b/src/components/Season/SeasonCardOnGoing.tsx
@@ -1,6 +1,6 @@
import { UserSeason } from 'models'
import React from 'react'
-import './_Seasons.scss'
+import './season.scss'
interface SeasonCardOnGoingProps {
season: UserSeason
diff --git a/src/components/Seasons/SeasonCardUnlocked.tsx b/src/components/Season/SeasonCardUnlocked.tsx
similarity index 94%
rename from src/components/Seasons/SeasonCardUnlocked.tsx
rename to src/components/Season/SeasonCardUnlocked.tsx
index 02d1ae79c..e66040d9a 100644
--- a/src/components/Seasons/SeasonCardUnlocked.tsx
+++ b/src/components/Season/SeasonCardUnlocked.tsx
@@ -1,6 +1,6 @@
import { UserSeason } from 'models'
import React from 'react'
-import './_Seasons.scss'
+import './season.scss'
interface SeasonCardUnlockedProps {
season: UserSeason
diff --git a/src/components/Seasons/SeasonView.spec.tsx b/src/components/Season/SeasonView.spec.tsx
similarity index 93%
rename from src/components/Seasons/SeasonView.spec.tsx
rename to src/components/Season/SeasonView.spec.tsx
index 30ce0e6e3..023b67c92 100644
--- a/src/components/Seasons/SeasonView.spec.tsx
+++ b/src/components/Season/SeasonView.spec.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import { shallow } from 'enzyme'
-import SeasonView from 'components/Seasons/SeasonView'
+import SeasonView from 'components/Season/SeasonView'
const mockaHandleTouchStart = jest.fn()
const mockaHandleTouchMove = jest.fn()
diff --git a/src/components/Seasons/SeasonView.tsx b/src/components/Season/SeasonView.tsx
similarity index 96%
rename from src/components/Seasons/SeasonView.tsx
rename to src/components/Season/SeasonView.tsx
index 99918c505..6885b5eb7 100644
--- a/src/components/Seasons/SeasonView.tsx
+++ b/src/components/Season/SeasonView.tsx
@@ -6,14 +6,15 @@ import Header from 'components/Header/Header'
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 './_Seasons.scss'
+import './season.scss'
+
import { UserSeason } from 'models'
import { userSeasonMock } from '../../../test/__mocks__/userSeasonData.mock'
const SeasonView: React.FC = () => {
- //TODO automat cardwidth definition in order to fit all mobile devices
- const cardWitdh = 285
const marginPx = 16
+ const cardWitdh =
+ window.outerWidth < 500 ? window.outerWidth - marginPx * 6 : 285
const [headerHeight, setHeaderHeight] = useState<number>(0)
const [touchStart, setTouchStart] = useState<number>()
const [touchEnd, setTouchEnd] = useState<number>()
@@ -116,6 +117,7 @@ const SeasonView: React.FC = () => {
season={season}
indexSlider={index}
index={i}
+ cardWitdh={cardWitdh}
/>
))}
</div>
diff --git a/src/components/Seasons/__snapshots__/SeasonView.spec.tsx.snap b/src/components/Season/__snapshots__/SeasonView.spec.tsx.snap
similarity index 100%
rename from src/components/Seasons/__snapshots__/SeasonView.spec.tsx.snap
rename to src/components/Season/__snapshots__/SeasonView.spec.tsx.snap
diff --git a/src/components/Seasons/_Seasons.scss b/src/components/Season/season.scss
similarity index 96%
rename from src/components/Seasons/_Seasons.scss
rename to src/components/Season/season.scss
index c888e246f..3a81d3f0d 100644
--- a/src/components/Seasons/_Seasons.scss
+++ b/src/components/Season/season.scss
@@ -22,8 +22,8 @@
.slide {
margin: auto;
height: 465px;
- max-width: 285px;
- min-width: 285px;
+ // max-width: 285px;
+ // min-width: 285px;
background: linear-gradient(180deg, #323339 0%, #25262b 100%);
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
--
GitLab