frontend
/
spa_instat_tv
1
0
Fork 0
Code Pull Requests 1 Releases Wiki Activity

feat(#2341): separate filter tournaments

Browse Source
keep-around/26e96e2488f7881e90a1e330fecc8568ebc21871
Andrei Dekterev 4 years ago
parent b5fe367a4f
commit 7e2d557f04
12 changed files with 426 additions and 93 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 20
      src/components/SelectFilter/index.tsx
  2. 26
      src/components/SelectFilter/styled.tsx
  3. 1
      src/features/HeaderFilters/store/hooks/index.tsx
  4. 89
      src/features/HeaderMobile/index.tsx
  5. 20
      src/features/HomePage/components/HeaderFilters/index.tsx
  6. 6
      src/features/HomePage/components/HeaderFilters/styled.tsx
  7. 2
      src/features/HomePage/index.tsx
  8. 20
      src/features/SportsFilter/components/SelectSport/index.tsx
  9. 2
      src/features/SportsFilter/components/SelectSport/styled.tsx
  10. 53
      src/features/SportsFilter/components/SelectSportPopup/index.tsx
  11. 226
      src/features/SportsFilter/components/SelectSportPopup/styled.tsx
  12. 54
      src/features/SportsFilter/index.tsx

20
src/components/SelectFilter/index.tsx
Unescape View File

@ -0,0 +1,20 @@
import { T9n } from 'features/T9n'
import { ScSelectFilter, ScArrow } from './styled'
type SportsFilterProps = {
onModalOpen: () => void,
open: boolean,
selectItem: string,
}
export const SelectFilter = ({
onModalOpen,
open,
selectItem,
}: SportsFilterProps) => (
<ScSelectFilter onClick={onModalOpen}>
<T9n t={selectItem} />
<ScArrow refIcon='Arrow' color='#ffffff' direction={open ? 180 : 0} />
</ScSelectFilter>
)

26
src/components/SelectFilter/styled.tsx
Unescape View File

@ -0,0 +1,26 @@
import styled, { css } from 'styled-components/macro'
import { isMobileDevice } from 'config/userAgent'
import { Icon } from 'features/Icon'
export const ScSelectFilter = styled.div`
display: flex;
color: white;
font-size: 14px;
width: 30%;
text-transform: uppercase;
font-weight: 700;
align-items: center;
cursor: pointer;
${isMobileDevice
? css`
letter-spacing: 0.15rem;
font-size: 10px;
`
: ''};
`
export const ScArrow = styled(Icon)`
margin-left: 14px;
`

1
src/features/HeaderFilters/store/hooks/index.tsx
Unescape View File

@ -23,6 +23,7 @@ export const useFilters = () => {
validator: isValidDate,
})
const [selectedSport, setSelectedSport] = useState('all_sports')
const [selectedLeague, setSelectedLeague] = useState('all_leagues')
const isTodaySelected = isToday(selectedDate)

89
src/features/HeaderMobile/index.tsx
Unescape View File

@ -1,78 +1,17 @@
import { useState } from 'react'
import { ScoreSwitch } from 'features/MatchSwitches'
import { HeaderMenu } from 'features/HeaderMenu'
import { DateFilter, useHeaderFiltersStore } from 'features/HeaderFilters'
import { DateFilter } from 'features/HeaderFilters'
import { ScoreSwitch } from 'features/MatchSwitches'
import { SportsFilter } from 'features/SportsFilter'
import { T9n } from 'features/T9n'
import {
HeaderStyled,
ScBody,
ScSportsWrapper,
ScModal,
ScHeaderTitle,
ScHeaderGroup,
ScSport,
} from './styled'
const sports = [
'all_sports',
'basketball',
'football_popup',
'handball',
'hockey_popup',
'volleyball',
]
export const HeaderMobile = () => {
const { selectedSport, setSelectedSport } = useHeaderFiltersStore()
const [isOpen, setIsOpen] = useState(false)
const onSportClick = (sport: string) => {
setSelectedSport(sport)
setIsOpen(false)
}
const onModalOpen = () => {
setIsOpen(true)
}
const onModalClose = () => {
setIsOpen(false)
}
return (
<HeaderStyled>
<HeaderMenu />
<DateFilter />
<ScSportsWrapper>
<SportsFilter
onModalOpen={onModalOpen}
open={isOpen}
sport={selectedSport}
/>
<ScoreSwitch />
</ScSportsWrapper>
<ScModal isOpen={isOpen} withCloseButton close={onModalClose} closeSize={9}>
<ScHeaderGroup>
<ScHeaderTitle>
<T9n t='choose_sport' />
</ScHeaderTitle>
</ScHeaderGroup>
<ScBody>
{sports.map((sport) => (
<ScSport
key={sport}
onClick={() => onSportClick(sport)}
className={selectedSport === sport ? 'active' : ''}
active={selectedSport === sport}
>
<T9n t={sport} />
</ScSport>
))}
</ScBody>
</ScModal>
</HeaderStyled>
)
}
import { HeaderStyled, ScSportsWrapper } from './styled'
export const HeaderMobile = () => (
<HeaderStyled>
<HeaderMenu />
<DateFilter />
<ScSportsWrapper>
<SportsFilter />
<ScoreSwitch />
</ScSportsWrapper>
</HeaderStyled>
)

