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