You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
3.3 KiB
153 lines
3.3 KiB
import styled, { css } from 'styled-components/macro'
|
|
|
|
import isUndefined from 'lodash/isUndefined'
|
|
|
|
import { client } from 'config/clients'
|
|
import { isMobileDevice } from 'config/userAgent'
|
|
|
|
import { Logo } from 'features/Logo'
|
|
import { ScoreSwitch } from 'features/MatchSwitches'
|
|
|
|
export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
|
|
|
|
export const defaultHeaderStyles = (
|
|
color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
|
|
) => {
|
|
if (client.name === 'lff') {
|
|
return client.styles.homePageHeader
|
|
}
|
|
|
|
if (headerImage && (client.name === 'instat' || client.name === 'insports')) {
|
|
return css`background: url(${headerImage}.png);
|
|
background-size: 100% 100%;
|
|
@media (max-width: 450px){
|
|
background: url(${headerImage}_mobile.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
`
|
|
}
|
|
if (color.includes('linear-gradient')) {
|
|
return css`
|
|
background: ${color};
|
|
z-index: 10;
|
|
`
|
|
}
|
|
return client.name === 'facr' ? client.styles.homePageHeader : css`
|
|
background: linear-gradient(
|
|
187deg,
|
|
${color} -4.49%,
|
|
#000000 68.29%),
|
|
#000000;
|
|
z-index: 10;
|
|
`
|
|
}
|
|
|
|
type HeaderProps = {
|
|
color?: string,
|
|
disabled?: boolean,
|
|
headerImage?: string | null,
|
|
height?: number,
|
|
isMatchPage?: boolean,
|
|
}
|
|
|
|
export const HeaderStyled = styled.header<HeaderProps>`
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
height: ${({ height = 8.5 }) => height}rem;
|
|
|
|
${({ color, headerImage }) => defaultHeaderStyles(color, headerImage)}
|
|
|
|
${({ color }) => (
|
|
client.name === 'lff' ? css`
|
|
background: ${color};
|
|
` : ''
|
|
)}
|
|
|
|
${({ disabled }) => (
|
|
disabled ? css`
|
|
pointer-events: none;
|
|
` : ''
|
|
)}
|
|
|
|
${({ isMatchPage }) => css`
|
|
${isMobileDevice
|
|
? css`
|
|
height: ${(isMatchPage ? '40px' : '114px')};
|
|
padding: 8px;
|
|
`
|
|
: ''}
|
|
`}
|
|
`
|
|
|
|
type Props = {
|
|
height?: number,
|
|
marginTop?: number,
|
|
}
|
|
|
|
export const HeaderGroup = styled.div<Props>`
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
${({ height }) => (height ? `height: ${height}rem` : '')};
|
|
${({ marginTop }) => (marginTop ? `margin-top: ${marginTop}rem` : '')};
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
position: relative;
|
|
justify-content: flex-end;
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
export const HeaderLogo = styled(Logo)`
|
|
${({ isMatchPage }) => (isMatchPage ? css`
|
|
width: ${client.styles.matchLogoWidth}rem;
|
|
height: ${client.styles.matchLogoHeight}rem;
|
|
|
|
${isMobileDevice ? css`
|
|
left: 48vw;
|
|
top: 5px;
|
|
transform: translateX(-50%);
|
|
position: absolute;
|
|
|
|
${client.styles.matchPageMobileHeaderLogo}
|
|
` : ''}
|
|
` : css`
|
|
${isMobileDevice ? css`
|
|
${client.styles.mobileHeaderLogo}
|
|
|
|
@media (max-width: 450px){
|
|
left: 48vw;
|
|
top: 5px;
|
|
transform: translateX(-50%);
|
|
position: absolute;
|
|
}
|
|
` : ''}
|
|
`)}
|
|
`
|
|
|
|
type PositionProps = {
|
|
isMatchPage?: boolean,
|
|
left?: number,
|
|
right?: number,
|
|
top?: number,
|
|
}
|
|
|
|
export const Position = styled.div<PositionProps>`
|
|
position: absolute;
|
|
|
|
top: ${({ isMatchPage, top = 1.14 }) => (
|
|
isMatchPage
|
|
? client.styles.matchLogoTopMargin ?? top
|
|
: top
|
|
)}rem;
|
|
|
|
${({ left }) => (isUndefined(left) ? '' : `left: ${left}rem`)};
|
|
${({ right }) => (isUndefined(right) ? '' : `right: ${right}rem`)};
|
|
`
|
|
|
|
export const ScSwitch = styled(ScoreSwitch)`
|
|
position: absolute;
|
|
top: 400px;
|
|
`
|
|
|