diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx index ec47e91cc2a72d4cdc94e6481841d809fb5687b5..51c5898a4d3f30a48e6339f4f70f3a585333dd9f 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 f864c2263af9d3dcbf2ece47458ef20ea39d7bd6..53dc0d658798aaaf33ee9cc7a7a1006cd0b1f253 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 6d56655e79c762954fc4becdfdc138552bbf3f18..bd5a764a26970d2cae0ca30850183fda2ecb46d8 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 1ec53520e22f62ddeb9ca1f2bb735fb8caf43467..d3f531e50cd81706eb112dd2b421014883976b12 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 1fd7f3c32979e90c872403cc595043cf33b4af88..f58d567fcbe39bed0836d27e7262cd2409799368 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 3b79400ec58429a020319fe03226b77ebcf4c82a..52c707b5b1e5416e0ddab0b3b0fe287cd3a6cc50 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 02d1ae79cdf5791282c9a1b9b5fa19f2024bd9c9..e66040d9a9b3ad563ed10f2672b0bc5b1fe5f618 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 30ce0e6e3654336700ccc87b8a891819f3b0c906..023b67c922e72fd4b69068be47cd6e95ca11defd 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 99918c5052675ab4a1587a94ff7680df480b34f3..6885b5eb7d02affdcb30bbf3f93324903c439024 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 c888e246ff166331b3bfbb808e80a875577225ed..3a81d3f0d7488b7e21e525317281d7e88065c12a 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;