|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 170 KiB |
|
After Width: | Height: | Size: 36 KiB |
@ -0,0 +1,56 @@ |
||||
import { css } from 'styled-components/macro' |
||||
import { |
||||
ClientConfig, |
||||
ClientIds, |
||||
ClientNames, |
||||
} from './types' |
||||
|
||||
export const fqtv: ClientConfig = { |
||||
auth: { |
||||
clientId: ClientIds.Fqtv, |
||||
}, |
||||
currencyBadge: { |
||||
color: '#333333', |
||||
secondColor: 'rgba(255, 255, 255, 0.7)', |
||||
sign: 'Dollar', |
||||
}, |
||||
defaultLanguage: 'en', |
||||
description: 'Queensland’s streamed competitions, including NPL Men, NPL Women and McDonald\'s FQPL Leagues.', |
||||
disabledPreferences: true, |
||||
name: ClientNames.Fqtv, |
||||
privacyLink: '/privacy-policy-and-statement?client_id=insports-ott-web', |
||||
showSearch: true, |
||||
showSmartBanner: true, |
||||
styles: { |
||||
background: '', |
||||
homePageHeader: css` |
||||
background: linear-gradient(0deg, rgba(0, 13, 47, 0.8), rgba(0, 13, 47, 0.8)),
|
||||
linear-gradient(0deg, #0061DC, #0061DC),
|
||||
no-repeat center center url(/images/fqtv-background.png); |
||||
background-size: 130% 105%; |
||||
background-blend-mode: normal, hard-light, normal; |
||||
`,
|
||||
logo: 'fqtv-logo.svg', |
||||
logoHeight: 2.465, |
||||
logoLeft: 0.71, |
||||
logoTop: 1, |
||||
logoWidth: 6.37, |
||||
matchLogoHeight: 2.465, |
||||
matchLogoWidth: 6.37, |
||||
matchPageMobileHeaderLogo: css` |
||||
width: 90px; |
||||
height: 27px; |
||||
top: 0; |
||||
`,
|
||||
mobileHeaderLogo: css` |
||||
width: 86px; |
||||
height: 33px; |
||||
`,
|
||||
userAccountLogo: css` |
||||
width: 6.37rem; |
||||
height: 2.465rem; |
||||
`,
|
||||
}, |
||||
termsLink: '/terms-and-conditions?client_id=insports-ott-web', |
||||
title: 'FQTV is the official home of Football', |
||||
} |
||||
@ -0,0 +1,67 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
import { fqtv as platformFqtv } from 'config/clients/fqtv' |
||||
import { isMobileDevice } from 'config/userAgent' |
||||
|
||||
import type { ClientConfig } from './types' |
||||
|
||||
const Background = styled.div` |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100vh; |
||||
display: flex; |
||||
justify-content: center; |
||||
background: linear-gradient(0deg, rgba(0, 13, 47, 0.8), rgba(0, 13, 47, 0.8)),
|
||||
linear-gradient(0deg, #0061DC, #0061DC),
|
||||
no-repeat center center url(/images/fqtv-background.png); |
||||
background-size: 130% 105%; |
||||
background-blend-mode: normal, hard-light, normal;
|
||||
` |
||||
|
||||
export const fqtv: ClientConfig = { |
||||
...platformFqtv, |
||||
background: Background, |
||||
styles: { |
||||
centerBlock: css` |
||||
margin-top: 9.15rem; |
||||
${isMobileDevice ? css` |
||||
margin-top: 107px; |
||||
@media screen and (orientation: landscape) { |
||||
width: 290px; |
||||
margin: auto; |
||||
} |
||||
` : ''};
|
||||
`,
|
||||
forgotPasswordInput: css` |
||||
border: none; |
||||
`,
|
||||
input: css` |
||||
background-color: transparent; |
||||
:not(:last-of-type) { |
||||
border-color: ${({ theme }) => theme.colors.white}; |
||||
} |
||||
`,
|
||||
inputGroup: css` |
||||
border: 1px solid ${({ theme }) => theme.colors.white}; |
||||
`,
|
||||
logo: css` |
||||
background-image: url(/images/fqtv-auth-logo.svg); |
||||
background-position: center; |
||||
height: 142px; |
||||
width: 378px; |
||||
margin-bottom: 1.82rem; |
||||
|
||||
${isMobileDevice ? css` |
||||
margin-bottom: 15px; |
||||
width: 200px; |
||||
height: 74px; |
||||
` : ''}
|
||||
`,
|
||||
submitButton: css` |
||||
:disabled { |
||||
background: #FFFFFF; |
||||
color: #00244F; |
||||
} |
||||
`,
|
||||
}, |
||||
} |
||||
@ -0,0 +1,191 @@ |
||||
import map from 'lodash/map' |
||||
|
||||
import { T9n } from 'features/T9n' |
||||
import { Icon } from 'features/Icon' |
||||
import { OutsideClick } from 'features/OutsideClick' |
||||
import { BodyBackdrop } from 'features/PageLayout' |
||||
import { useHeaderFiltersStore } from 'features/HeaderFilters' |
||||
|
||||
import { Fragment } from 'react' |
||||
import { useDateFilter } from '../DateFilter/hooks' |
||||
import { DatePicker } from '../DatePicker' |
||||
import { Tabs } from '../../store/config' |
||||
|
||||
import { |
||||
TabsList, |
||||
Tab, |
||||
TabTitle, |
||||
MonthsMode, |
||||
YearWrapper, |
||||
ArrowButton, |
||||
Arrow, |
||||
MonthModeYear, |
||||
MonthModeWrapper, |
||||
Months, |
||||
Month, |
||||
MonthName, |
||||
FacrWrapper, |
||||
DateWrapper, |
||||
MonthArrow, |
||||
WeekDaysWrapper, |
||||
FacrMonthWrapper, |
||||
WeekDay, |
||||
WeekName, |
||||
WeekNumber, |
||||
FacrDateButton, |
||||
FacrWeek, |
||||
} from '../DateFilter/styled' |
||||
|
||||
export const FacrDateFilter = () => { |
||||
const { |
||||
close, |
||||
date, |
||||
isMonthMode, |
||||
isOpen, |
||||
months, |
||||
onDateChange, |
||||
onNextClick, |
||||
onNextYearClick, |
||||
onPreviousClick, |
||||
onPrevYearClick, |
||||
onWeekDayClick, |
||||
openDatePicker, |
||||
selectedDate, |
||||
selectedMode, |
||||
selectedMonthModeDate, |
||||
setSelectedMode, |
||||
setSelectedMonthModeDate, |
||||
week, |
||||
} = useDateFilter() |
||||
|
||||
const { |
||||
resetFilters, |
||||
} = useHeaderFiltersStore() |
||||
|
||||
return ( |
||||
<FacrWrapper isMonthMode={isMonthMode}> |
||||
<DateWrapper isMonthMode={isMonthMode}> |
||||
<TabsList> |
||||
<Tab |
||||
aria-pressed={selectedMode === Tabs.MONTH} |
||||
onClick={() => setSelectedMode(Tabs.MONTH)} |
||||
> |
||||
<TabTitle> |
||||
<T9n t='month_title' /> |
||||
</TabTitle> |
||||
</Tab> |
||||
<Tab |
||||
aria-pressed={selectedMode === Tabs.WEEK} |
||||
onClick={() => setSelectedMode(Tabs.WEEK)} |
||||
> |
||||
<TabTitle> |
||||
<T9n t='week_title' /> |
||||
</TabTitle> |
||||
</Tab> |
||||
</TabsList> |
||||
{isMonthMode |
||||
? ( |
||||
<YearWrapper> |
||||
<MonthArrow |
||||
aria-label='Previous year' |
||||
onClick={onPrevYearClick} |
||||
> |
||||
<Arrow direction='left' /> |
||||
</MonthArrow> |
||||
<MonthModeYear> |
||||
{selectedMonthModeDate.getFullYear()} |
||||
</MonthModeYear> |
||||
<MonthArrow |
||||
aria-label='Next year' |
||||
onClick={onNextYearClick} |
||||
> |
||||
<Arrow direction='right' /> |
||||
</MonthArrow> |
||||
</YearWrapper> |
||||
) |
||||
: ( |
||||
<FacrMonthWrapper> |
||||
<MonthModeYear onClick={openDatePicker}> |
||||
{date.month} {' '} {date.year} |
||||
</MonthModeYear> |
||||
<FacrDateButton isActive={isOpen} onClick={openDatePicker}> |
||||
<Icon refIcon='Calendar' color='#fff' /> |
||||
</FacrDateButton> |
||||
</FacrMonthWrapper> |
||||
)} |
||||
</DateWrapper> |
||||
|
||||
{isMonthMode |
||||
? ( |
||||
<MonthsMode> |
||||
<MonthModeWrapper isMonthMode={isMonthMode}> |
||||
<Months> |
||||
{ |
||||
map(months, (day) => ( |
||||
<Month |
||||
key={day.name} |
||||
selected={day.date.getMonth() === selectedMonthModeDate.getMonth()} |
||||
onClick={() => setSelectedMonthModeDate(day.date)} |
||||
> |
||||
<MonthName>{day.name}</MonthName> |
||||
</Month> |
||||
)) |
||||
} |
||||
</Months> |
||||
</MonthModeWrapper> |
||||
</MonthsMode> |
||||
) |
||||
: ( |
||||
<WeekDaysWrapper> |
||||
<ArrowButton |
||||
aria-label='Previous week' |
||||
onClick={onPreviousClick} |
||||
> |
||||
<Arrow direction='left' /> |
||||
</ArrowButton> |
||||
<FacrWeek> |
||||
{ |
||||
map(week, (day) => ( |
||||
<WeekDay |
||||
key={day.name} |
||||
selected={day.date.getDate() === selectedDate.getDate()} |
||||
onClick={() => { |
||||
if (day.date.getDate() !== selectedDate.getDate()) { |
||||
onWeekDayClick(day.date) |
||||
} else { |
||||
resetFilters() |
||||
} |
||||
}} |
||||
> |
||||
<WeekName>{day.name.slice(0, 3)}</WeekName> |
||||
<WeekNumber>{day.date.getDate()}</WeekNumber> |
||||
</WeekDay> |
||||
)) |
||||
} |
||||
</FacrWeek> |
||||
<ArrowButton |
||||
aria-label='Next week' |
||||
onClick={onNextClick} |
||||
> |
||||
<Arrow direction='right' /> |
||||
</ArrowButton> |
||||
</WeekDaysWrapper> |
||||
|
||||
)} |
||||
{ |
||||
isOpen && ( |
||||
<Fragment> |
||||
<OutsideClick onClick={close}> |
||||
<DatePicker |
||||
open |
||||
selected={selectedDate} |
||||
onChange={onDateChange} |
||||
/> |
||||
</OutsideClick> |
||||
<BodyBackdrop /> |
||||
</Fragment> |
||||
) |
||||
} |
||||
</FacrWrapper> |
||||
) |
||||
} |
||||
@ -1,2 +1,3 @@ |
||||
export * from './components/DateFilter' |
||||
export * from './components/FacrDateFilter' |
||||
export * from './store' |
||||
|
||||
Loading…
Reference in new issue