From 21347e518aad45bf1f44bb97ae54220bc0661c2a Mon Sep 17 00:00:00 2001 From: Farber Denis <42491613+Bombamuerta@users.noreply.github.com> Date: Mon, 6 Sep 2021 16:41:35 +0300 Subject: [PATCH] Ott 1283 user account page responsive (#458) * style(#1283): personal block section styles * style(#1283): stylelint fixes * style(#1283): cards subs payment history sections styles * style(#1283): min fixes Co-authored-by: Farber Denis --- .../components/ElementContainer/index.tsx | 2 +- src/features/AddCardForm/styled.tsx | 3 ++ .../components/SelectedCard/index.tsx | 2 - src/features/Common/Input/styled.tsx | 10 +++++ src/features/Common/NewInput/styled.tsx | 2 +- src/features/Common/PasswordInput/index.tsx | 3 ++ .../components/PlaylistFormats/styled.tsx | 1 - .../components/InterviewButton/index.tsx | 2 + .../components/Settings/styled.tsx | 1 + .../components/LogoutButton/index.tsx | 3 ++ .../components/PageBankCards/styled.tsx | 9 ++++ .../components/PagePaymentsHistory/styled.tsx | 7 +++ .../components/PageSubscriptions/styled.tsx | 3 ++ .../components/PersonalInfoForm/styled.tsx | 4 ++ src/features/UserAccount/styled.tsx | 44 ++++++++++++++++--- 15 files changed, 84 insertions(+), 12 deletions(-) diff --git a/src/features/AddCardForm/components/ElementContainer/index.tsx b/src/features/AddCardForm/components/ElementContainer/index.tsx index 00d365c2..26164392 100644 --- a/src/features/AddCardForm/components/ElementContainer/index.tsx +++ b/src/features/AddCardForm/components/ElementContainer/index.tsx @@ -20,7 +20,7 @@ const Label = styled.label` box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); border-radius: 2px; border: 1px solid transparent; - + /* stylelint-disable-next-line */ font-family: Montserrat; font-style: normal; font-weight: normal; diff --git a/src/features/AddCardForm/styled.tsx b/src/features/AddCardForm/styled.tsx index 29aeba41..b37d0f16 100644 --- a/src/features/AddCardForm/styled.tsx +++ b/src/features/AddCardForm/styled.tsx @@ -73,6 +73,9 @@ export const SectionTitle = styled.span` ? css` margin-bottom: 25px; font-size: 10px; + @media (orientation: landscape){ + margin-bottom: 10px; + } ` : ''}; diff --git a/src/features/BuyMatchPopup/components/SelectedCard/index.tsx b/src/features/BuyMatchPopup/components/SelectedCard/index.tsx index 9148bb77..a7ccfc80 100644 --- a/src/features/BuyMatchPopup/components/SelectedCard/index.tsx +++ b/src/features/BuyMatchPopup/components/SelectedCard/index.tsx @@ -36,10 +36,8 @@ const CardInfo = styled.span` const ChangeCardButton = styled(ButtonOutline)` border: none; - padding: 0; width: auto; height: auto; - padding: 0 10px; margin-left: 10px; line-height: 20px; diff --git a/src/features/Common/Input/styled.tsx b/src/features/Common/Input/styled.tsx index d10af21d..afaa9d65 100644 --- a/src/features/Common/Input/styled.tsx +++ b/src/features/Common/Input/styled.tsx @@ -71,6 +71,7 @@ export const LabelTitle = styled.p` display: block; padding-left: 10px; font-size: 12px; + min-width: 76px; ` : ''}; ` @@ -111,6 +112,7 @@ const inputStyles = css` ${isMobileDevice ? css` font-size: 12px; + margin-left: 15px; ` : ''}; @@ -160,6 +162,14 @@ export const Column = styled.div` width: 100%; position: relative; } + + ${isMobileDevice + ? css` + @media (orientation: landscape){ + max-width: 100%; + } + ` + : ''} ` type ErrorProps = { diff --git a/src/features/Common/NewInput/styled.tsx b/src/features/Common/NewInput/styled.tsx index 14420cfe..4e93df87 100644 --- a/src/features/Common/NewInput/styled.tsx +++ b/src/features/Common/NewInput/styled.tsx @@ -48,6 +48,7 @@ const resetStyles = css` :-webkit-autofill:focus, :-webkit-autofill:active { background-clip: text; + /* stylelint-disable-next-line */ -webkit-background-clip: text; -webkit-text-fill-color: #fff; caret-color: #fff; @@ -64,7 +65,6 @@ export const InputStyled = styled.input` color: ${({ theme }) => theme.colors.text100}; ::placeholder { - color: rgba(255, 255, 255, 0.5); font-weight: normal; width: 100%; color: ${({ theme }) => theme.colors.text100}; diff --git a/src/features/Common/PasswordInput/index.tsx b/src/features/Common/PasswordInput/index.tsx index 4175b64e..e05dbf92 100644 --- a/src/features/Common/PasswordInput/index.tsx +++ b/src/features/Common/PasswordInput/index.tsx @@ -25,6 +25,9 @@ const VisibilityButton = styled(BaseButton)` right: 5px; top: 50%; transform: translateY(-50%); + @media (orientation: landscape){ + right: 10px; + } ` : ''}; @media ${devices.tablet} { diff --git a/src/features/MatchPopup/components/PlaylistFormats/styled.tsx b/src/features/MatchPopup/components/PlaylistFormats/styled.tsx index b266c367..195a2d41 100644 --- a/src/features/MatchPopup/components/PlaylistFormats/styled.tsx +++ b/src/features/MatchPopup/components/PlaylistFormats/styled.tsx @@ -13,7 +13,6 @@ type Props = { export const Wrapper = styled.div` display: flex; flex-direction: column; - margin-top: 62px; padding-left: 35px; padding-right: 20px; margin-top: ${({ marginTop }) => `${marginTop ?? 62}px`}; diff --git a/src/features/MatchSidePlaylists/components/InterviewButton/index.tsx b/src/features/MatchSidePlaylists/components/InterviewButton/index.tsx index 8af3d611..c8083979 100644 --- a/src/features/MatchSidePlaylists/components/InterviewButton/index.tsx +++ b/src/features/MatchSidePlaylists/components/InterviewButton/index.tsx @@ -11,8 +11,10 @@ type InterviewProps = { const InterviewTitle = styled(Title)` white-space: normal; text-align: start; + /* stylelint-disable-next-line */ display: -webkit-box; -webkit-line-clamp: 3; + /* stylelint-disable-next-line */ -webkit-box-orient: vertical; ${({ overlength }) => ( diff --git a/src/features/MultiSourcePlayer/components/Settings/styled.tsx b/src/features/MultiSourcePlayer/components/Settings/styled.tsx index b00e418a..732ce9af 100644 --- a/src/features/MultiSourcePlayer/components/Settings/styled.tsx +++ b/src/features/MultiSourcePlayer/components/Settings/styled.tsx @@ -61,6 +61,7 @@ export const QualityItem = styled.li` text-align: right; font-style: normal; font-weight: normal; + /* stylelint-disable-next-line */ font-family: Montserrat; font-size: 10px; line-height: 12px; diff --git a/src/features/UserAccount/components/LogoutButton/index.tsx b/src/features/UserAccount/components/LogoutButton/index.tsx index e749b9e6..69ee0a67 100644 --- a/src/features/UserAccount/components/LogoutButton/index.tsx +++ b/src/features/UserAccount/components/LogoutButton/index.tsx @@ -23,6 +23,9 @@ const Button = styled.button` bottom: -10px; font-size: 12px; height: 25px; + @media (orientation: landscape){ + top: 60vh; + } ` : ''}; diff --git a/src/features/UserAccount/components/PageBankCards/styled.tsx b/src/features/UserAccount/components/PageBankCards/styled.tsx index 81cdfa36..6ffe722c 100644 --- a/src/features/UserAccount/components/PageBankCards/styled.tsx +++ b/src/features/UserAccount/components/PageBankCards/styled.tsx @@ -11,6 +11,9 @@ export const Wrapper = styled.div` ${isMobileDevice ? css` width: 100%; + @media (orientation: landscape){ + margin-top: 0; + } ` : ''}; ` @@ -70,4 +73,10 @@ export const InfoText = styled.div` font-size: 20px; line-height: 27px; margin-bottom: 40px; + ${isMobileDevice + ? css` + font-size: 16px; + text-align: center; + ` + : ''}; ` diff --git a/src/features/UserAccount/components/PagePaymentsHistory/styled.tsx b/src/features/UserAccount/components/PagePaymentsHistory/styled.tsx index 76a9f6e8..9446a205 100644 --- a/src/features/UserAccount/components/PagePaymentsHistory/styled.tsx +++ b/src/features/UserAccount/components/PagePaymentsHistory/styled.tsx @@ -5,6 +5,13 @@ import { isMobileDevice } from 'config/userAgent' export const Wrapper = styled.div` margin-top: 26px; + ${isMobileDevice + ? css` + @media (orientation: landscape){ + margin-top: 0; + } + ` + : ''} ` export const Table = styled.table`` diff --git a/src/features/UserAccount/components/PageSubscriptions/styled.tsx b/src/features/UserAccount/components/PageSubscriptions/styled.tsx index 4383289c..f1a59609 100644 --- a/src/features/UserAccount/components/PageSubscriptions/styled.tsx +++ b/src/features/UserAccount/components/PageSubscriptions/styled.tsx @@ -68,6 +68,9 @@ export const Tab = styled.button` bottom: -15px; height: 2px; } + @media (orientation: landscape){ + width: 50%; + } ` : ''} ` diff --git a/src/features/UserAccount/components/PersonalInfoForm/styled.tsx b/src/features/UserAccount/components/PersonalInfoForm/styled.tsx index 2d6dd465..1b3a224b 100644 --- a/src/features/UserAccount/components/PersonalInfoForm/styled.tsx +++ b/src/features/UserAccount/components/PersonalInfoForm/styled.tsx @@ -39,6 +39,10 @@ export const Form = styled.div` ${isMobileDevice ? css` width: 100%; + @media (orientation: landscape){ + padding-top: 0; + height: auto; + } ` : ''}; ` diff --git a/src/features/UserAccount/styled.tsx b/src/features/UserAccount/styled.tsx index 10c37dbb..cafcc9a6 100644 --- a/src/features/UserAccount/styled.tsx +++ b/src/features/UserAccount/styled.tsx @@ -27,14 +27,15 @@ export const SolidButton = styled(ButtonSolid)` justify-content: center; } - @media ${devices.mobile} { - width: 100%; - } ${isMobileDevice ? css` height: 35px; display: flex; justify-content: center; + width: 100%; + @media (orientation: landscape){ + width: auto; + } ` : ''}; ` @@ -90,6 +91,11 @@ export const ContentWrapper = styled.div` ${isMobileDevice ? css` margin-top: 10px; + @media (orientation: landscape){ + margin-top: 0; + padding-left: 28px; + height: 100%; + } ` : ''}; ` @@ -119,6 +125,10 @@ export const Body = styled.div` ${isMobileDevice ? css` width: 100%; + @media (orientation: landscape){ + flex-direction: row; + height: auto; + } ` : ''}; ` @@ -133,6 +143,9 @@ export const Aside = styled.aside` ${isMobileDevice ? css` height: auto; + @media (orientation: landscape){ + min-width: 30%; + } ` : ''}; ` @@ -154,6 +167,15 @@ export const Navigations = styled.nav` @media ${devices.mobile} { width: 100%; } + + ${isMobileDevice + ? css` + @media (orientation: landscape){ + border-right: 1px solid rgba(255, 255, 255, 0.4); + height: 100%; + } + ` + : ''}; ` type StyledLinkProps = { @@ -184,10 +206,18 @@ export const StyledLink = styled(NavLink).attrs( line-height: 5.3rem; } - @media ${devices.mobile} { - font-size: 14px; - line-height: 35px; - } + ${isMobileDevice + ? css` + @media (orientation: landscape){ + font-size: 16px; + line-height: 35px; + } + @media (max-width: 750px){ + font-size: 16px; + line-height: 35px; + } + ` + : ''}; ` type InlineButtonProps = {