From 34063ffa7db84f9100e172800b35edeb2b0aa2fd Mon Sep 17 00:00:00 2001 From: Sergiu <46888793+Serj10GR@users.noreply.github.com> Date: Wed, 26 Aug 2020 17:58:46 +0300 Subject: [PATCH] Ott 305 responsive match page (#104) --- src/features/App/AuthenticatedApp.tsx | 4 +- src/features/Header/styled.tsx | 7 ++- src/features/HeaderMobile/index.tsx | 55 ++++++++++++------- .../MatchPage/MatchProfileCard/styled.tsx | 28 ++++++++++ src/features/MatchPage/styled.tsx | 16 ++++++ src/features/Menu/styled.tsx | 2 +- src/features/Search/index.tsx | 7 ++- src/features/Search/styled.tsx | 7 +-- src/features/TournamentPage/hooks.tsx | 1 - 9 files changed, 95 insertions(+), 32 deletions(-) diff --git a/src/features/App/AuthenticatedApp.tsx b/src/features/App/AuthenticatedApp.tsx index 29075775..ed54ffdf 100644 --- a/src/features/App/AuthenticatedApp.tsx +++ b/src/features/App/AuthenticatedApp.tsx @@ -3,6 +3,7 @@ import { Route, Redirect, Switch, + useRouteMatch, } from 'react-router-dom' import { indexLexics } from 'config/lexics/indexLexics' @@ -33,6 +34,7 @@ import { BottomMenuWrapper } from 'features/HeaderMobile/styled' export const AuthenticatedApp = () => { useLexicsConfig(indexLexics) const isMobile = useMediaQuery({ query: devices.tablet }) + const isMatch = useRouteMatch(`/:sportName${PAGES.match}/:pageId`)?.isExact return ( @@ -82,7 +84,7 @@ export const AuthenticatedApp = () => { { - isMobile + isMobile && !isMatch ? ( diff --git a/src/features/Header/styled.tsx b/src/features/Header/styled.tsx index 85b6f71f..76ba341d 100644 --- a/src/features/Header/styled.tsx +++ b/src/features/Header/styled.tsx @@ -22,6 +22,7 @@ export const Wrapper = styled.header` @media${devices.laptop} { padding-top: 11px; + margin-bottom: 0; } ` @@ -45,6 +46,10 @@ export const SearchWrapper = styled(FilterWrapper)` :focus { width: 288px; } + + &:only-child { + width: 244px; + } } ` @@ -65,6 +70,6 @@ export const MenuWrapper = styled.div` margin-right: 57px; @media${devices.laptop} { - margin-right: 24px; + margin-right: 14px; } ` diff --git a/src/features/HeaderMobile/index.tsx b/src/features/HeaderMobile/index.tsx index 027cfd9c..59e904d8 100644 --- a/src/features/HeaderMobile/index.tsx +++ b/src/features/HeaderMobile/index.tsx @@ -1,5 +1,5 @@ -import React from 'react' -// import { useRouteMatch } from 'react-router-dom' +import React, { Fragment } from 'react' +import { useRouteMatch } from 'react-router-dom' import { ToggleScore } from 'features/ToggleScore' import { Logo } from 'features/Logo' @@ -9,6 +9,7 @@ import { DateFilter, MatchStatusFilter, } from 'features/HeaderFilters' +import { PAGES } from 'config' import { HeaderMobileWrapper, @@ -19,22 +20,34 @@ import { IconFavWrapper, } from './styled' -export const HeaderMobile = () => ( - - - - - - - - - - - - - - - - - -) +export const HeaderMobile = () => { + const isMatch = useRouteMatch(`/:sportName${PAGES.match}/:pageId`)?.isExact + + return ( + + { + isMatch + ? null + : ( + + + + + + + + + + + + + + + + + + ) + } + + ) +} diff --git a/src/features/MatchPage/MatchProfileCard/styled.tsx b/src/features/MatchPage/MatchProfileCard/styled.tsx index 0740411f..6866c499 100644 --- a/src/features/MatchPage/MatchProfileCard/styled.tsx +++ b/src/features/MatchPage/MatchProfileCard/styled.tsx @@ -1,5 +1,7 @@ import styled from 'styled-components/macro' +import { devices } from 'config/devices' + export const Wrapper = styled.div` display: flex; font-weight: bold; @@ -7,10 +9,18 @@ export const Wrapper = styled.div` line-height: 24px; color: white; min-height: 28px; + + @media${devices.tablet} { + order: 2; + font-size: 16px; + padding: 15px 20px 0 20px; + flex-wrap: wrap; + } ` export const Teams = styled.div` display: flex; + ` export const Dash = styled.span` @@ -20,11 +30,22 @@ export const Dash = styled.span` margin: 0 15px; height: fit-content; align-self: center; + + @media${devices.tablet} { + width: 16px; + border-bottom: 1px solid white; + margin: 0 4px; + } ` export const Score = styled.div` display: flex; margin-left: 48px; + + @media${devices.tablet} { + margin-left: 8px; + color: #EACB6F; + } ` export const Tournament = styled.div` @@ -35,4 +56,11 @@ export const Tournament = styled.div` align-self: flex-end; margin-left: 48px; color: #666666; + + @media${devices.tablet} { + width: 100%; + margin-left: 0; + margin-top: 4px; + font-size: 11px; + } ` diff --git a/src/features/MatchPage/styled.tsx b/src/features/MatchPage/styled.tsx index 8c42984b..71d1f9b1 100644 --- a/src/features/MatchPage/styled.tsx +++ b/src/features/MatchPage/styled.tsx @@ -1,7 +1,18 @@ import styled from 'styled-components/macro' +import { devices } from 'config/devices' export const MainWrapper = styled.div` margin: 63px 16px 0 16px; + + @media${devices.laptop} { + margin: 0px 16px; + } + + @media${devices.tablet} { + display: flex; + flex-direction: column; + margin: 0 0 16px 0; + } ` export const Container = styled.div` @@ -10,4 +21,9 @@ export const Container = styled.div` margin-top: 14px; display: flex; flex-direction: column; + + @media${devices.tablet} { + order: 1; + margin-top: 0; + } ` diff --git a/src/features/Menu/styled.tsx b/src/features/Menu/styled.tsx index 6fb96cd8..2e8ef591 100644 --- a/src/features/Menu/styled.tsx +++ b/src/features/Menu/styled.tsx @@ -16,7 +16,7 @@ export const Wrapper = styled.nav` @media${devices.desktop} { margin-left: 23px; - margin-right: 0; + margin-right: 10px; } ` export const ToggleButton = styled.button` diff --git a/src/features/Search/index.tsx b/src/features/Search/index.tsx index caabb9f1..8aa6f699 100644 --- a/src/features/Search/index.tsx +++ b/src/features/Search/index.tsx @@ -1,7 +1,8 @@ import React, { Fragment } from 'react' - +import { useRouteMatch } from 'react-router-dom' import isEmpty from 'lodash/isEmpty' +import { PAGES } from 'config' import { Input } from 'features/Common' import { ItemsList } from 'features/ItemsList' import { OutsideClick } from 'features/OutsideClick' @@ -27,11 +28,11 @@ export const Search = () => { onSubmit, showResults, } = useSearch() - + const isMatch = useRouteMatch(`/:sportName${PAGES.match}/:pageId`)?.isExact || false return ( -
+ ` width: 288px; ${InputWrapper} { @@ -34,11 +33,11 @@ export const Form = styled.form` } @media${devices.desktop} { - width: 51px; + width: ${({ isMatch }) => (isMatch ? '244px' : '51px')}; :focus-within { width: 348px; - position: absolute; + position: ${({ isMatch }) => (isMatch ? 'static' : 'absolute')}; z-index: 4; } } diff --git a/src/features/TournamentPage/hooks.tsx b/src/features/TournamentPage/hooks.tsx index 667c48de..88e4bf6a 100644 --- a/src/features/TournamentPage/hooks.tsx +++ b/src/features/TournamentPage/hooks.tsx @@ -45,7 +45,6 @@ export const useTournamentPage = () => { tournamentId, ]) - useEffect(() => { getMatches({ date: selectedDateFormatted,