ghassan/takeone-youtube-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Match highlights sheet: full-brightness video + hide top bar on open

Browse Source 
Two mobile refinements to the bottom sheet:
- Drop the dark scrim (was 32% black over the whole screen). The backdrop is
  now a transparent tap-to-dismiss catcher, so the match video keeps full
  brightness and detail while the sheet is open.
- While the sheet is open, slide the fixed top bar up and float the scroll
  area to top:0 so the player gets the reclaimed 56px. Both revert the instant
  the sheet closes. Driven by a body.hl-sheet-open class; reduced-motion safe.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ghassan 2026-07-28 22:42:05 +03:00
parent 18fb4fbd63
commit ecb89f9514
1 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
resources/views/videos/types/match.blade.php
View File

@ -1919,19 +1919,29 @@
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
margin: 10px auto 4px; cursor: pointer; margin: 10px auto 4px; cursor: pointer;
} }
/* Light tap-to-dismiss scrim — faint so the video stays watchable */ /* Transparent tap-to-dismiss catcher — no dim, so the match video keeps
full brightness and detail while the sheet is open. */
.hl-sheet-backdrop { .hl-sheet-backdrop {
display: block; display: block;
position: fixed; inset: 0; position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.32); background: transparent;
opacity: 0; visibility: hidden; visibility: hidden;
transition: opacity 0.28s ease, visibility 0.28s;
z-index: 1399; z-index: 1399;
} }
.hl-sheet-backdrop.show { opacity: 1; visibility: visible; } .hl-sheet-backdrop.show { visibility: visible; }
/* Reclaim the top bar's space while the sheet is open: slide the header
up and float the scroll area to the very top so the player gets more
room. Both revert the moment the sheet closes. */
.yt-header { transition: transform 0.3s ease; }
body.hl-sheet-open .yt-header { transform: translateY(-100%); }
#main.yt-main { transition: top 0.3s ease; }
body.hl-sheet-open #main.yt-main { top: 0 !important; }
} }
@media (max-width: 991px) and (prefers-reduced-motion: reduce) { @media (max-width: 991px) and (prefers-reduced-motion: reduce) {
.events-sidebar { transition: none; } .events-sidebar,
.yt-header,
#main.yt-main { transition: none; }
} }
</style> </style>
@endsection @endsection
@ -2282,6 +2292,8 @@
sidebar.classList.toggle('show', open); sidebar.classList.toggle('show', open);
toggleBtn.classList.toggle('expanded', open); toggleBtn.classList.toggle('expanded', open);
if (backdrop) backdrop.classList.toggle('show', open && isMobile()); if (backdrop) backdrop.classList.toggle('show', open && isMobile());
// Hide the top bar (mobile only) to give the player more room.
document.body.classList.toggle('hl-sheet-open', open && isMobile());
if (open) { if (open) {
localStorage.setItem(`highlights_${videoId}`, 'open'); localStorage.setItem(`highlights_${videoId}`, 'open');
// Mobile: the pane is a bottom sheet — bring the player back // Mobile: the pane is a bottom sheet — bring the player back
@ -2302,9 +2314,12 @@
if (backdrop) backdrop.addEventListener('click', () => setOpen(false)); if (backdrop) backdrop.addEventListener('click', () => setOpen(false));
if (grab) grab.addEventListener('click', () => setOpen(false)); if (grab) grab.addEventListener('click', () => setOpen(false));
// Keep the scrim honest if the viewport crosses the mobile boundary. // Keep the scrim + header state honest if the viewport crosses
// the mobile boundary while the pane is open.
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
if (backdrop) backdrop.classList.toggle('show', sidebar.classList.contains('show') && isMobile()); const openMobile = sidebar.classList.contains('show') && isMobile();
if (backdrop) backdrop.classList.toggle('show', openMobile);
document.body.classList.toggle('hl-sheet-open', openMobile);
}); });
} }
}); });