From d5cd315970e2b9dd5b5a0d5ecc378cfa5c4fd724 Mon Sep 17 00:00:00 2001 From: nevainero Date: Fri, 30 Sep 2022 16:35:07 +0300 Subject: [PATCH] fix(2841): fix match title & subtitle --- .drone.yml | 2 +- .../MatchCard/CardFrontside/hooks.tsx | 27 ++++++---- .../components/MatchDescription/index.tsx | 34 ++++++------ .../components/MatchDescription/styled.tsx | 7 ++- src/features/TournamentSubtitle/index.tsx | 54 ++++++++++++------- src/features/TournamentSubtitle/styled.tsx | 8 +++ 6 files changed, 85 insertions(+), 47 deletions(-) diff --git a/.drone.yml b/.drone.yml index 01f76ed6..d99fcb7c 100644 --- a/.drone.yml +++ b/.drone.yml @@ -290,7 +290,7 @@ steps: - apk add --no-cache aws-cli bash git openssh-client make rsync - npm install --legacy-peer-deps - make build-e - - aws s3 sync build s3://instat-frontend-test-d --delete + - aws s3 sync build s3://instat-frontend-test-e --delete - aws cloudfront create-invalidation --distribution-id E1S8ZOPGSJZ7Q3 --paths "/*" diff --git a/src/features/MatchCard/CardFrontside/hooks.tsx b/src/features/MatchCard/CardFrontside/hooks.tsx index b28b3bfa..50dc871d 100644 --- a/src/features/MatchCard/CardFrontside/hooks.tsx +++ b/src/features/MatchCard/CardFrontside/hooks.tsx @@ -24,18 +24,25 @@ export const useCardPreview = ({ (async () => { if (!currentPreviewURL) return - const image = await fetch(String(currentPreviewURL), { - headers: { Authorization: `Bearer ${readToken()}` }, - }).then(async (result) => ({ - blob: await result.blob(), - status: result.status, - })) - - if (image.status === 200) { - setPreviewImage(URL.createObjectURL(image.blob)) + try { + const image = await fetch(String(currentPreviewURL), { + headers: { Authorization: `Bearer ${readToken()}` }, + }).then(async (result) => ({ + blob: await result.blob(), + status: result.status, + })) + + if (image.status === 200) { + setPreviewImage(URL.createObjectURL(image.blob)) + } + } catch (e) { + // eslint-disable-next-line no-console + console.error(e) } })() - }, [currentPreviewURL]) + + return () => URL.revokeObjectURL(previewImage) + }, [currentPreviewURL, previewImage]) return { previewImage } } diff --git a/src/features/MatchPage/components/MatchDescription/index.tsx b/src/features/MatchPage/components/MatchDescription/index.tsx index 498d557e..7b4559fc 100644 --- a/src/features/MatchPage/components/MatchDescription/index.tsx +++ b/src/features/MatchPage/components/MatchDescription/index.tsx @@ -25,11 +25,11 @@ import { Description, DescriptionInnerBlock, MatchDate, - StyledLink, Score, + StyledLink, + Time, Title, Views, - Time, } from './styled' export const MatchDescription = () => { @@ -39,17 +39,11 @@ export const MatchDescription = () => { const { suffix } = useLexicsStore() const { profile, profileCardShown } = useMatchPageStore() - const getTeamName = useCallback((team: Team) => { - if (isMobileDevice) { - const teamNameLimit = 14 - let name = getName({ nameObj: team, suffix }) - if (name.length > teamNameLimit) { - name = `${name.substring(0, teamNameLimit)}...` - } - return name - } - return - }, [suffix]) + const getTeamName = useCallback((team: Team) => ( + isMobileDevice + ? getName({ nameObj: team, suffix }) + : + ), [suffix]) if (!profile) return @@ -95,12 +89,18 @@ export const MatchDescription = () => { - - - {localDate} - + { + !isMobileDevice && ( + + + {localDate} + + ) + } ) } diff --git a/src/features/MatchPage/components/MatchDescription/styled.tsx b/src/features/MatchPage/components/MatchDescription/styled.tsx index 7256ca47..ad509d97 100644 --- a/src/features/MatchPage/components/MatchDescription/styled.tsx +++ b/src/features/MatchPage/components/MatchDescription/styled.tsx @@ -25,6 +25,10 @@ export const Description = styled.div<{isHidden?: boolean}>` export const DescriptionInnerBlock = styled.div` margin-right: 10px; + + ${isMobileDevice ? css` + width: 100%; + ` : ''} ` export const Score = styled.span` @@ -44,7 +48,6 @@ export const StyledLink = styled(ProfileLink)` display: flex; align-items: center; color: #fff; - white-space: nowrap; &:hover { text-decoration: underline; @@ -53,6 +56,7 @@ export const StyledLink = styled(ProfileLink)` export const Title = styled.div` display: flex; + flex-wrap: wrap; font-weight: 500; font-size: 20px; @@ -77,6 +81,7 @@ export const Views = styled.div` color: #fff; opacity: 0.7; font-size: 20px; + min-width: 90px; ${isMobileDevice ? css` diff --git a/src/features/TournamentSubtitle/index.tsx b/src/features/TournamentSubtitle/index.tsx index 621740f7..30a7dd6b 100644 --- a/src/features/TournamentSubtitle/index.tsx +++ b/src/features/TournamentSubtitle/index.tsx @@ -20,17 +20,27 @@ import { FavoriteSign, Wrapper, StyledLink, + SubtitleMain, } from './styled' +import { + Time, + MatchDate, + Views, +} from '../MatchPage/components/MatchDescription/styled' type Props = { countryId: number, + date?: string | null, sportType?: SportTypes, + time?: string | null, tournament: TournamentType, } export const TournamentSubtitle = ({ countryId, + date, sportType, + time, tournament, }: Props) => { const { isInFavorites } = useUserFavoritesStore() @@ -39,25 +49,33 @@ export const TournamentSubtitle = ({ return ( - {!isLffClient && ( - - - - + + {!isLffClient && ( + + + + + )} + + + + {tournamentInFavorites && } + + {time && date && ( + + + {date} + )} - - - - {tournamentInFavorites && } ) } diff --git a/src/features/TournamentSubtitle/styled.tsx b/src/features/TournamentSubtitle/styled.tsx index 64a50160..6cb8f565 100644 --- a/src/features/TournamentSubtitle/styled.tsx +++ b/src/features/TournamentSubtitle/styled.tsx @@ -5,6 +5,14 @@ import { isMobileDevice } from 'config/userAgent' import { ProfileLink } from 'features/ProfileLink' export const Wrapper = styled.div` + ${isMobileDevice ? css` + width: 100%; + display: flex; + justify-content: space-between; + ` : ''} +` + +export const SubtitleMain = styled.div` display: flex; align-items: center; `