|
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/DateFilter' |
||||||
|
export * from './components/FacrDateFilter' |
||||||
export * from './store' |
export * from './store' |
||||||
|
|||||||
Loading…
Reference in new issue