20
src/features/HomePage/components/HeaderFilters/index.tsx
Unescape View File

@ -0,0 +1,20 @@
import { SportsFilter } from 'features/SportsFilter'
import { useHeaderFiltersStore } from 'features/HeaderFilters'
import { SelectFilter } from 'components/SelectFilter'
import { ScHeaderFilters } from './styled'
export const HeaderFilters = () => {
const { selectedSport, setSelectedSport } = useHeaderFiltersStore()
return (
<ScHeaderFilters>
<SportsFilter />
<SelectFilter
onModalOpen={() => console.log(1)}
open={false}
selectItem='all_sports'
/>
</ScHeaderFilters>
)
}

6
src/features/HomePage/components/HeaderFilters/styled.tsx
Unescape View File

@ -0,0 +1,6 @@
import styled from 'styled-components/macro'
export const ScHeaderFilters = styled.div`
display: flex;
flex-direction: row;
`

2
src/features/HomePage/index.tsx
Unescape View File

@ -18,6 +18,7 @@ import { UserFavorites } from 'features/UserFavorites'
import { useHomePage } from './hooks'
import { Header } from './components/Header'
import { HeaderMobile } from '../HeaderMobile'
import { HeaderFilters } from './components/HeaderFilters'
const Home = () => {
usePageLogger(PAGES.home)
@ -28,6 +29,7 @@ const Home = () => {
<Main>
<UserFavorites />
<Content>
<HeaderFilters />
<Matches fetch={fetchMatches} />
</Content>
</Main>

20
src/features/SportsFilter/components/SelectSport/index.tsx
Unescape View File

@ -0,0 +1,20 @@
import { T9n } from 'features/T9n'
import { ScSportsFilter, ScArrow } from './styled'
type SportsFilterProps = {
onModalOpen: () => void,
open: boolean,
sport: string,
}
export const SelectSport = ({
onModalOpen,
open,
sport,
}: SportsFilterProps) => (
<ScSportsFilter onClick={onModalOpen}>
<T9n t={sport} />
<ScArrow refIcon='Arrow' color='#ffffff' direction={open ? 180 : 0} />
</ScSportsFilter>
)

2
src/features/SportsFilter/styled.tsx → src/features/SportsFilter/components/SelectSport/styled.tsx
Unescape View File

@ -10,7 +10,7 @@ export const ScSportsFilter = styled.div`
width: 30%;
text-transform: uppercase;
font-weight: 700;
height: 100%;
cursor: pointer;
align-items: center;
${isMobileDevice

53
src/features/SportsFilter/components/SelectSportPopup/index.tsx
Unescape View File

@ -0,0 +1,53 @@
import { T9n } from 'features/T9n'
import {
ScBody,
ScModal,
ScHeaderTitle,
ScHeaderGroup,
ScSport,
} from './styled'
const sports = [
'all_sports',
'basketball',
'football_popup',
'handball',
'hockey_popup',
'volleyball',
]
type Props = {
isOpen: boolean,
onModalClose: () => void,
onSportClick: (sport: string) => void,
selectedSport: string,
}
export const SelectSportPopup = ({
isOpen,
onModalClose,
onSportClick,
selectedSport,
}: Props) => (
<>
<ScModal isOpen={isOpen} withCloseButton close={onModalClose} closeSize={9}>
<ScHeaderGroup>
<ScHeaderTitle>
<T9n t='choose_sport' />
</ScHeaderTitle>
</ScHeaderGroup>
<ScBody>
{sports.map((sport: string) => (
<ScSport
key={sport}
onClick={() => onSportClick(sport)}
className={selectedSport === sport ? 'active' : ''}
active={selectedSport === sport}
>
<T9n t={sport} />
</ScSport>
))}
</ScBody>
</ScModal>
</>
)

226
src/features/SportsFilter/components/SelectSportPopup/styled.tsx
Unescape View File

@ -0,0 +1,226 @@
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 { ModalWindow } from 'features/Modal/styled'
import { Modal as BaseModal } from 'features/Modal'
import { customScrollbar } from 'features/Common'
export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
export const defaultHeaderStyles = (
color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
) => {
if (headerImage && client.name !== 'facr') {
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(
236deg,
${color} -4.49%,
#000000 50%),
#000000;
z-index: 10;
`
}
type HeaderProps = {
color?: string,
headerImage?: string | null,
height?: number,
}
export const HeaderStyled = styled.header<HeaderProps>`
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
height: ${({ height = 8.5 }) => height}rem;
${isMobileDevice
? css`
height: 124px
`
: ''};
${({ color, headerImage }) => defaultHeaderStyles(color, headerImage)}
${isMobileDevice
? css`
padding: 8px;
`
: ''}
`
type Props = {
height?: number,
marginTop?: number,
}
export const HeaderGroup = styled.div<Props>`
display: flex;
flex-direction: row;
align-items: center;
${({ height }) => (height ? `height: ${height}rem` : '')};
${({ marginTop }) => (marginTop ? `margin-top: ${marginTop}rem` : '')};
${isMobileDevice
? css`
position: relative;
justify-content: space-between;
width: 100%;
:only-child {
flex-basis: 100px;
}
`
: ''};
`
export const HeaderLogo = styled(Logo)`
${({ isMatchPage }) => (isMatchPage ? css`
width: ${client.styles.matchLogoWidth}rem;
height: ${client.styles.matchLogoHeight}rem;
` : '')}
${isMobileDevice
? css`
width: 65px;
height: 15px;
`
: ''}
`
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 ScSportsWrapper = styled.div`
height: 80px;
display: flex;
flex-direction: row;
align-items: center;
position: absolute;
${isMobileDevice
? css`
top: 110px;
padding: 10px;
justify-content: space-between;
width: 100%;
/* right: -10px;
width: 95vw;
bottom: -90px; */
`
: ''};
`
export const ScModal = styled(BaseModal)`
background-color: rgba(0, 0, 0, 0.7);
${ModalWindow} {
min-width: 286px;
max-height: 290px;
background-color: #333333;
border-radius: 0px;
padding: 0;
overflow-y: auto;
${customScrollbar}
${isMobileDevice
? css`
min-width: 280px;
max-height: 250px;
height: auto;
top: -140px;
`
: ''};
}
`
export const ScHeaderTitle = styled.span`
font-weight: 700;
font-size: 10px;
line-height: 24px;
color: #FFFFFF;
${isMobileDevice
? css`
font-size: 10px;
line-height: 20px;
@media (orientation: landscape) {
font-size: 10px;
}
`
: ''};
`
export const ScHeaderGroup = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
padding: 10px;
border-bottom: 1px solid #505050;
${isMobileDevice
? css`
font-size: 10px;
line-height: 20px;
@media (orientation: landscape) {
font-size: 10px;
}
`
: ''};
`
export const ScBody = styled.div`
display: flex;
flex-direction: column;
padding: 0 15px 23px 15px;
`
type SportProps = {
active: boolean,
}
export const ScSport = styled.div<SportProps>`
display: flex;
justify-content: center;
text-transform: uppercase;
font-size: 10px;
font-weight: 700;
opacity: ${({ active }) => (active ? 1 : 0.5)};
margin-top: 18px;
cursor: pointer;
`

54
src/features/SportsFilter/index.tsx
Unescape View File

@ -1,20 +1,40 @@
import { T9n } from 'features/T9n'
import { useState } from 'react'
import { ScSportsFilter, ScArrow } from './styled'
import { useHeaderFiltersStore } from 'features/HeaderFilters'
type SportsFilterProps = {
onModalOpen: () => void,
open: boolean,
sport: string,
}
import { SelectSport } from './components/SelectSport'
import { SelectSportPopup } from './components/SelectSportPopup'
export const SportsFilter = () => {
const { selectedSport, setSelectedSport } = useHeaderFiltersStore()
const [isOpen, setIsOpen] = useState(false)
const onSportClick = (sport: string) => {
setSelectedSport(sport)
setIsOpen(false)
}
export const SportsFilter = ({
onModalOpen,
open,
sport,
}: SportsFilterProps) => (
<ScSportsFilter onClick={onModalOpen}>
<T9n t={sport} />
<ScArrow refIcon='Arrow' color='#ffffff' direction={open ? 180 : 0} />
</ScSportsFilter>
)
const onModalOpen = () => {
setIsOpen(true)
}
const onModalClose = () => {
setIsOpen(false)
}
return (
<>
<SelectSport
onModalOpen={onModalOpen}
open={isOpen}
sport={selectedSport}
/>
<SelectSportPopup
onSportClick={onSportClick}
isOpen={isOpen}
onModalClose={onModalClose}
selectedSport={selectedSport}
/>
</>
)
}

Write Preview
Loading…
Cancel
Save