From f8f8ce5f5085edde7169b2bf4c778be264fcc9b4 Mon Sep 17 00:00:00 2001 From: Rakov Roman Date: Wed, 3 Aug 2022 16:33:45 +0300 Subject: [PATCH] fix(#2399): redesign match page for mobile --- package-lock.json | 10 +++++++++- .../MatchPage/components/FinishedMatch/index.tsx | 7 +++---- .../components/MatchDate/index.tsx | 2 +- .../components/TabVideo/styled.tsx | 2 +- src/features/ProfileHeader/index.tsx | 1 + src/features/ProfileHeader/styled.tsx | 12 ++++++++---- src/features/StreamPlayer/styled.tsx | 2 +- 7 files changed, 24 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0e7b65c8..edade4f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10866,6 +10866,7 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "devOptional": true, "engines": { "node": ">=8" } @@ -11765,6 +11766,7 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz", "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==", + "devOptional": true, "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -18750,6 +18752,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "devOptional": true, "dependencies": { "binary-extensions": "^2.0.0" }, @@ -27128,6 +27131,7 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "devOptional": true, "dependencies": { "picomatch": "^2.2.1" }, @@ -41695,7 +41699,8 @@ "binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "devOptional": true }, "bindings": { "version": "1.5.0", @@ -42409,6 +42414,7 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz", "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==", + "devOptional": true, "requires": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -47861,6 +47867,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "devOptional": true, "requires": { "binary-extensions": "^2.0.0" } @@ -54355,6 +54362,7 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "devOptional": true, "requires": { "picomatch": "^2.2.1" } diff --git a/src/features/MatchPage/components/FinishedMatch/index.tsx b/src/features/MatchPage/components/FinishedMatch/index.tsx index d53b10a8..10b87181 100644 --- a/src/features/MatchPage/components/FinishedMatch/index.tsx +++ b/src/features/MatchPage/components/FinishedMatch/index.tsx @@ -64,12 +64,11 @@ export const FinishedMatch = ({ onPlayingChange={onPlayingChange} profile={profile} /> - + {isMobileDevice + ? : ( + )} )} - {isMobileDevice ? : null} { } = { ...profile! } const month = useMemo(() => ( - format(parseISO(date), 'MMM MM,') + format(parseISO(date), 'MMM dd,') ), [date]) const hour = useMemo(() => ( diff --git a/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx b/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx index e8b7c6b3..18a0733c 100644 --- a/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx +++ b/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx @@ -5,7 +5,7 @@ export const MatchesWrapper = styled.div` overflow-y: scroll; max-height: calc(100vh - 170px); - > :not(:last-child) { + > * { margin-bottom: 15px; } diff --git a/src/features/ProfileHeader/index.tsx b/src/features/ProfileHeader/index.tsx index d248dd83..3496c978 100644 --- a/src/features/ProfileHeader/index.tsx +++ b/src/features/ProfileHeader/index.tsx @@ -59,6 +59,7 @@ export const ProfileHeader = ({ headerImage={imageHeader} color={headerColor || color} height={height} + isMatchPage={isMatchPage()} > ` @@ -62,12 +63,15 @@ export const HeaderStyled = styled.header` ` : '' )} - ${isMobileDevice + ${({ isMatchPage }) => css` + ${isMobileDevice ? css` - height: 40px; - padding: 8px; - ` + height: ${(isMatchPage ? '40px' : '124px')}; + padding: 8px; + ` : ''} + `} + ` type Props = { diff --git a/src/features/StreamPlayer/styled.tsx b/src/features/StreamPlayer/styled.tsx index df036592..9b1b11e4 100644 --- a/src/features/StreamPlayer/styled.tsx +++ b/src/features/StreamPlayer/styled.tsx @@ -14,7 +14,7 @@ export const ControlsGradient = styled.div<{ isVisible?: boolean }>` ? css` height: 100%; background: ${(isVisible - ? 'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, rgba(0,0,0,0.7) 100%)' + ? 'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.7) 100%)' : 'initial')} ` : '')} `