From 9783d62e73f620936439c9edf2575c655c160686 Mon Sep 17 00:00:00 2001 From: Rakov Roman Date: Tue, 26 Apr 2022 15:33:19 +0300 Subject: [PATCH 1/6] fix(#2404): fixed layout of the modal subscription selection window --- .../components/PackagesList/styled.tsx | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx index b23c4faa..e0b3f747 100644 --- a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx +++ b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx @@ -33,7 +33,7 @@ export const List = styled.ul` ${isMobileDevice ? css` padding: 0; - height: 176px; + height: 180px; margin-top: 19px; @media screen and (orientation: landscape){ margin-top: 10px; @@ -78,29 +78,29 @@ export const Item = styled.li.attrs(() => ({ @media (max-width: 750px) { height: 100%; } - ${isMobileDevice + + ${isMobileDevice ? css` padding: 5px 10px; - min-height: 52.29px; - height: 52.29px; - :not(:last-child) { - margin-bottom: 10px; - @media screen and (orientation: landscape){ - margin-bottom: 5.24px; - } - @media (max-width: 850px) and (orientation: landscape){ + @media (max-width: 750px) { min-height: 52.29px; - height: 52.29px; + height: auto; } + + :not(:last-child) { + margin-bottom: 10px; + + @media screen and (orientation: landscape) { + margin-bottom: 5.24px; + } } - ` - : ''}; + ` : ''}; - @media (max-width: 850px) and (orientation: landscape){ - min-height: 52.29px; - height: 52.29px; - } + @media (max-width: 850px) and (orientation: landscape){ + min-height: 52.29px; + height: auto; + } ` export const InfoWrapper = styled.div` @@ -213,6 +213,7 @@ export const ScAutoRenewal = styled(PriceDetails)` line-height: 21px; font-size: 12px; text-transform: none; + white-space: nowrap; margin: 0; color: ${({ theme: { colors } }) => colors.text70}; ` From f296ae18ab866f61509e987f2db0076d9c554ba4 Mon Sep 17 00:00:00 2001 From: Rakov Roman Date: Tue, 26 Apr 2022 17:09:28 +0300 Subject: [PATCH 2/6] fix(#2404): fixed height list of packages --- src/features/BuyMatchPopup/components/PackagesList/styled.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx index e0b3f747..4575bbe3 100644 --- a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx +++ b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx @@ -11,7 +11,6 @@ import { export const List = styled.ul` width: 100%; - height: 460px; overflow-y: auto; margin-top: 25px; padding: 0 40px; @@ -33,11 +32,9 @@ export const List = styled.ul` ${isMobileDevice ? css` padding: 0; - height: 180px; margin-top: 19px; @media screen and (orientation: landscape){ margin-top: 10px; - height: 166px; } ` : ''}; From fa6f8d22ec9f82c746c9df582359837d11ec36bf Mon Sep 17 00:00:00 2001 From: Rakov Roman Date: Tue, 26 Apr 2022 15:33:19 +0300 Subject: [PATCH 3/6] fix(#2404): fixed layout of the modal subscription selection window --- .../components/PackagesList/styled.tsx | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx index b23c4faa..e0b3f747 100644 --- a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx +++ b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx @@ -33,7 +33,7 @@ export const List = styled.ul` ${isMobileDevice ? css` padding: 0; - height: 176px; + height: 180px; margin-top: 19px; @media screen and (orientation: landscape){ margin-top: 10px; @@ -78,29 +78,29 @@ export const Item = styled.li.attrs(() => ({ @media (max-width: 750px) { height: 100%; } - ${isMobileDevice + + ${isMobileDevice ? css` padding: 5px 10px; - min-height: 52.29px; - height: 52.29px; - :not(:last-child) { - margin-bottom: 10px; - @media screen and (orientation: landscape){ - margin-bottom: 5.24px; - } - @media (max-width: 850px) and (orientation: landscape){ + @media (max-width: 750px) { min-height: 52.29px; - height: 52.29px; + height: auto; } + + :not(:last-child) { + margin-bottom: 10px; + + @media screen and (orientation: landscape) { + margin-bottom: 5.24px; + } } - ` - : ''}; + ` : ''}; - @media (max-width: 850px) and (orientation: landscape){ - min-height: 52.29px; - height: 52.29px; - } + @media (max-width: 850px) and (orientation: landscape){ + min-height: 52.29px; + height: auto; + } ` export const InfoWrapper = styled.div` @@ -213,6 +213,7 @@ export const ScAutoRenewal = styled(PriceDetails)` line-height: 21px; font-size: 12px; text-transform: none; + white-space: nowrap; margin: 0; color: ${({ theme: { colors } }) => colors.text70}; ` From 1a47bd1aca908ad8ec70653550c73a33df98bcb6 Mon Sep 17 00:00:00 2001 From: Rakov Roman Date: Tue, 26 Apr 2022 17:09:28 +0300 Subject: [PATCH 4/6] fix(#2404): fixed height list of packages --- src/features/BuyMatchPopup/components/PackagesList/styled.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx index e0b3f747..4575bbe3 100644 --- a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx +++ b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx @@ -11,7 +11,6 @@ import { export const List = styled.ul` width: 100%; - height: 460px; overflow-y: auto; margin-top: 25px; padding: 0 40px; @@ -33,11 +32,9 @@ export const List = styled.ul` ${isMobileDevice ? css` padding: 0; - height: 180px; margin-top: 19px; @media screen and (orientation: landscape){ margin-top: 10px; - height: 166px; } ` : ''}; From ff1041bcb507783bdd5c2768b40a84cb84ead4a0 Mon Sep 17 00:00:00 2001 From: Rakov Roman Date: Thu, 5 May 2022 11:57:01 +0300 Subject: [PATCH 5/6] fix(#2404): added brazilian price into packages list popup --- Makefile | 2 +- .../components/PackagesList/styled.tsx | 11 ++- src/features/Modal/styled.tsx | 2 +- .../Price/components/BasePrice/index.tsx | 51 ++++++++++++++ .../Price/components/BrazilianPrice/index.tsx | 51 ++++++++++++++ .../components/BrazilianPrice/styled.tsx | 6 ++ src/features/Price/index.tsx | 67 +++++++++---------- src/features/Price/styled.tsx | 4 -- 8 files changed, 152 insertions(+), 42 deletions(-) create mode 100644 src/features/Price/components/BasePrice/index.tsx create mode 100644 src/features/Price/components/BrazilianPrice/index.tsx create mode 100644 src/features/Price/components/BrazilianPrice/styled.tsx diff --git a/Makefile b/Makefile index 5820759c..2fe29737 100644 --- a/Makefile +++ b/Makefile @@ -130,7 +130,7 @@ b-stage: build-b rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/b-wwwroot/ c-stage: build-c - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/c-wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/c-wwwroot/ d-stage: build-d rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/d-wwwroot/ diff --git a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx index 4575bbe3..f94c2d92 100644 --- a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx +++ b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx @@ -9,8 +9,11 @@ import { Period, } from 'features/Price/styled' +import { devices } from '../../../../config' + export const List = styled.ul` width: 100%; + height: 460px; overflow-y: auto; margin-top: 25px; padding: 0 40px; @@ -19,6 +22,7 @@ export const List = styled.ul` @media (max-width: 1370px) { max-height: 415px; + height: auto; } @media (max-height: 768px) { @@ -210,9 +214,14 @@ export const ScAutoRenewal = styled(PriceDetails)` line-height: 21px; font-size: 12px; text-transform: none; - white-space: nowrap; margin: 0; color: ${({ theme: { colors } }) => colors.text70}; + + @media ${devices.mobile} { + line-height: normal; + font-size: 10px; + text-align: center; + } ` export const ScPriceContainer = styled.div` diff --git a/src/features/Modal/styled.tsx b/src/features/Modal/styled.tsx index 66b0f288..9e5c4a99 100644 --- a/src/features/Modal/styled.tsx +++ b/src/features/Modal/styled.tsx @@ -6,7 +6,7 @@ export const ModalContainer = styled.div` position: fixed; top: 0; left: 0; - height: 100vh; + height: 100%; width: 100vw; display: flex; align-items: center; diff --git a/src/features/Price/components/BasePrice/index.tsx b/src/features/Price/components/BasePrice/index.tsx new file mode 100644 index 00000000..4080f83a --- /dev/null +++ b/src/features/Price/components/BasePrice/index.tsx @@ -0,0 +1,51 @@ +import { currencySymbols } from 'config' + +import { T9n } from 'features/T9n' + +import { + Prefix, + PriceAmount, + PriceDetails, + PriceWrapper, + Currency, + Period, +} from '../../styled' + +type Props = { + amount: number, + className?: string, + currency?: string, + isFrom?: boolean, + perPeriod?: string | null, +} + +export const BasePrice = ({ + amount, + className, + currency = currencySymbols.RUB, + isFrom, + perPeriod, +}: Props) => ( + + { + isFrom + ? ( + + + + ) + : '' + } + {amount} + + {currency} + { + perPeriod && ( + + / + + ) + } + + +) diff --git a/src/features/Price/components/BrazilianPrice/index.tsx b/src/features/Price/components/BrazilianPrice/index.tsx new file mode 100644 index 00000000..2abce8a7 --- /dev/null +++ b/src/features/Price/components/BrazilianPrice/index.tsx @@ -0,0 +1,51 @@ +import { currencySymbols } from 'config' + +import { T9n } from 'features/T9n' + +import { + Prefix, + PriceDetails, + PriceWrapper, + Currency, + Period, +} from '../../styled' +import { PriceAmount } from './styled' + +type Props = { + amount: number, + className?: string, + currency?: string, + isFrom?: boolean, + perPeriod?: string | null, +} + +export const BrazilianPrice = ({ + amount, + className, + currency = currencySymbols.BRL, + isFrom, + perPeriod, +}: Props) => ( + + { + isFrom + ? ( + + + + ) + : '' + } + + {currency} + {amount} + { + perPeriod && ( + + / + + ) + } + + +) diff --git a/src/features/Price/components/BrazilianPrice/styled.tsx b/src/features/Price/components/BrazilianPrice/styled.tsx new file mode 100644 index 00000000..69bbe934 --- /dev/null +++ b/src/features/Price/components/BrazilianPrice/styled.tsx @@ -0,0 +1,6 @@ +import styled from 'styled-components' +import { PriceAmount as BasePriceAmount } from '../../styled' + +export const PriceAmount = styled(BasePriceAmount)` + margin-right: 4px; +` diff --git a/src/features/Price/index.tsx b/src/features/Price/index.tsx index f40b6257..1c1d85d5 100644 --- a/src/features/Price/index.tsx +++ b/src/features/Price/index.tsx @@ -1,17 +1,10 @@ import { currencySymbols } from 'config' -import { T9n } from 'features/T9n' +import { useMemo } from 'react' +import { BasePrice } from './components/BasePrice' +import { BrazilianPrice } from './components/BrazilianPrice' -import { - Prefix, - PriceAmount, - PriceDetails, - PriceWrapper, - Currency, - Period, -} from './styled' - -type Props = { +export type PriceProps = { amount: number, className?: string, currency?: string, @@ -19,33 +12,37 @@ type Props = { perPeriod?: string | null, } -export const Price = ({ +export const Price: React.FC = ({ amount, className, - currency = currencySymbols.RUB, + currency, isFrom, perPeriod, -}: Props) => ( - - { - isFrom - ? ( - - - +}) => { + const priceContent = useMemo(() => { + switch (currency) { + case currencySymbols.BRL: + return ( + ) - : '' - } - {amount} - - {currency} - { - perPeriod && ( - - / - + default: + return ( + ) - } - - -) + } + }, [amount, className, currency, isFrom, perPeriod]) + + return priceContent +} diff --git a/src/features/Price/styled.tsx b/src/features/Price/styled.tsx index dd90ce97..17ffcb42 100644 --- a/src/features/Price/styled.tsx +++ b/src/features/Price/styled.tsx @@ -27,10 +27,6 @@ export const PriceAmount = styled.span` @media ${devices.tablet} { font-size: 36px; } - - @media ${devices.mobile} { - margin-left: 8px; - } ` export const PriceDetails = styled.span` From dc64ca6d7de7c5a88dabf4a9c49146f29d82e092 Mon Sep 17 00:00:00 2001 From: Rakov Roman Date: Thu, 5 May 2022 12:30:58 +0300 Subject: [PATCH 6/6] fix(#2404): fixed check for mobile device --- Makefile | 2 +- .../components/PackagesList/styled.tsx | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/Makefile b/Makefile index 2fe29737..5820759c 100644 --- a/Makefile +++ b/Makefile @@ -130,7 +130,7 @@ b-stage: build-b rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/b-wwwroot/ c-stage: build-c - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/c-wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/c-wwwroot/ d-stage: build-d rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/d-wwwroot/ diff --git a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx index f94c2d92..87613178 100644 --- a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx +++ b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx @@ -9,8 +9,6 @@ import { Period, } from 'features/Price/styled' -import { devices } from '../../../../config' - export const List = styled.ul` width: 100%; height: 460px; @@ -217,11 +215,13 @@ export const ScAutoRenewal = styled(PriceDetails)` margin: 0; color: ${({ theme: { colors } }) => colors.text70}; - @media ${devices.mobile} { - line-height: normal; - font-size: 10px; - text-align: center; - } + ${isMobileDevice + ? css` + line-height: normal; + font-size: 10px; + text-align: center; + ` + : ''}; ` export const ScPriceContainer = styled.div`