Ott 313 adaptive subs page (#142)

5 years ago · 81e1792a1c
parent 9c3391f4b3
commit 81e1792a1c
10 changed files with 229 additions and 60 deletions
--- a/src/features/Common/Checkbox/styled.tsx
+++ b/src/features/Common/Checkbox/styled.tsx
@ -1,6 +1,15 @@
 import styled from 'styled-components/macro'

+import { devices } from 'config/devices'
+
 export const Wrapper = styled.div`
+  @media${devices.tablet} {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 162px;
+    height: 100px;
+  }
 `

 export const Label = styled.label`
@ -37,4 +46,16 @@ export const Input = styled.input`
  &:checked+${Label}::before {
    background-image: url(/images/checkboxChecked.svg);
  }
+
+  @media${devices.tablet} {
+    &+${Label}::before {
+      width: 288px;
+      height: 100px;
+      background-image: none;
+    }
+    &:checked+${Label}::before {
+      background-image: none;
+    }
+    
+  }
 `
--- a/src/features/Common/Radio/styled.tsx
+++ b/src/features/Common/Radio/styled.tsx
@ -1,7 +1,18 @@
 import styled from 'styled-components/macro'

+import { devices } from 'config/devices'
+
 export const Wrapper = styled.div`

+  @media${devices.tablet} {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 163px;
+    height: 100px;
+    border-radius: 10px;
+  }
+
 `

 export const Label = styled.label`
@ -38,4 +49,18 @@ export const Input = styled.input`
  &:checked+${Label}::before {
    background-image: url(/images/radioChecked.svg);
  }
+
+  @media${devices.tablet} {
+    &+${Label}::before {
+      width: 163px;
+      height: 100px;
+      border-radius: 10px;
+      margin-right: 0;
+      background-image: none;
+    }
+
+    &:checked+${Label}::before {
+      background-image: none;
+    }
+  }
 `
--- a/src/features/Login/styled.tsx
+++ b/src/features/Login/styled.tsx
@ -74,8 +74,9 @@ export const ButtonsBlock = styled.div<{forSubsPage?: boolean}>`
  }

  @media${devices.mobile} {
-    position: absolute;
-    bottom: 10px;
+    bottom: ${({ forSubsPage }) => (forSubsPage ? '20px' : '10px')};
+    margin-bottom: ${({ forSubsPage }) => (forSubsPage ? '0' : '')};
+    position: ${({ forSubsPage }) => (forSubsPage ? 'absolute' : 'relative')};
  }
 `

--- a/src/features/Register/components/AdditionalSubscription/styled.tsx
+++ b/src/features/Register/components/AdditionalSubscription/styled.tsx
@ -1,5 +1,7 @@
 import styled from 'styled-components/macro'

+import { devices } from 'config/devices'
+
 export const PriceItem = styled.div`
  position: relative;
  width: 288px;
@ -11,6 +13,14 @@ export const PriceItem = styled.div`
  background: #3F3F3F;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  border-radius: 2px;
+
+  @media${devices.tablet} {
+    width: 162px;
+    height: 100px;
+    padding: 12px 5px;
+    border-radius: 10px;
+    margin-right: 10px;
+  }
 `

 export const PriceItemTitle = styled.span`
@ -20,6 +30,11 @@ export const PriceItemTitle = styled.span`
  line-height: 24px;
  color: ${({ theme: { colors } }) => colors.text};
  margin: 3px 5px 0 0;
+
+  @media${devices.tablet} {
+   text-align: center;
+   line-height: 18px;
+  }
 `

 export const PriceItemCol = styled.div`
--- a/src/features/Register/components/MainSubscription/index.tsx
+++ b/src/features/Register/components/MainSubscription/index.tsx
@ -20,7 +20,7 @@ export const MainSubscription = ({ price, title }: TMainSubscription) => (
      <Radio name='mainSubscription' id={title} />
      <SubscriptionTitle>{title}</SubscriptionTitle>
    </Row>
-    <Row left={70} bottom={100}>
+    <Row isPriceRow>
      <Price amount={price} />
    </Row>
  </SubscriptionWrapper>
--- a/src/features/Register/components/Price/styled.tsx
+++ b/src/features/Register/components/Price/styled.tsx
@ -1,8 +1,14 @@
 import styled from 'styled-components/macro'

+import { devices } from 'config/devices'
+
 export const PriceWrapper = styled.div`
  display: flex;
  align-items: flex-start;
+
+  @media${devices.tablet} {
+    justify-content: center;
+   }
 `

 export const PriceAmount = styled.span`
@ -11,6 +17,10 @@ export const PriceAmount = styled.span`
  font-size: 48px;
  line-height: 40px;
  color: ${({ theme: { colors } }) => colors.text};
+
+  @media${devices.tablet} {
+    font-size: 36px;
+  }
 `

 export const PriceDetails = styled.span`
@ -21,4 +31,8 @@ export const PriceDetails = styled.span`
  line-height: 21px;
  color: ${({ theme: { colors } }) => colors.text};
  text-transform: uppercase;
+
+  @media${devices.tablet} {
+    font-size: 11px;
+  }
 `
--- a/src/features/Register/components/SubscriptionsStep/index.tsx
+++ b/src/features/Register/components/SubscriptionsStep/index.tsx
@ -1,4 +1,7 @@
 import React, { Fragment } from 'react'
+import { useRouteMatch } from 'react-router-dom'
+
+import { PAGES } from 'config'

 import { T9n } from 'features/T9n'
 import { ButtonSolid } from 'features/Common/Button'
@ -20,44 +23,47 @@ import {
  TotalPriceDetails,
 } from './styled'

-export const SubscriptionStep = () => (
-  <Fragment>
-    <SubscriptionsBlock>
-      <BlockTitle>
-        <T9n t='step_title_subscription' />
-      </BlockTitle>
-      <SubscriptionList>
-        <SubscriptionListItem>
-          <MainSubscription title='Бесплатная' price={0} />
-        </SubscriptionListItem>
-        <SubscriptionListItem>
-          <MainSubscription title='Базовая' price={1999} />
-        </SubscriptionListItem>
-      </SubscriptionList>
-    </SubscriptionsBlock>
-    <SubscriptionsBlock forAdditionalTitle>
-      <AdditionalBlockTitle>
-        <T9n t='subscription_extra' />
-      </AdditionalBlockTitle>
-      <PricesBlock>
-        <ArrowLeft />
-        <AdditionalSubscription title='Российская премьер-лига' price={1999} />
-        <AdditionalSubscription title='Primera División' price={1999} />
-        <AdditionalSubscription title='Manchester United' price={999} />
-        <AdditionalSubscription title='Василий Березуцкий' price={299} />
-        <ArrowRight />
-      </PricesBlock>
-    </SubscriptionsBlock>
-    <ButtonsBlock forSubsPage>
-      <ButtonSolid>
-        <T9n t='subscription_done' />
-      </ButtonSolid>
-      <TotalInfoBlock>
-        <TotalInfoText>Базовая + 2 дополнительно <T9n t='subscription_for' />
-          <TotalPriceAmmount>6997</TotalPriceAmmount>
-          <TotalPriceDetails>₽ / МЕС</TotalPriceDetails>
-        </TotalInfoText>
-      </TotalInfoBlock>
-    </ButtonsBlock>
-  </Fragment>
-)
+export const SubscriptionStep = () => {
+  const isSubsStep = useRouteMatch(`${PAGES.register}/subscriptions`)?.isExact || false
+  return (
+    <Fragment>
+      <SubscriptionsBlock isSubsStep={isSubsStep}>
+        <BlockTitle>
+          <T9n t='step_title_subscription' />
+        </BlockTitle>
+        <SubscriptionList>
+          <SubscriptionListItem>
+            <MainSubscription title='Бесплатная' price={0} />
+          </SubscriptionListItem>
+          <SubscriptionListItem>
+            <MainSubscription title='Базовая' price={1999} />
+          </SubscriptionListItem>
+        </SubscriptionList>
+      </SubscriptionsBlock>
+      <SubscriptionsBlock forAdditionalTitle>
+        <AdditionalBlockTitle>
+          <T9n t='subscription_extra' />
+        </AdditionalBlockTitle>
+        <PricesBlock>
+          <ArrowLeft />
+          <AdditionalSubscription title='Российская премьер-лига' price={1999} />
+          <AdditionalSubscription title='Primera División' price={1999} />
+          <AdditionalSubscription title='Manchester United' price={999} />
+          <AdditionalSubscription title='Василий Березуцкий' price={299} />
+          <ArrowRight />
+        </PricesBlock>
+      </SubscriptionsBlock>
+      <ButtonsBlock forSubsPage>
+        <ButtonSolid>
+          <T9n t='subscription_done' />
+        </ButtonSolid>
+        <TotalInfoBlock>
+          <TotalInfoText>Базовая + 2 дополнительно <T9n t='subscription_for' />
+            <TotalPriceAmmount>6997</TotalPriceAmmount>
+            <TotalPriceDetails>₽ / МЕС</TotalPriceDetails>
+          </TotalInfoText>
+        </TotalInfoBlock>
+      </ButtonsBlock>
+    </Fragment>
+  )
+}
--- a/src/features/Register/components/SubscriptionsStep/styled.tsx
+++ b/src/features/Register/components/SubscriptionsStep/styled.tsx
@ -1,10 +1,48 @@
 import styled from 'styled-components/macro'

-export const SubscriptionsBlock = styled.div<{forAdditionalTitle?: boolean}>`
+import { devices } from 'config/devices'
+
+type SubscriptionsBlockProps = {
+  forAdditionalTitle?: boolean,
+  isSubsStep?: boolean,
+}
+
+export const SubscriptionList = styled.ul`
+  display: flex;
+  margin-top: 40px;
+
+  @media${devices.laptop} {
+    margin-top: 27px;
+  }
+
+  @media${devices.tablet} {
+    margin-top: 30px;
+  }
+`
+
+export const SubscriptionsBlock = styled.div<SubscriptionsBlockProps>`
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: ${({ forAdditionalTitle }) => (forAdditionalTitle ? '75px' : '80px')};
+
+  @media${devices.laptop} {
+    margin-top: ${({ forAdditionalTitle, isSubsStep }) => {
+    if (forAdditionalTitle) return '42px'
+    if (isSubsStep) return '84px'
+    return '80px'
+  }};
+  }
+
+  @media${devices.tablet} {
+    margin-top: ${({ forAdditionalTitle, isSubsStep }) => {
+    if (forAdditionalTitle) return '42px'
+    if (isSubsStep) return '50px'
+    return '80px'
+  }};
+  }
+
+
 `

 export const BlockTitle = styled.span`
@ -15,16 +53,25 @@ export const BlockTitle = styled.span`
  line-height: 24px;
  color: ${({ theme: { colors } }) => colors.text};
  transition: color 0.3s ease-in-out;
+
+  @media${devices.tablet} {
+    font-size: 24px;
+    font-weight: 600px;
+  }
 `

 export const AdditionalBlockTitle = styled(BlockTitle)`
  font-size: 32px;
  margin-bottom: 40px;
-`

-export const SubscriptionList = styled.ul`
-  display: flex;
-  margin-top: 40px;
+  @media${devices.laptop} {
+    margin-bottom: 30px;
+  }
+
+  @media${devices.tablet} {
+    font-size: 24px;
+    font-weight: 600px;
+  }
 `

 export const SubscriptionListItem = styled.li``
@ -40,6 +87,15 @@ export const SubscriptionWrapper = styled.div`
  background: #3F3F3F;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  border-radius: 2px;
+
+  @media${devices.tablet} {
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    width: 163px;
+    height: 100px;
+    border-radius: 10px;
+  }
 `

 export const SubscriptionTitle = styled.span`
@ -49,18 +105,21 @@ export const SubscriptionTitle = styled.span`
  line-height: 21px;
  color: ${({ theme: { colors } }) => colors.text};
 `
-
-type TRow = {
-  bottom?: number,
-  left?: number,
+type RowProps = {
+  isPriceRow?: boolean,
 }

-export const Row = styled.div<TRow>`
+export const Row = styled.div<RowProps>`
  position: absolute;
  display: flex;
  align-items: center;
-  left: ${({ left }) => left}px;
-  bottom: ${({ bottom }) => bottom}px;
+  left: ${({ isPriceRow }) => (isPriceRow ? '70px' : '')};
+  bottom: ${({ isPriceRow }) => (isPriceRow ? '100px' : '')};
+
+  @media${devices.tablet} {
+    position: static;
+    margin-top: ${({ isPriceRow }) => (isPriceRow ? '9px' : '')};
+  }
 `

 export const PricesBlock = styled.div`
@ -68,6 +127,12 @@ export const PricesBlock = styled.div`
  display: flex;
  justify-content: space-between;
  position: relative;
+
+  @media${devices.mobile} {
+    max-width: 370px;
+    overflow-x: auto;
+
+  }
 `

 export const TotalInfoBlock = styled.div`
@ -77,6 +142,13 @@ export const TotalInfoBlock = styled.div`
  flex-wrap: wrap;
  top: 4px;
  left: 294px;
+
+  @media${devices.tablet} {
+    position: static;
+    order: -1;
+    margin-bottom: 10px;
+    width: 100%;
+  }
 `

 export const TotalInfoText = styled.span`
--- a/src/features/Register/index.tsx
+++ b/src/features/Register/index.tsx
@ -14,8 +14,9 @@ import { RegistrationSuccessful } from './components/RegistrationSuccessful'

 export const Register = () => {
  const isCardStep = useRouteMatch(`${PAGES.register}/card`)?.isExact || false
+  const isSubsStep = useRouteMatch(`${PAGES.register}/subscriptions`)?.isExact || false
  return (
-    <CustomCenterBlock isCardStep={isCardStep}>
+    <CustomCenterBlock isCardStep={isCardStep} isSubsStep={isSubsStep}>
      <Logo />
      <Route exact path={`${PAGES.register}`}>
        <RegistrationStep />
--- a/src/features/Register/styled.tsx
+++ b/src/features/Register/styled.tsx
@ -133,11 +133,19 @@ export const Card = styled.div`
     }
  }
 `
+type CustomCenterBlockProps = {
+  isCardStep: boolean,
+  isSubsStep: boolean,
+}

-export const CustomCenterBlock = styled(CenterBlock)<{isCardStep: boolean}>`
+export const CustomCenterBlock = styled(CenterBlock)<CustomCenterBlockProps>`

  @media${devices.laptop} {
-    margin-top: ${({ isCardStep }) => (isCardStep ? '154px' : '53px')};
+    margin-top: ${({ isCardStep, isSubsStep }) => {
+    if (isCardStep) return '154px'
+    if (isSubsStep) return '89px'
+    return '53px'
+  }};

    ${InputWrapper} {
      margin-top: 12px;
@ -151,7 +159,8 @@ export const CustomCenterBlock = styled(CenterBlock)<{isCardStep: boolean}>`
    }

    ${ButtonsBlock} {
-      margin-top: 63px;
+      margin-top: ${({ isSubsStep }) => ((isSubsStep) ? '84px' : '63px')};
+  
    }

    ${Error} {
@ -169,6 +178,11 @@ export const CustomCenterBlock = styled(CenterBlock)<{isCardStep: boolean}>`
  }

  @media${devices.tablet} {
+    margin-top: ${({ isCardStep, isSubsStep }) => {
+    if (isCardStep) return '154px'
+    if (isSubsStep) return '69px'
+    return '53px'
+  }};

    ${InputWrapper} {
      margin-top: -8px;