fix(2260): change style for header

keep-around/99e29d12d82cd07b63730ec614e5867459265133
Berdyshev Oleksandr 4 years ago
parent 1d06f55c2b
commit 99e29d12d8
  1. 4
      src/features/Background/styled.tsx
  2. 1
      src/features/MatchPage/components/MatchProfileCard/styled.tsx
  3. 4
      src/features/MatchPage/styled.tsx
  4. 1
      src/features/Search/styled.tsx
  5. 3
      src/features/StreamPlayer/styled.tsx
  6. 7
      src/features/VideoPlayer/hooks/index.tsx

@ -7,6 +7,10 @@ const Container = styled.div`
min-height: 100vh;
overflow-x: hidden;
&::-webkit-scrollbar {
display: none;
}
/* временное решение для низких разрешений на windows */
@media (min-width: 1340px) and (max-width: 1380px){
overflow-y: hidden;

@ -55,6 +55,7 @@ export const Score = styled.span`
${isMobileDevice
? css`
font-size: 16px;
width: max-content;
`
: ''};
`

@ -18,13 +18,13 @@ export const Wrapper = styled.div`
${isMobileDevice
? css`
@media (max-width: 750px) {
margin-top: 50px;
padding-top: 50px;
}
@media screen and (orientation: landscape) {
padding-top: 55px;
flex-direction: row;
justify-content: space-between;
margin-left: 10px;
margin-top: 55px;
width: 100vw;
}
`

@ -79,6 +79,7 @@ export const Form = styled.form<FormProps>`
? css`
@media screen and (orientation: landscape){
max-width: 368px;
top: -5px;
}
`
: ''};

@ -39,6 +39,7 @@ export const Controls = styled.div`
? css`
bottom: 5px;
@media (orientation: landscape){
bottom: 10px;
width: 100%;
left: 50%;
transform: translateX(-50%);
@ -98,6 +99,7 @@ export const PlayerWrapper = styled.div<PlayStopProps>`
width: 100%;
position: relative;
background-color: #000;
margin-bottom: 5px;
:fullscreen {
padding-top: 0;
@ -256,6 +258,7 @@ export const PlaybackTime = styled.span<PlaybackTimeProps>`
${isMobileDevice
? css`
margin-left: 5px;
font-size: 10px;
width: 100px;
white-space: nowrap;

@ -106,9 +106,10 @@ export const useVideoPlayer = ({
}
}, [volume, videoRef])
useEffect(() => {
videoRef.current?.scrollIntoView({ behavior: 'smooth' })
}, [isFullscreen, videoRef])
// Todo this logic is responsible for scrolling to the player, delete if not required
// useEffect(() => {
// videoRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' })
// }, [isFullscreen, videoRef])
return {
handleDurationChange,

Loading…
Cancel
Save