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

fix(ott-2710): mobile test fixes

Browse Source
OTT-2710-match-filters
boyvanov 3 years ago
parent ab7113de4c
commit 0753664b64
10 changed files with 291 additions and 263 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. 121
      src/features/HomePage/components/ClearFiltersPopup/styled.tsx
  2. 18
      src/features/HomePage/components/Dropdown/index.tsx
  3. 281
      src/features/HomePage/components/Dropdown/styled.tsx
  4. 8
      src/features/HomePage/components/Header/index.tsx
  5. 15
      src/features/HomePage/components/HeaderFilters/index.tsx
  6. 3
      src/features/HomePage/components/MobileMatchesFilters/index.tsx
  7. 90
      src/features/HomePage/components/MobileMatchesFilters/styled.tsx
  8. 4
      src/features/HomePage/index.tsx
  9. 2
      src/features/OutsideClick/index.tsx
  10. 12
      src/features/ProfileHeader/styled.tsx

121
src/features/HomePage/components/ClearFiltersPopup/styled.tsx
Unescape View File

@ -23,91 +23,90 @@ export const Modal = styled(BaseModal)`
` `
export const PopupContainer = styled.div` export const PopupContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-style: normal; font-style: normal;
color: #FFFFFF; color: #FFFFFF;
${isMobileDevice ${isMobileDevice
? css`` ? ''
: css` : css`min-width: 611px;`}
min-width: 611px;`}
` `
export const PopupTitle = styled.div` export const PopupTitle = styled.div`
font-weight: 700; font-weight: 700;
font-size: 24px;
line-height: 24px;
margin-bottom: 45px;
${isMobileDevice
? css`
font-size: 20px;
line-height: 24px;
margin-bottom: 25px;`
: css`
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 24px;
margin-bottom: 45px;`} margin-bottom: 45px;
${isMobileDevice
? css`
font-size: 20px;
line-height: 24px;
margin-bottom: 25px;`
: css`
font-size: 24px;
line-height: 24px;
margin-bottom: 45px;`}
` `
export const PopupText = styled.div` export const PopupText = styled.div`
font-weight: 400; font-weight: 400;
${isMobileDevice ${isMobileDevice
? css` ? css`
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
margin-bottom: 33px;` margin-bottom: 33px;`
: css` : css`
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
margin-bottom: 55px;`} margin-bottom: 55px;`}
` `
export const ButtonsContainer = styled.div` export const ButtonsContainer = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
${isMobileDevice
? css` ${isMobileDevice
gap: 15px;` ? css`gap: 15px;`
: css` : css`gap: 20px;`}
gap: 20px;
`}
` `
const Button = styled.button` const Button = styled.button`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 5px; border-radius: 5px;
color: #FFFF; color: #FFFF;
font-weight: 600; font-weight: 600;
${isMobileDevice ${isMobileDevice
? css` ? css`
font-size: 16px; font-size: 16px;
line-height: 16px; line-height: 16px;
width: 149px; width: 149px;
height: 38px;` height: 38px;`
: css` : css`
font-size: 20px; font-size: 20px;
line-height: 50px; line-height: 50px;
cursor: pointer; cursor: pointer;
width: 134px; width: 134px;
height: 50px;`} height: 50px;`}
` `
export const ConfirmButton = styled(Button)` export const ConfirmButton = styled(Button)`
background: #294FC4; background: #294FC4;
border: 1px solid #294FC4; border: 1px solid #294FC4;
filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
` `
export const CancelButton = styled(Button)` export const CancelButton = styled(Button)`
border: 1px solid #FFFFFF; border: 1px solid #FFFFFF;
background: none; background: none;
filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
` `

18
src/features/HomePage/components/Dropdown/index.tsx
Unescape View File

@ -78,14 +78,16 @@ export const DropDown = ({
labelLexic='all' labelLexic='all'
/> />
</SearchWithAllContainer> </SearchWithAllContainer>
<ClearButtonContainer {!isEmpty(currentActiveFilter) && (
onClick={clearFilters(filterTitle)} <ClearButtonContainer
> onClick={clearFilters(filterTitle)}
<T9n >
className='clear_button' <T9n
t='clear' className='clear_button'
/> t='clear'
</ClearButtonContainer> />
</ClearButtonContainer>
)}
</CommonButtonsBlock> </CommonButtonsBlock>
{map(dropdownList, (filterItem) => { {map(dropdownList, (filterItem) => {

281
src/features/HomePage/components/Dropdown/styled.tsx
Unescape View File

@ -7,56 +7,66 @@ import { isMobileDevice } from 'config/userAgent'
import { NameStyled } from 'features/Name' import { NameStyled } from 'features/Name'
export const DropDownContainer = styled.div` export const DropDownContainer = styled.div`
${isMobileDevice ${isMobileDevice
? css` ? css` border-top: 1px solid #505050;`
border-top: 1px solid #505050;`
: css` : css`
position: absolute; position: absolute;
top: 57px; top: 57px;
right: -24px; right: -24px;
background: #333333; background: #333333;
border-radius: 3.5px; border-radius: 3.5px;
z-index: 10;`} z-index: 10;`}
` `
export const FiltersList = styled.ul` export const FiltersList = styled.ul`
${customScrollbar} overflow-y: auto;
overflow-y: auto; display: flex;
display: flex; flex-direction: column;
flex-direction: column; max-height: 500px;
max-height: 500px;
${isMobileDevice
? css`
@media (orientation: landscape){
max-height: 300px;
}
`
: ''}
${customScrollbar}
` `
export const FilterItem = styled.li`
${isMobileDevice export const FilterItem = styled.li`
${isMobileDevice
? css` ? css`
max-width: 280px; max-width: 280px;
white-space: nowrap; white-space: nowrap;
padding: 10px 0 10px 13px; padding: 10px 0 10px 13px;
` `
: css` : css`
min-width: 286px; min-width: 286px;
white-space: nowrap; white-space: nowrap;
padding: 15px 26px;`} padding: 15px 26px;`}
:hover {
background: rgba(255, 255, 255, 0.2); :hover {
} background: rgba(255, 255, 255, 0.2);
}
` `
export const Checkbox = styled(BaseCheckbox)` export const Checkbox = styled(BaseCheckbox)`
display: block; display: block;
text-transform: uppercase; text-transform: uppercase;
${Label} { ${Label} {
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
${isMobileDevice ${isMobileDevice
? css` ? css`
font-size: 10px; font-size: 10px;
line-height: 11px; line-height: 11px;`
`
: css` : css`
font-size: 18px; font-size: 18px;
line-height: 16px; line-height: 16px;`}
`}
${NameStyled} { ${NameStyled} {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -64,152 +74,159 @@ export const Checkbox = styled(BaseCheckbox)`
} }
${({ checked }) => (checked ${({ checked }) => (checked
? css`` ? ''
: css` : css`color: rgba(255, 255, 255, 0.6);`)}
color: rgba(255, 255, 255, 0.6);`
)}
} }
${CheckboxSvg} { ${CheckboxSvg} {
margin-right: 8px; margin-right: 8px;
flex: 0 0 auto; flex: 0 0 auto;
${isMobileDevice ${isMobileDevice
? css` ? css`
width: 14px; width: 14px;
height: 14px; height: 14px;
` `
: css` : css`
width: 20px; width: 20px;
height: 20px; height: 20px;`}
`}
} }
` `
type TCommonButtonsBlock = { type TCommonButtonsBlock = {
isArena?: boolean, isArena?: boolean,
} }
export const CommonButtonsBlock = styled.div<TCommonButtonsBlock>` export const CommonButtonsBlock = styled.div<TCommonButtonsBlock>`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
${({ isArena }) => (isArena
${({ isArena }) => (isArena
? css` ? css`
align-items: flex-start; align-items: flex-start;
padding: ${isMobileDevice ? '8px 25px 10px 13px' : '24px 26px 15px 26px'}; padding: ${isMobileDevice ? '8px 25px 10px 13px' : '24px 26px 15px 26px'};
` `
: css` : css`
align-items: center; align-items: center;
padding:${isMobileDevice ? '8px 25px 10px 13px' : '15px 26px'}; padding:${isMobileDevice ? '8px 25px 10px 13px' : '15px 26px'};`)}
` `
)}
`
export const ClearButtonContainer = styled.div` export const ClearButtonContainer = styled.div`
${isMobileDevice ${isMobileDevice
? css` ? css`
position: absolute; position: absolute;
top: 14px; top: 14px;
right: 36px;` right: 36px;`
: ''} : ''}
.clear_button { .clear_button {
font-style: normal; ${isMobileDevice
${isMobileDevice
? css` ? css`
font-size: 10px; font-size: 10px;
line-height: 12px;` line-height: 12px;`
: css` : css`
font-size: 18px; font-size: 18px;
line-height: 22px;`} line-height: 22px;`}
font-weight: 400;
font-style: normal;
letter-spacing: 0.05em; font-weight: 400;
text-transform: uppercase; letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.5); text-transform: uppercase;
cursor: pointer; color: rgba(255, 255, 255, 0.5);
} cursor: pointer;
}
` `
export const SearchContainer = styled.div` export const SearchContainer = styled.div`
padding-right: ${isMobileDevice ? '0px' : '20px'}; padding-right: ${isMobileDevice ? '0px' : '20px'};
position: relative; position: relative;
:before { :before {
content: ''; content: '';
background: url(/images/search.svg) no-repeat; background: url(/images/search.svg) no-repeat;
position: absolute; position: absolute;
${isMobileDevice
${isMobileDevice
? css` ? css`
left: 8px; left: 8px;
top: 7px;` top: 7px;
width: 11px;
height: 11px;
`
: css` : css`
left: 13px; left: 13px;
top: 13px;`} top: 10px;
z-index: 2; width: 16px;
width: 13px; height: 16px;`}
height: 11px;
} z-index: 2;
}
` `
export const SearchInput = styled.input` export const SearchInput = styled.input`
border: none; border: none;
background: transparent; background: transparent;
outline: none; outline: none;
width: 100%; width: 100%;
background: #292929; background: #292929;
border-radius: 10px; border-radius: 10px;
margin-bottom: 15px; margin-bottom: 15px;
color: #FFFF;
color: #FFFF;
${isMobileDevice ${isMobileDevice
? css` ? css`
height: 24px; height: 24px;
min-width: 242px; min-width: 242px;
padding-left: 23px;` padding-left: 23px;`
: css` : css`
min-width: 513px; min-width: 513px;
padding-left: 36px; padding-left: 36px;
height: 36px;`} height: 36px;`}
::placeholder {
${isMobileDevice ${isMobileDevice
? css` ? css`
font-size: 10px; font-size: 10px;
line-height: 15px;` line-height: 15px;`
: css` : css`
font-size: 18px; font-size: 18px;
line-height: 22px;`} line-height: 22px;`}
text-transform: uppercase; ::placeholder {
letter-spacing: 0.05em; text-transform: uppercase;
} letter-spacing: 0.05em;
}
` `
export const SearchWithAllContainer = styled.div` export const SearchWithAllContainer = styled.div`
flex: 1 1 auto; flex: 1 1 auto;
` `
export const BackButton = styled.div` export const BackButton = styled.div`
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
align-items: center; align-items: center;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
color: #FFFFFF; color: #FFFFFF;
cursor: pointer; cursor: pointer;
position: absolute;
top: 12px;
left: 13px;
padding-left: 24px;
:before {
content: '';
display: block;
background: url(/images/arrowUpWhite.svg) center no-repeat;
background-size: 12px 12xp;
transform: rotate(-90deg);
right: 0;
width: 12px;
height: 12px;
position: absolute; position: absolute;
top: 0; top: 12px;
left: 0; left: 13px;
} padding-left: 24px;
:before {
content: '';
display: block;
background: url(/images/arrowUpWhite.svg) center no-repeat;
background-size: 12px 12xp;
transform: rotate(-90deg);
right: 0;
width: 12px;
height: 12px;
position: absolute;
top: 0;
left: 0;
}
` `

8
src/features/HomePage/components/Header/index.tsx
Unescape View File

@ -15,14 +15,18 @@ import {
Position, Position,
} from 'features/ProfileHeader/styled' } from 'features/ProfileHeader/styled'
export const Header = () => { type THeader = {
disabled: boolean,
}
export const Header = ({ disabled }: THeader) => {
const { const {
resetFilters, resetFilters,
updateDate, updateDate,
} = useHeaderFiltersStore() } = useHeaderFiltersStore()
return ( return (
<HeaderStyled> <HeaderStyled disabled={disabled}>
<Position <Position
top={client.styles.logoTop} top={client.styles.logoTop}
left={client.styles.logoLeft} left={client.styles.logoLeft}

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

@ -1,14 +1,10 @@
import { isInSportsClient } from 'config/clients' import styled from 'styled-components/macro'
import { isInSportsClient } from 'config/clients'
import { SelectFilter } from 'components/SelectFilter' import { SelectFilter } from 'components/SelectFilter'
import { useHeaderFiltersStore } from 'features/HeaderFilters' import { useHeaderFiltersStore } from 'features/HeaderFilters'
import { T9n } from 'features/T9n' import { T9n } from 'features/T9n'
import {
Modal as BaseModal,
} from 'features/AuthServiceApp/components/RegisterPopup/styled'
import styled from 'styled-components/macro'
import { ModalWindow } from 'features/Modal/styled'
import { import {
ScArrow, ScArrow,
ScHeaderFilters, ScHeaderFilters,
@ -17,13 +13,6 @@ import {
import { ClearFiltersPopup } from '../ClearFiltersPopup' import { ClearFiltersPopup } from '../ClearFiltersPopup'
import { MatchesFilters } from '../MatchesFilters' import { MatchesFilters } from '../MatchesFilters'
export const Modal = styled(BaseModal)`
${ModalWindow} {
min-height: 452px;
max-width: 280px;
padding: 37px 0 39px 0;
}
`
const ClearButton = styled.span` const ClearButton = styled.span`
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;

3
src/features/HomePage/components/MobileMatchesFilters/index.tsx
Unescape View File

@ -11,6 +11,7 @@ import {
ClearButton, ClearButton,
CloseButton, CloseButton,
FilterContainer, FilterContainer,
FiltersCount,
Modal, Modal,
} from './styled' } from './styled'
import { DropDown } from '../Dropdown' import { DropDown } from '../Dropdown'
@ -50,7 +51,7 @@ export const MobileMatchesFilters = () => {
<> <>
<FilterContainer active={filtersSize !== 0} onClick={openFilters}> <FilterContainer active={filtersSize !== 0} onClick={openFilters}>
<T9n t='filter' /> <T9n t='filter' />
{filtersSize !== 0 && ` ${filtersSize}`} {filtersSize !== 0 && <FiltersCount>{` ${filtersSize}`}</FiltersCount>}
</FilterContainer> </FilterContainer>
<Modal isOpen={isOpen} withCloseButton={false}> <Modal isOpen={isOpen} withCloseButton={false}>
{isEmpty(isOpenList) {isEmpty(isOpenList)

90
src/features/HomePage/components/MobileMatchesFilters/styled.tsx
Unescape View File

@ -1,27 +1,32 @@
import styled, { css } from 'styled-components/macro' import styled, { css } from 'styled-components/macro'
import { OutsideClickWrapper } from 'features/OutsideClick'
import { ModalWindow } from 'features/Modal/styled' import { ModalWindow } from 'features/Modal/styled'
import { import {
Modal as BaseModal, Modal as BaseModal,
} from 'features/AuthServiceApp/components/RegisterPopup/styled' } from 'features/AuthServiceApp/components/RegisterPopup/styled'
export const Modal = styled(BaseModal)` export const Modal = styled(BaseModal)`
${OutsideClickWrapper} {
height: 100%;
}
${ModalWindow} { ${ModalWindow} {
min-height: auto; min-height: auto;
max-height: 452px;
max-width: 293px; max-width: 293px;
padding: 35px 0 9px 0; padding: 35px 0 9px 0;
top: 4vh;
} }
` `
export const CloseButton = styled.div` export const CloseButton = styled.div`
position: absolute; position: absolute;
width: 13px; width: 13px;
height: 13px; height: 13px;
background:url(/images/closeWhite.svg) no-repeat; background:url(/images/closeWhite.svg) no-repeat;
background-size: 13px; background-size: 13px;
top: 13px; top: 13px;
right: 13px; right: 13px;
` `
type TFilterProps = { type TFilterProps = {
@ -29,42 +34,47 @@ type TFilterProps = {
} }
export const FilterContainer = styled.div<TFilterProps>` export const FilterContainer = styled.div<TFilterProps>`
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 14px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
color: #FFFFFF; color: #FFFFFF;
padding-left: 22px; padding-left: 22px;
position: relative; position: relative;
:before{ :before{
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width:14px; width:14px;
height: 14px; height: 14px;
${({ active }) => (active background-size: 14px 14px;
${({ active }) => (active
? css` ? css`
background: url(/images/filter-white.svg) no-repeat;` background: url(/images/filter-white.svg) no-repeat;`
: css` : css`
background: url(/images/filter-gray.svg) no-repeat;`)} background: url(/images/filter-gray.svg) no-repeat;`)}
background-size: 14px 14px; }
}
` `
export const ClearButton = styled.div` export const ClearButton = styled.div`
font-style: normal; font-style: normal;
position: absolute; position: absolute;
top: 14px; top: 14px;
right: 36px; right: 36px;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
font-weight: 400; font-weight: 400;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
color: rgba(255,255,255,0.5); color: rgba(255,255,255,0.5);
`
export const FiltersCount = styled.span`
font-weight: 400;
` `

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

@ -7,6 +7,7 @@ import { ConfirmPopup } from 'features/AuthServiceApp/components/ConfirmPopup'
import { Matches } from 'features/Matches' import { Matches } from 'features/Matches'
import { import {
HeaderFiltersStore, HeaderFiltersStore,
useHeaderFiltersStore,
} from 'features/HeaderFilters' } from 'features/HeaderFilters'
import { import {
@ -30,6 +31,7 @@ const Home = () => {
isShowConfirmPopup, isShowConfirmPopup,
setIsOpenDownload, setIsOpenDownload,
} = useHomePage() } = useHomePage()
const { isOpenList } = useHeaderFiltersStore()
return ( return (
<PageWrapper> <PageWrapper>
@ -39,7 +41,7 @@ const Home = () => {
setIsOpenDownload={setIsOpenDownload} setIsOpenDownload={setIsOpenDownload}
/> />
) : ( ) : (
<Header /> <Header disabled={Boolean(isOpenList)} />
)} )}
<Main> <Main>
<UserFavorites /> <UserFavorites />

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

@ -11,7 +11,7 @@ type Props = {
onClick: (event?: MouseEvent) => void, onClick: (event?: MouseEvent) => void,
} }
const OutsideClickWrapper = styled.div`` export const OutsideClickWrapper = styled.div``
export const OutsideClick = ({ export const OutsideClick = ({
children, children,

12
src/features/ProfileHeader/styled.tsx
Unescape View File

@ -44,6 +44,7 @@ export const defaultHeaderStyles = (
type HeaderProps = { type HeaderProps = {
color?: string, color?: string,
disabled?: boolean,
headerImage?: string | null, headerImage?: string | null,
height?: number, height?: number,
isMatchPage?: boolean, isMatchPage?: boolean,
@ -63,6 +64,12 @@ export const HeaderStyled = styled.header<HeaderProps>`
` : '' ` : ''
)} )}
${({ disabled }) => (
disabled ? css`
pointer-events: none;
` : ''
)}
${({ isMatchPage }) => css` ${({ isMatchPage }) => css`
${isMobileDevice ${isMobileDevice
? css` ? css`
@ -71,7 +78,6 @@ export const HeaderStyled = styled.header<HeaderProps>`
` `
: ''} : ''}
`} `}
` `
type Props = { type Props = {
@ -105,7 +111,7 @@ export const HeaderLogo = styled(Logo)`
transform: translateX(-50%); transform: translateX(-50%);
position: absolute; position: absolute;
${client.styles.matchPageMobileHeaderLogo} ${client.styles.matchPageMobileHeaderLogo}
` : ''} ` : ''}
` : css` ` : css`
${isMobileDevice ? css` ${isMobileDevice ? css`
@ -119,8 +125,6 @@ export const HeaderLogo = styled(Logo)`
} }
` : ''} ` : ''}
`)} `)}
` `
type PositionProps = { type PositionProps = {

Write Preview
Loading…
Cancel
Save