From 35b5d122c05048fb9e164c9881034e52d923e277 Mon Sep 17 00:00:00 2001 From: Rita Date: Tue, 11 Oct 2022 16:49:39 +0400 Subject: [PATCH] feat(ott-2880): video layout fixes feat(ott-2880): video layout 2 feat(ott-2880): video fix --- src/features/MatchPage/styled.tsx | 6 ++-- .../TabVideo/components/VideoDate/styled.tsx | 9 +++--- .../components/TabVideo/styled.tsx | 2 +- src/features/MatchSidePlaylists/index.tsx | 30 +++++++++++-------- src/features/MatchSidePlaylists/styled.tsx | 27 +++++++++++++---- src/features/StreamPlayer/styled.tsx | 4 +-- src/features/UserFavorites/styled.tsx | 1 + 7 files changed, 50 insertions(+), 29 deletions(-) diff --git a/src/features/MatchPage/styled.tsx b/src/features/MatchPage/styled.tsx index a0c1816f..5a21bd3d 100644 --- a/src/features/MatchPage/styled.tsx +++ b/src/features/MatchPage/styled.tsx @@ -4,7 +4,7 @@ import { devices } from 'config/devices' import { isMobileDevice } from 'config/userAgent' export const Wrapper = styled.div` - width: 100%; + width: 96%; height: calc(100vh - 115px); margin: 20px 0px 0 10px; display: flex; @@ -27,8 +27,7 @@ export const Wrapper = styled.div` ` export const Container = styled.div` - width: 100%; - max-width: 2090px; + min-width: 83%; max-height: 896px; display: flex; flex-direction: column; @@ -47,6 +46,7 @@ export const Container = styled.div` padding: 0; margin-bottom: 15px; min-height: min-content; + min-width: auto; @media screen and (orientation: landscape){ display: block; diff --git a/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/styled.tsx b/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/styled.tsx index 1a07d61d..f6f4ea97 100644 --- a/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/styled.tsx +++ b/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/styled.tsx @@ -7,10 +7,11 @@ export const Wrapper = styled.div` display: flex; justify-content: center; align-items: center; - margin-bottom: 10px; - + padding-bottom: 10px; + height: 5%; + > :not(:last-child) { - margin-right: 20px; + margin-right: 2%; } ${isMobileDevice ? css` @@ -27,7 +28,7 @@ export const WeekDay = styled.div.attrs(() => ({ }))<{isActive?: boolean}>` position: relative; color: rgba(255, 255, 255, 0.5); - font-size: 12px; + font-size: 0.6rem; white-space: nowrap; padding: 5px; cursor: pointer; diff --git a/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx b/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx index 8ac7b73e..21d0bff8 100644 --- a/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx +++ b/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx @@ -4,7 +4,7 @@ import { isMobileDevice } from '../../../../config/userAgent' export const MatchesWrapper = styled.div<{hasScroll?: boolean}>` overflow-y: auto; - max-height: calc(100vh - 170px); + height: 95%; padding-right: ${({ hasScroll }) => (hasScroll ? '10px' : '')}; > * { diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx index f4eb1acb..bf1c8b62 100644 --- a/src/features/MatchSidePlaylists/index.tsx +++ b/src/features/MatchSidePlaylists/index.tsx @@ -22,6 +22,7 @@ import { Wrapper, TabsWrapper, Container, + ContainerWrapper, } from './styled' const tabPanes = { @@ -122,19 +123,22 @@ export const MatchSidePlaylists = ({ - - - + + + + + + ) } diff --git a/src/features/MatchSidePlaylists/styled.tsx b/src/features/MatchSidePlaylists/styled.tsx index 011a17f7..b82c6f5a 100644 --- a/src/features/MatchSidePlaylists/styled.tsx +++ b/src/features/MatchSidePlaylists/styled.tsx @@ -7,12 +7,15 @@ import { customScrollbar } from 'features/Common' export const Wrapper = styled.div` padding-right: 14px; + min-width: 17%; + max-height: 896px; ${isMobileDevice ? css` overflow-y: auto; width: 100%; - + padding-right: 10px; + ${customScrollbar} ` : ''}; @@ -20,7 +23,8 @@ export const Wrapper = styled.div` export const TabsWrapper = styled.div` padding-left: 14px; - + height: 4%; + ${isMobileDevice ? css` padding: 0 5px; @@ -28,17 +32,28 @@ export const TabsWrapper = styled.div` : ''}; ` +export const ContainerWrapper = styled.div` + padding-top: 14px; + height: 100%; + max-width: 300px; + + ${isMobileDevice + ? css` + max-width: 100%; + ` + : ''}; +` + type TContainer = { forVideoTab?: boolean, hasScroll: boolean, } export const Container = styled.div` - width: 320px; - margin-top: 14px; - padding: ${({ hasScroll }) => (hasScroll ? '0 10px 0 14px' : '0 18px 0 14px')}; + height: 96%; + padding: ${({ hasScroll }) => (hasScroll ? '0 10px 0 14px' : '0 10px 0 14px')}; max-height: calc(100vh - 130px); - overflow-y: ${({ forVideoTab }) => (forVideoTab ? 'hidden' : 'auto')}; + overflow: ${({ forVideoTab }) => (forVideoTab ? 'hidden' : 'auto')}; padding-right: ${({ forVideoTab }) => (forVideoTab ? '0' : '')}; ${customScrollbar} diff --git a/src/features/StreamPlayer/styled.tsx b/src/features/StreamPlayer/styled.tsx index c13215d5..990851ab 100644 --- a/src/features/StreamPlayer/styled.tsx +++ b/src/features/StreamPlayer/styled.tsx @@ -93,7 +93,7 @@ export const ControlsGroup = styled.div` : ''}; ` -const supportsAspectRatio = CSS.supports('aspect-ratio', '16 / 9') && isMobileDevice +const supportsAspectRatio = CSS.supports('aspect-ratio', '16 / 9') export const PlayerWrapper = styled.div` width: 100%; @@ -107,7 +107,7 @@ export const PlayerWrapper = styled.div` ? css`aspect-ratio: 16 / 9;` : css` height: 0px; - padding-top: 56.25%; + object-fit: cover; `} ${isMobileDevice diff --git a/src/features/UserFavorites/styled.tsx b/src/features/UserFavorites/styled.tsx index f541f7d6..cd7da2fd 100644 --- a/src/features/UserFavorites/styled.tsx +++ b/src/features/UserFavorites/styled.tsx @@ -19,6 +19,7 @@ export const UserSportFavWrapper = styled.aside` top: 0; bottom: 0; z-index: 10; + width: 4%; ${isMobileDevice ? css`