From c63149f34f94d53f003b1070b09bf603b1375198 Mon Sep 17 00:00:00 2001 From: Farber Denis <42491613+Bombamuerta@users.noreply.github.com> Date: Tue, 5 Oct 2021 10:29:46 +0300 Subject: [PATCH] Ott 1734 preferences mobile (#517) * style(#1734): preferences popup responsive styles added * style(#1734): style tweaks * style(#1734): min fix Co-authored-by: Farber Denis --- .../components/Search/index.tsx | 16 +++- .../components/SportList/styled.tsx | 18 +++- .../components/TournamentInfo/index.tsx | 20 ++++- .../components/TournamentListItem/index.tsx | 5 +- .../components/TournamentsBlock/index.tsx | 18 +++- .../components/TournamentsList/index.tsx | 18 +++- src/features/PreferencesPopup/styled.tsx | 90 +++++++++++++++++++ 7 files changed, 177 insertions(+), 8 deletions(-) diff --git a/src/features/PreferencesPopup/components/Search/index.tsx b/src/features/PreferencesPopup/components/Search/index.tsx index d6563e5f..bfcbad3e 100644 --- a/src/features/PreferencesPopup/components/Search/index.tsx +++ b/src/features/PreferencesPopup/components/Search/index.tsx @@ -1,4 +1,6 @@ -import styled from 'styled-components/macro' +import styled, { css } from 'styled-components/macro' + +import { isMobileDevice } from 'config/userAgent' import { ClearButton } from 'features/Search/styled' import { usePreferencesStore } from 'features/PreferencesPopup/store' @@ -52,6 +54,18 @@ const Input = styled.input` ::placeholder { color: rgba(255, 255, 255, 0.5); } + + ${isMobileDevice + ? css` + @media (max-width: 650px){ + font-size: 10px; + } + + @media (orientation: landscape){ + font-size: 12px; + } + ` + : ''}; ` export const Search = () => { diff --git a/src/features/PreferencesPopup/components/SportList/styled.tsx b/src/features/PreferencesPopup/components/SportList/styled.tsx index e34071a4..80699b75 100644 --- a/src/features/PreferencesPopup/components/SportList/styled.tsx +++ b/src/features/PreferencesPopup/components/SportList/styled.tsx @@ -1,6 +1,7 @@ -import styled from 'styled-components/macro' +import styled, { css } from 'styled-components/macro' import { devices } from 'config' +import { isMobileDevice } from 'config/userAgent' import { Checkbox as BaseCheckbox } from 'features/Common/Checkbox' import { Label } from 'features/Common/Checkbox/styled' @@ -14,6 +15,14 @@ export const Wrapper = styled.div` @media ${devices.tablet} { min-width: 13rem; } + + ${isMobileDevice + ? css` + @media (orientation: landscape){ + min-width: 35%; + } + ` + : ''}; ` export const List = styled.ul` @@ -32,6 +41,13 @@ export const Checkbox = styled(BaseCheckbox)` font-weight: normal; font-size: 0.66rem; line-height: 1rem; + ${isMobileDevice + ? css` + @media (max-width: 650px),(orientation: landscape){ + font-size: 12px; + } + ` + : ''}; } ${CheckboxSvg} { margin-right: 12px; diff --git a/src/features/PreferencesPopup/components/TournamentInfo/index.tsx b/src/features/PreferencesPopup/components/TournamentInfo/index.tsx index a57b7092..2ecaf185 100644 --- a/src/features/PreferencesPopup/components/TournamentInfo/index.tsx +++ b/src/features/PreferencesPopup/components/TournamentInfo/index.tsx @@ -1,4 +1,6 @@ -import styled from 'styled-components/macro' +import styled, { css } from 'styled-components/macro' + +import { isMobileDevice } from 'config/userAgent' import type { Tournament } from 'requests/getSportTournaments' @@ -18,13 +20,27 @@ const Wrapper = styled.div` justify-content: center; ` +const StyledName = styled(Name)` + ${isMobileDevice + ? css` + @media (max-width: 650px){ + font-size: 10px; + } + + @media (orientation: landscape){ + font-size: 12px; + } + ` + : ''} +` + type Props = { tournament: Tournament, } export const TournamentInfo = ({ tournament }: Props) => ( - + diff --git a/src/features/PreferencesPopup/components/TournamentListItem/index.tsx b/src/features/PreferencesPopup/components/TournamentListItem/index.tsx index f610c2a3..3fab5798 100644 --- a/src/features/PreferencesPopup/components/TournamentListItem/index.tsx +++ b/src/features/PreferencesPopup/components/TournamentListItem/index.tsx @@ -6,6 +6,8 @@ import floor from 'lodash/floor' import type { Tournament, Tournaments } from 'requests' +import { isMobileDevice } from 'config/userAgent' + import { TournamentInfo } from '../TournamentInfo' import { Checkbox } from '../../styled' @@ -38,6 +40,7 @@ export type ItemData = { export const TournamentListItem = ({ data, index, + style, }: ListChildComponentProps) => { const { isTournamentSelected, @@ -48,7 +51,7 @@ export const TournamentListItem = ({ if (!tournament) return null return ( - + } diff --git a/src/features/PreferencesPopup/components/TournamentsBlock/index.tsx b/src/features/PreferencesPopup/components/TournamentsBlock/index.tsx index a4c2a676..1b7eeed5 100644 --- a/src/features/PreferencesPopup/components/TournamentsBlock/index.tsx +++ b/src/features/PreferencesPopup/components/TournamentsBlock/index.tsx @@ -1,4 +1,6 @@ -import styled from 'styled-components/macro' +import styled, { css } from 'styled-components/macro' + +import { isMobileDevice } from 'config/userAgent' import { T9n } from 'features/T9n' @@ -14,12 +16,26 @@ const Wrapper = styled.div` align-items: flex-start; padding-left: 14px; flex-grow: 1; + ${isMobileDevice + ? css` + @media (max-width: 650px){ + padding-left: 0; + } + ` + : ''}; ` const CheckboxWrapper = styled.div` margin: 20px 0 22px 2px; margin-top: 20px; margin-bottom: 22px; + ${isMobileDevice + ? css` + @media (max-width: 650px){ + margin: 15px 0 10px; + } + ` + : ''}; ` export const TournamentsBlock = () => { diff --git a/src/features/PreferencesPopup/components/TournamentsList/index.tsx b/src/features/PreferencesPopup/components/TournamentsList/index.tsx index 1cde6218..6094f665 100644 --- a/src/features/PreferencesPopup/components/TournamentsList/index.tsx +++ b/src/features/PreferencesPopup/components/TournamentsList/index.tsx @@ -2,10 +2,12 @@ import { memo } from 'react' import type { ListItemKeySelector } from 'react-window' import { FixedSizeList } from 'react-window' -import styled from 'styled-components/macro' +import styled, { css } from 'styled-components/macro' import size from 'lodash/size' +import { isMobileDevice } from 'config/userAgent' + import { customScrollbar } from 'features/Common' import type { ItemData } from '../TournamentListItem' @@ -31,7 +33,7 @@ const List = memo((props: Props) => { innerElementType='ul' width='100%' height={432} - itemSize={24} + itemSize={isMobileDevice ? 36 : 24} itemCount={size(tournaments)} itemKey={getItemKey} itemData={props} @@ -55,6 +57,18 @@ export const TournamentsList = styled(List)` height: 20rem !important; } + ${isMobileDevice + ? css` + @media (max-width: 650px){ + height: 30rem !important; + } + + @media (orientation: landscape){ + height: 10rem !important; + } + ` + : ''}; + ${customScrollbar} ::-webkit-scrollbar { diff --git a/src/features/PreferencesPopup/styled.tsx b/src/features/PreferencesPopup/styled.tsx index 22cfcb72..4e3f09b3 100644 --- a/src/features/PreferencesPopup/styled.tsx +++ b/src/features/PreferencesPopup/styled.tsx @@ -1,5 +1,7 @@ import styled, { css } from 'styled-components/macro' +import { isMobileDevice } from 'config/userAgent' + import { ModalWindow } from 'features/Modal/styled' import { Modal as BaseModal } from 'features/Modal' import { Header as BaseHeader } from 'features/PopupComponents' @@ -25,6 +27,21 @@ export const Modal = styled(BaseModal)` width: 70rem; height: auto; } + + + ${isMobileDevice + ? css` + @media (max-width: 650px){ + width: 95vw; + height: auto; + top: -7vh; + } + + @media (orientation: landscape){ + min-width: 95vw; + } + ` + : ''}; } ` @@ -44,6 +61,13 @@ export const Header = styled(BaseHeader)` height: auto; padding-top: 40px; justify-content: center; + ${isMobileDevice + ? css` + @media (max-width: 650px){ + padding-top: 33px; + } + ` + : ''}; ` export const HeaderTitle = styled.span` @@ -51,6 +75,18 @@ export const HeaderTitle = styled.span` font-size: 1.13rem; line-height: 1.13rem; color: #FFFFFF; + ${isMobileDevice + ? css` + @media (max-width: 650px){ + font-size: 14px; + line-height: 20px; + } + + @media (orientation: landscape) { + font-size: 20px; + } + ` + : ''}; ` export const BlockTitle = styled.span` @@ -59,11 +95,37 @@ export const BlockTitle = styled.span` line-height: 0.85rem; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); + ${isMobileDevice + ? css` + @media (max-width: 650px){ + font-size: 8px; + line-height: 15px; + } + + @media (orientation: landscape){ + font-size: 10px; + line-height: 16px; + } + + ` + : ''}; ` export const Body = styled.div` padding: 25px 40px 0 42px; display: flex; + ${isMobileDevice + ? css` + @media (max-width: 650px){ + padding: 13px 25px 0; + flex-direction: column; + } + + @media (orientation: landscape){ + padding: 22px 23px 0 29px; + } + ` + : ''}; ` export const Footer = styled.div` @@ -71,6 +133,13 @@ export const Footer = styled.div` display: flex; justify-content: center; padding: 1.89rem; + ${isMobileDevice + ? css` + @media (max-width: 650px){ + padding: 20px 25px 20px; + } + ` + : ''}; ` export const Checkbox = styled(BaseCheckbox)` @@ -79,6 +148,14 @@ export const Checkbox = styled(BaseCheckbox)` font-size: 0.66rem; line-height: 0.94rem; letter-spacing: 0.1px; + ${isMobileDevice + ? css` + @media (max-width: 650px),(orientation: landscape){ + font-size: 12px; + line-height: 18px; + } + ` + : ''}; } ${CheckboxSvg} { align-self: auto; @@ -91,6 +168,19 @@ export const Checkbox = styled(BaseCheckbox)` export const ApplyButton = styled(ButtonSolid)` width: 270px; border-radius: 5px; + ${isMobileDevice + ? css` + @media (max-width: 650px){ + width: 100%; + min-height: 42px; + } + + @media (orientation: landscape){ + width: 290px; + min-height: 42px; + } + ` + : ''}; ` export const Loader = styled(ArrowLoader)`