style(#2317): fix style for desktop version in homepage
Andrei Dekterev
4 years ago
parent
161629a114
commit
4dde396f59
@ -0,0 +1,147 @@ |
|||||||
|
import type { KeyboardEvent } from 'react' |
||||||
|
import { useRouteMatch } from 'react-router' |
||||||
|
|
||||||
|
import getUnixTime from 'date-fns/getUnixTime' |
||||||
|
|
||||||
|
import { ProfileTypes, PAGES } from 'config' |
||||||
|
|
||||||
|
import type { Match } from 'features/Matches' |
||||||
|
import { useMatchSwitchesStore } from 'features/MatchSwitches' |
||||||
|
import { useName } from 'features/Name' |
||||||
|
import { T9n } from 'features/T9n' |
||||||
|
import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction' |
||||||
|
import { useUserFavoritesStore } from 'features/UserFavorites/store' |
||||||
|
|
||||||
|
import { NoAccessMessage } from '../../NoAccessMessage' |
||||||
|
import { |
||||||
|
CardWrapperOuter, |
||||||
|
CardWrapper, |
||||||
|
Info, |
||||||
|
LiveSign, |
||||||
|
MatchDate, |
||||||
|
MatchTimeInfo, |
||||||
|
Preview, |
||||||
|
PreviewWrapper, |
||||||
|
Score, |
||||||
|
Team, |
||||||
|
TeamName, |
||||||
|
Teams, |
||||||
|
Time, |
||||||
|
TeamLogos, |
||||||
|
TeamLogo, |
||||||
|
BuyMatchBadge, |
||||||
|
SecondaryInfo, |
||||||
|
FavoriteSign, |
||||||
|
NameSignWrapper, |
||||||
|
HoverFrame, |
||||||
|
ScDollar, |
||||||
|
} from './styled' |
||||||
|
import { useCardPreview } from '../hooks' |
||||||
|
|
||||||
|
type Props = { |
||||||
|
match: Match, |
||||||
|
onClick: () => void, |
||||||
|
onKeyPress: (e: KeyboardEvent<HTMLLIElement>) => void, |
||||||
|
} |
||||||
|
|
||||||
|
export const CardFrontsideMobile = ({ |
||||||
|
match, |
||||||
|
onClick, |
||||||
|
onKeyPress, |
||||||
|
}: Props) => { |
||||||
|
const { |
||||||
|
access, |
||||||
|
date, |
||||||
|
formattedDate, |
||||||
|
live, |
||||||
|
preview, |
||||||
|
previewURL, |
||||||
|
sportType, |
||||||
|
team1, |
||||||
|
team2, |
||||||
|
time, |
||||||
|
tournament, |
||||||
|
} = match |
||||||
|
const isHomePage = useRouteMatch(PAGES.home)?.isExact |
||||||
|
const tournamentName = useName(tournament) |
||||||
|
const { isInFavorites } = useUserFavoritesStore() |
||||||
|
const { isScoreHidden } = useMatchSwitchesStore() |
||||||
|
const isInFuture = getUnixTime(date) > getUnixTime(new Date()) |
||||||
|
const showScore = !(isInFuture || isScoreHidden) || (live && !isScoreHidden) |
||||||
|
const team1InFavorites = isInFavorites(ProfileTypes.TEAMS, team1.id) |
||||||
|
const team2InFavorites = isInFavorites(ProfileTypes.TEAMS, team2.id) |
||||||
|
|
||||||
|
const { previewImage } = useCardPreview({ |
||||||
|
preview, |
||||||
|
previewURL, |
||||||
|
}) |
||||||
|
|
||||||
|
return ( |
||||||
|
<CardWrapperOuter onClick={onClick} onKeyPress={onKeyPress}> |
||||||
|
<CardWrapper> |
||||||
|
<HoverFrame /> |
||||||
|
<PreviewWrapper> |
||||||
|
{previewImage && ( |
||||||
|
<Preview title={tournamentName} src={previewImage} /> |
||||||
|
)} |
||||||
|
{access === MatchAccess.NoCountryAccess ? ( |
||||||
|
<NoAccessMessage /> |
||||||
|
) : ( |
||||||
|
<TeamLogos> |
||||||
|
<TeamLogo |
||||||
|
id={team1.id} |
||||||
|
nameAsTitle |
||||||
|
altNameObj={team1} |
||||||
|
sportType={sportType} |
||||||
|
profileType={ProfileTypes.TEAMS} |
||||||
|
/> |
||||||
|
<TeamLogo |
||||||
|
id={team2.id} |
||||||
|
nameAsTitle |
||||||
|
altNameObj={team2} |
||||||
|
sportType={sportType} |
||||||
|
profileType={ProfileTypes.TEAMS} |
||||||
|
/> |
||||||
|
</TeamLogos> |
||||||
|
)} |
||||||
|
<MatchTimeInfo> |
||||||
|
<MatchDate isHomePage={isHomePage}> |
||||||
|
{isHomePage ? null : formattedDate} |
||||||
|
{live && ( |
||||||
|
<LiveSign> |
||||||
|
<T9n t='live' /> |
||||||
|
</LiveSign> |
||||||
|
)} |
||||||
|
</MatchDate> |
||||||
|
</MatchTimeInfo> |
||||||
|
</PreviewWrapper> |
||||||
|
<Info> |
||||||
|
<Teams> |
||||||
|
<Team> |
||||||
|
<NameSignWrapper> |
||||||
|
<TeamName nameObj={team1} /> |
||||||
|
{team1InFavorites && <FavoriteSign />} |
||||||
|
</NameSignWrapper> |
||||||
|
{showScore && <Score>{team1.score}</Score>} |
||||||
|
</Team> |
||||||
|
<Team> |
||||||
|
<NameSignWrapper> |
||||||
|
<TeamName nameObj={team2} /> |
||||||
|
{team2InFavorites && <FavoriteSign />} |
||||||
|
</NameSignWrapper> |
||||||
|
{showScore && <Score>{team2.score}</Score>} |
||||||
|
</Team> |
||||||
|
</Teams> |
||||||
|
<SecondaryInfo> |
||||||
|
<Time>{time}</Time> |
||||||
|
{access === MatchAccess.CanBuyMatch && ( |
||||||
|
<BuyMatchBadge> |
||||||
|
<ScDollar refIcon='Dollar' size={5} /> |
||||||
|
</BuyMatchBadge> |
||||||
|
)} |
||||||
|
</SecondaryInfo> |
||||||
|
</Info> |
||||||
|
</CardWrapper> |
||||||
|
</CardWrapperOuter> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,350 @@ |
|||||||
|
import styled, { css } from 'styled-components/macro' |
||||||
|
|
||||||
|
import { devices } from 'config/devices' |
||||||
|
import { isMobileDevice } from 'config/userAgent' |
||||||
|
|
||||||
|
import { Name } from 'features/Name' |
||||||
|
import { Icon } from 'features/Icon' |
||||||
|
import { ProfileLogo } from 'features/ProfileLogo' |
||||||
|
|
||||||
|
export const CardWrapperOuter = styled.li.attrs({ |
||||||
|
tabIndex: 0, |
||||||
|
})` |
||||||
|
padding-top: 100%; |
||||||
|
position: relative; |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
width: 100%; |
||||||
|
padding-top: 0; |
||||||
|
margin-top: 6px; |
||||||
|
|
||||||
|
@media screen and (orientation: landscape) { |
||||||
|
width: 100%; |
||||||
|
:nth-child(odd) { |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const CardWrapper = styled.div` |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
bottom: 0; |
||||||
|
right: 0; |
||||||
|
padding-bottom: 0.75rem; |
||||||
|
border-radius: 2px; |
||||||
|
background-color: #3F3F3F; |
||||||
|
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); |
||||||
|
cursor: pointer; |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
position: static; |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
height: 75px; |
||||||
|
padding-bottom: 0; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const HoverFrame = styled.div` |
||||||
|
position: absolute; |
||||||
|
min-width: 100%; |
||||||
|
min-height: 100%; |
||||||
|
border-radius: 2px; |
||||||
|
border: 2px solid transparent; |
||||||
|
transition: border 0.5s ease-out; |
||||||
|
z-index: 2; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
border: 2px solid #fff |
||||||
|
} |
||||||
|
` |
||||||
|
|
||||||
|
export const PreviewWrapper = styled.div` |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
height: 60%; |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
width: 40%; |
||||||
|
height: 100%; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const Preview = styled.img` |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
opacity: 0.4; |
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
opacity: 0.2; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const MatchTimeInfo = styled.div` |
||||||
|
width: 100%; |
||||||
|
position: absolute; |
||||||
|
top: 0.519rem; |
||||||
|
padding: 0 0.519rem; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
` |
||||||
|
|
||||||
|
type MatchDateProps = { |
||||||
|
isHomePage?: boolean, |
||||||
|
} |
||||||
|
|
||||||
|
export const MatchDate = styled.div<MatchDateProps>` |
||||||
|
width: fit-content; |
||||||
|
height: 0.9rem; |
||||||
|
border-radius: 2px; |
||||||
|
padding: ${({ isHomePage }) => (!isHomePage ? '0 0.27rem' : '')}; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 0.472rem; |
||||||
|
line-height: 0.567rem; |
||||||
|
letter-spacing: 0.05em; |
||||||
|
text-transform: uppercase; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
white-space: nowrap; |
||||||
|
color: white; |
||||||
|
background-color: #6D6D6D; |
||||||
|
|
||||||
|
@media ${devices.tablet} { |
||||||
|
padding: ${({ isHomePage }) => (!isHomePage ? '0.27rem 0.36rem' : '')}; |
||||||
|
} |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
background-color: transparent; |
||||||
|
margin-left: 4px; |
||||||
|
height: 15px; |
||||||
|
width: 22px; |
||||||
|
font-size: 7px; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
type LiveType = { |
||||||
|
color?: string, |
||||||
|
} |
||||||
|
|
||||||
|
export const LiveSign = styled(MatchDate)<LiveType>` |
||||||
|
background-color: ${({ color }) => color ?? '#CC0000'}; |
||||||
|
margin-left: auto; |
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
font-size: 7px; |
||||||
|
padding: 3px; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const Time = styled.span` |
||||||
|
margin: 0 0.2rem; |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
font-size: 10px; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const Info = styled.div` |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
padding: 0.85rem 0.472rem 0 0.519rem; |
||||||
|
color: #fff; |
||||||
|
text-overflow: ellipsis; |
||||||
|
overflow: hidden; |
||||||
|
white-space: nowrap; |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
/* position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 45%; */ |
||||||
|
width: 60%; |
||||||
|
height: 100%; |
||||||
|
padding: 9px; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const SecondaryInfo = styled.div` |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
justify-content: space-between; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const CountryFlag = styled.img` |
||||||
|
width: 0.71rem; |
||||||
|
height: 0.75rem; |
||||||
|
margin-left: 0.567rem; |
||||||
|
object-fit: contain; |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
object-fit: cover; |
||||||
|
width: 12px; |
||||||
|
height: 100%; |
||||||
|
margin-left: 8px; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
type FavoriteSignProps = { |
||||||
|
color?: string, |
||||||
|
marginLeft?: number, |
||||||
|
} |
||||||
|
|
||||||
|
export const FavoriteSign = styled.span<FavoriteSignProps>` |
||||||
|
display: inline-block; |
||||||
|
margin-left: ${({ marginLeft = 9 }) => marginLeft}px; |
||||||
|
color: ${({ color }) => color}; |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
width: 8px; |
||||||
|
height: 8px; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
const nameStyles = css` |
||||||
|
text-overflow: ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
overflow: hidden; |
||||||
|
` |
||||||
|
|
||||||
|
export const TournamentName = styled.span` |
||||||
|
max-width: 95%; |
||||||
|
color: rgba(255, 255, 255, 0.7); |
||||||
|
font-size: 0.567rem; |
||||||
|
line-height: 0.95rem; |
||||||
|
margin-left: 0.567rem; |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
font-size: 10px; |
||||||
|
line-height: 100%; |
||||||
|
max-width: 100%; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
|
||||||
|
${nameStyles} |
||||||
|
` |
||||||
|
|
||||||
|
export const Teams = styled.div` |
||||||
|
margin-bottom: 0.567rem; |
||||||
|
` |
||||||
|
|
||||||
|
export const Team = styled.span` |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
font-weight: 600; |
||||||
|
font-size: 0.85rem; |
||||||
|
line-height: 1.14rem; |
||||||
|
color: #fff; |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
font-size: 14px; |
||||||
|
line-height: 20px; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const NameSignWrapper = styled.div` |
||||||
|
display: flex; |
||||||
|
max-width: 90%; |
||||||
|
align-items: center; |
||||||
|
` |
||||||
|
|
||||||
|
export const TeamName = styled(Name)` |
||||||
|
${nameStyles} |
||||||
|
` |
||||||
|
|
||||||
|
export const Score = styled.div` |
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
width: 15px; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
|
||||||
|
` |
||||||
|
|
||||||
|
export const TeamLogos = styled.div` |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
margin: 0.71rem auto 0 auto; |
||||||
|
z-index: 1; |
||||||
|
` |
||||||
|
|
||||||
|
export const TeamLogo = styled(ProfileLogo)` |
||||||
|
width: 33%; |
||||||
|
max-height: 100%; |
||||||
|
|
||||||
|
:last-child { |
||||||
|
margin-left: 0.8rem; |
||||||
|
} |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
width: 30%; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const BuyMatchBadge = styled.span` |
||||||
|
position: absolute; |
||||||
|
left: 0.472rem; |
||||||
|
bottom: 0.519rem; |
||||||
|
width: 1.18rem; |
||||||
|
height: 1.18rem; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
/* background-image: url(/images/dollar-sign.svg); */ |
||||||
|
color: rgba(255, 255, 255, 0.7); |
||||||
|
background-position: center; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-size: 0.472rem 0.71rem; |
||||||
|
background-color: rgba(255, 255, 255, 0.19); |
||||||
|
border-radius: 50%; |
||||||
|
box-shadow: 0px 0.08rem 0.283rem rgba(0, 0, 0, 0.5); |
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
position: static; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: 15px; |
||||||
|
height: 15px; |
||||||
|
/* background-size: 40%; */ |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScDollar = styled(Icon)` |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
` |
||||||
Loading…
Reference in new issue