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