Ott 305 responsive match page (#104)

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 (
     <ScoreStore>
@@ -82,7 +84,7 @@ export const AuthenticatedApp = () => {
                 <MatchPage />
               </Route>
               {
-                isMobile
+                isMobile && !isMatch
                   ? (
                     <BottomMenuWrapper>
                       <SportTypeFilter />

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;
   }
 `

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 = () => (
-  <HeaderMobileWrapper>
-    <HeaderMobileTop>
-      <ToggleScore />
-      <Logo />
-      <HeaderIconsWrapper>
-        <IconFavWrapper />
-        <Search />
-        <Menu />
-      </HeaderIconsWrapper>
-    </HeaderMobileTop>
-    <HeaderMobileMidle>
-      <DateFilter />
-    </HeaderMobileMidle>
-    <HeaderMobileBottom>
-      <MatchStatusFilter />
-    </HeaderMobileBottom>
-  </HeaderMobileWrapper>
-)
+export const HeaderMobile = () => {
+  const isMatch = useRouteMatch(`/:sportName${PAGES.match}/:pageId`)?.isExact
+
+  return (
+    <Fragment>
+      {
+        isMatch
+          ? null
+          : (
+            <HeaderMobileWrapper>
+              <HeaderMobileTop>
+                <ToggleScore />
+                <Logo />
+                <HeaderIconsWrapper>
+                  <IconFavWrapper />
+                  <Search />
+                  <Menu />
+                </HeaderIconsWrapper>
+              </HeaderMobileTop>
+              <HeaderMobileMidle>
+                <DateFilter />
+              </HeaderMobileMidle>
+              <HeaderMobileBottom>
+                <MatchStatusFilter />
+              </HeaderMobileBottom>
+            </HeaderMobileWrapper>
+          )
+      }
+    </Fragment>
+  )
+}

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;
+  }
 `

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;
+  }
 `

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`

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 (
     <OutsideClick onClick={close}>
       <Wrapper>
-        <Form role='search' onSubmit={onSubmit}>
+        <Form role='search' onSubmit={onSubmit} isMatch={isMatch}>
           <Input
             id='searchInput'
             type='search'

src/features/Search/styled.tsx

@@ -11,10 +11,9 @@ import {
 export const Wrapper = styled.div`
   position: relative;
 }
-
 `
 
-export const Form = styled.form`
+export const Form = styled.form<{isMatch: boolean}>`
   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;
       }
   }

src/features/TournamentPage/hooks.tsx

@@ -45,7 +45,6 @@ export const useTournamentPage = () => {
     tournamentId,
   ])
 
-
   useEffect(() => {
     getMatches({
       date: selectedDateFormatted,