From 81e1792a1c4aab2f5da8f5d5bfd27a45bfb61a49 Mon Sep 17 00:00:00 2001 From: Sergiu <46888793+Serj10GR@users.noreply.github.com> Date: Mon, 14 Sep 2020 17:40:52 +0300 Subject: [PATCH] Ott 313 adaptive subs page (#142) --- src/features/Common/Checkbox/styled.tsx | 21 ++++ src/features/Common/Radio/styled.tsx | 25 +++++ src/features/Login/styled.tsx | 5 +- .../AdditionalSubscription/styled.tsx | 15 +++ .../components/MainSubscription/index.tsx | 2 +- .../Register/components/Price/styled.tsx | 14 +++ .../components/SubscriptionsStep/index.tsx | 88 +++++++++-------- .../components/SubscriptionsStep/styled.tsx | 96 ++++++++++++++++--- src/features/Register/index.tsx | 3 +- src/features/Register/styled.tsx | 20 +++- 10 files changed, 229 insertions(+), 60 deletions(-) diff --git a/src/features/Common/Checkbox/styled.tsx b/src/features/Common/Checkbox/styled.tsx index 29b41c8c..7ae9326b 100644 --- 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; + } + + } ` diff --git a/src/features/Common/Radio/styled.tsx b/src/features/Common/Radio/styled.tsx index eae7aa32..0b09ee4d 100644 --- 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; + } + } ` diff --git a/src/features/Login/styled.tsx b/src/features/Login/styled.tsx index 8d184025..1c867ea3 100644 --- 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')}; } ` diff --git a/src/features/Register/components/AdditionalSubscription/styled.tsx b/src/features/Register/components/AdditionalSubscription/styled.tsx index c73bbb30..60f09838 100644 --- 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` diff --git a/src/features/Register/components/MainSubscription/index.tsx b/src/features/Register/components/MainSubscription/index.tsx index 9cd9f593..f4dc1e82 100644 --- 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) => ( {title} - + diff --git a/src/features/Register/components/Price/styled.tsx b/src/features/Register/components/Price/styled.tsx index cdd64c3d..d89b2393 100644 --- 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; + } ` diff --git a/src/features/Register/components/SubscriptionsStep/index.tsx b/src/features/Register/components/SubscriptionsStep/index.tsx index a423fca7..04c6804f 100644 --- 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 = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Базовая + 2 дополнительно - 6997 - ₽ / МЕС - - - - -) +export const SubscriptionStep = () => { + const isSubsStep = useRouteMatch(`${PAGES.register}/subscriptions`)?.isExact || false + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Базовая + 2 дополнительно + 6997 + ₽ / МЕС + + + + + ) +} diff --git a/src/features/Register/components/SubscriptionsStep/styled.tsx b/src/features/Register/components/SubscriptionsStep/styled.tsx index ebb1aba6..e3bd3598 100644 --- 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` 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` +export const Row = styled.div` 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` diff --git a/src/features/Register/index.tsx b/src/features/Register/index.tsx index 7ed619c4..dc15dfeb 100644 --- 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 ( - + diff --git a/src/features/Register/styled.tsx b/src/features/Register/styled.tsx index 6c8ec1a9..41beea05 100644 --- 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)` @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;