From fd9cbf786ca3076e521689e9881eaea77c40a779 Mon Sep 17 00:00:00 2001 From: Sergiu <46888793+Serj10GR@users.noreply.github.com> Date: Fri, 18 Sep 2020 10:53:10 +0300 Subject: [PATCH] Ott 307 team profile adaptive (#154) --- src/features/Header/index.tsx | 6 ---- src/features/Header/styled.tsx | 4 +-- .../components/TournamentFilter/styled.tsx | 9 ++++-- src/features/HeaderMobile/styled.tsx | 6 ++++ src/features/MatchCard/styled.tsx | 8 +++-- src/features/Matches/styled.tsx | 5 +++ src/features/MatchesGrid/styled.tsx | 5 +-- src/features/MatchesSlider/styled.tsx | 10 ++++++ src/features/PlayerPage/index.tsx | 7 ++-- src/features/PlayerPage/styled.tsx | 11 +++++++ src/features/ProfileCard/styled.tsx | 4 ++- src/features/TeamPage/styled.tsx | 32 +++++++++++++++++++ src/features/ToggleScore/styled.tsx | 2 +- 13 files changed, 87 insertions(+), 22 deletions(-) create mode 100644 src/features/PlayerPage/styled.tsx diff --git a/src/features/Header/index.tsx b/src/features/Header/index.tsx index 93e11454..27bc4943 100644 --- a/src/features/Header/index.tsx +++ b/src/features/Header/index.tsx @@ -56,12 +56,6 @@ export const Header = () => ( - - - - - - diff --git a/src/features/Header/styled.tsx b/src/features/Header/styled.tsx index 9bb0e33f..f8cbfef7 100644 --- a/src/features/Header/styled.tsx +++ b/src/features/Header/styled.tsx @@ -57,7 +57,7 @@ export const SportFilterWrapper = styled(FilterWrapper)` width: 400px; @media ${devices.desktop} { - width: 350px; + width: 280px; } @media ${devices.laptop} { @@ -73,7 +73,7 @@ export const SportFilterWrapper = styled(FilterWrapper)` export const MenuWrapper = styled.div` display: flex; - margin-right: 57px; + margin-right: 14px; @media ${devices.laptop} { margin-right: 14px; diff --git a/src/features/HeaderFilters/components/TournamentFilter/styled.tsx b/src/features/HeaderFilters/components/TournamentFilter/styled.tsx index be0ba84c..54deb467 100644 --- a/src/features/HeaderFilters/components/TournamentFilter/styled.tsx +++ b/src/features/HeaderFilters/components/TournamentFilter/styled.tsx @@ -19,12 +19,17 @@ export const ListWrapper = styled.div` } @media ${devices.tablet} { - width: 200%; - left: -100%; + width: 100%; + left: 0; top: calc(-92vh + 36px); height: calc(92vh - 36px); } + @media ${devices.mobile} { + width: 200%; + left: -100%; + } + ${customScrollbar} ` diff --git a/src/features/HeaderMobile/styled.tsx b/src/features/HeaderMobile/styled.tsx index 58cc11fd..05515a25 100644 --- a/src/features/HeaderMobile/styled.tsx +++ b/src/features/HeaderMobile/styled.tsx @@ -1,5 +1,7 @@ import styled from 'styled-components/macro' +import { Wrapper } from 'features/Menu/styled' + export const HeaderMobileWrapper = styled.div` width: 100%; top: 0; @@ -42,6 +44,10 @@ export const HeaderIconsWrapper = styled.div` align-items: center; justify-content: space-around; min-width: 100px; + + ${Wrapper} { + margin-right: 0; + } ` export const IconSearchWrapper = styled.div` diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx index 2ff4a5a9..e7fd8db9 100644 --- a/src/features/MatchCard/styled.tsx +++ b/src/features/MatchCard/styled.tsx @@ -9,7 +9,7 @@ export const CardWrapper = styled.li.attrs({ })` position: relative; flex: 0 0 auto; - width: ${MATCH_CARD_WIDTH}px; + min-width: ${MATCH_CARD_WIDTH}px; height: 100%; padding-bottom: 18px; border-radius: 2px; @@ -21,7 +21,6 @@ export const CardWrapper = styled.li.attrs({ margin-right: 16px; @media ${devices.laptop} { - width: 279px; height: 279px; } @@ -128,7 +127,10 @@ export const TeamName = styled.span` overflow: hidden; ` -export const Score = styled.span`` +export const Score = styled.div` + text-align: center; + width: 10%; +` export const Rows = styled.div` width: fit-content; diff --git a/src/features/Matches/styled.tsx b/src/features/Matches/styled.tsx index e9b4a96d..914372f4 100644 --- a/src/features/Matches/styled.tsx +++ b/src/features/Matches/styled.tsx @@ -7,6 +7,11 @@ export const Section = styled.section` @media ${devices.tablet} { width: 100%; + padding: 0 16px; + } + + @media ${devices.mobile} { + padding: 0; } ` diff --git a/src/features/MatchesGrid/styled.tsx b/src/features/MatchesGrid/styled.tsx index b211769b..9d47de50 100644 --- a/src/features/MatchesGrid/styled.tsx +++ b/src/features/MatchesGrid/styled.tsx @@ -8,13 +8,10 @@ export const Wrapper = styled.ul` grid-gap: 13px; @media ${devices.large} { - grid-template-columns: repeat(auto-fit, minmax(270px, 280px )); + grid-template-columns: repeat(auto-fit, minmax(288px, 1fr )); } @media ${devices.tablet} { justify-content: center; } - @media ${devices.mobile} { - grid-template-columns: repeat(auto-fit, minmax(279px, 1fr )); - } ` diff --git a/src/features/MatchesSlider/styled.tsx b/src/features/MatchesSlider/styled.tsx index f0d7f0dc..fc88c45a 100644 --- a/src/features/MatchesSlider/styled.tsx +++ b/src/features/MatchesSlider/styled.tsx @@ -2,6 +2,8 @@ import styled from 'styled-components/macro' import { devices } from 'config/devices' +import { CardWrapper } from '../MatchCard/styled' + export const Wrapper = styled.div` position: relative; margin-bottom: 16px; @@ -16,8 +18,16 @@ export const Slides = styled.ul` display: none; } + ${CardWrapper} { + width: 288px; + } + @media ${devices.mobile} { flex-direction: column; + + ${CardWrapper} { + width: 100%; + } } ` diff --git a/src/features/PlayerPage/index.tsx b/src/features/PlayerPage/index.tsx index 4343ebe9..d75ec122 100644 --- a/src/features/PlayerPage/index.tsx +++ b/src/features/PlayerPage/index.tsx @@ -1,8 +1,9 @@ -import React, { Fragment } from 'react' +import React from 'react' import { ProfileTypes } from 'config' import { ProfileCard } from 'features/ProfileCard' import { Matches } from 'features/Matches' +import { Content } from './styled' import { usePlayerPage } from './hooks' @@ -14,13 +15,13 @@ export const PlayerPage = () => { } = usePlayerPage() return ( - + - + ) } diff --git a/src/features/PlayerPage/styled.tsx b/src/features/PlayerPage/styled.tsx new file mode 100644 index 00000000..c3055aa7 --- /dev/null +++ b/src/features/PlayerPage/styled.tsx @@ -0,0 +1,11 @@ +import styled from 'styled-components/macro' + +import { devices } from 'config/devices' + +export const Content = styled.main` + padding: 0 16px; + + @media ${devices.tablet} { + padding: 0; + } +` diff --git a/src/features/ProfileCard/styled.tsx b/src/features/ProfileCard/styled.tsx index 763b848d..ae6f2db2 100644 --- a/src/features/ProfileCard/styled.tsx +++ b/src/features/ProfileCard/styled.tsx @@ -57,7 +57,7 @@ export const AddToFavButton = styled.button` height: 32px; padding: 0 16px; border-radius: 2px; - font-size: 14px; + font-size: 16px; color: #fff; background: linear-gradient( @@ -79,6 +79,7 @@ export const AddToFavButton = styled.button` @media ${devices.tablet} { line-height: 13px; + font-size: 13px; svg { display: none; @@ -117,5 +118,6 @@ export const InfoItem = styled.div` @media ${devices.tablet} { font-size: 11px; line-height: 10px; + font-weight: 500px; } ` diff --git a/src/features/TeamPage/styled.tsx b/src/features/TeamPage/styled.tsx index fcd79930..4d5420e9 100644 --- a/src/features/TeamPage/styled.tsx +++ b/src/features/TeamPage/styled.tsx @@ -1,5 +1,37 @@ import styled from 'styled-components/macro' +import { devices } from 'config/devices' + +import { + Wrapper, + InfoItems, + Logo, +} from '../ProfileCard/styled' + export const Content = styled.main` padding: 0 16px; + + ${Logo} { + background-color: transparent; + } + + @media ${devices.laptop}{ + ${Wrapper} { + margin-top: 29px; + } + + ${InfoItems} { + justify-content: center; + } + } + + @media ${devices.tablet} { + padding: 0; + ${Wrapper} { + margin-top: 15px; + } + + } + + ` diff --git a/src/features/ToggleScore/styled.tsx b/src/features/ToggleScore/styled.tsx index d1bb40c6..02b77fc8 100644 --- a/src/features/ToggleScore/styled.tsx +++ b/src/features/ToggleScore/styled.tsx @@ -10,7 +10,7 @@ export const Switch = styled.div` display: flex; align-items: center; cursor: pointer; - + @media ${devices.tablet} { position: static; }