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 <denis.farber@instatsport.com>
4 years ago · c63149f34f
parent 59aa0063dd
commit c63149f34f
7 changed files with 177 additions and 8 deletions
--- 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 = () => {
--- 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;
--- 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) => (
  <Wrapper>
-    <Name nameObj={tournament} />
+    <StyledName nameObj={tournament} />
    <ItemInfo>
      <SportIcon sport={tournament.sport} />
      <Flag src={`https://instatscout.com/images/flags/48/${tournament.country.id}.png`} />
--- 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<ItemData>) => {
  const {
    isTournamentSelected,
@ -48,7 +51,7 @@ export const TournamentListItem = ({
  if (!tournament) return null

  return (
-    <Item style={getTwoColumnListStyles(index)}>
+    <Item style={isMobileDevice ? style : getTwoColumnListStyles(index)}>
      <Checkbox
        checked={isTournamentSelected(tournament)}
        label={<TournamentInfo tournament={tournament} />}
--- 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 = () => {
--- 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 {
--- 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)`