sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust video navigation button appearance and positioning on the page

Browse Source 
Update styling and positioning of navigation buttons on the VideoPage component in client/src/pages/VideoPage.tsx.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 051a65da-1176-4478-a61c-c662f2a15536
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/051a65da-1176-4478-a61c-c662f2a15536/9NQBiz8
This commit is contained in:
sebastjanartic 2025-08-30 22:27:25 +00:00
parent f9c60b67da
commit d02b447c3e
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/pages/VideoPage.tsx
View File

@ -378,24 +378,24 @@ export default function VideoPage() {
<div className="flex-1">
{/* Video player */}
<div className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden mb-4">
{/* Navigation arrows - always visible on desktop, smaller on mobile */}
{/* Navigation arrows */}
{allVideos.length > 1 && (
<>
<Button
onClick={() => navigateToVideo('prev')}
className="absolute left-2 md:left-4 top-1/2 transform -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white border-none p-2 rounded-full z-20 transition-all duration-200"
className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/60 hover:bg-black/80 text-white border-none p-2 rounded-full z-20"
size="sm"
data-testid="button-prev-video"
>
<ChevronLeft className="w-5 h-5 md:w-6 md:h-6" />
<ChevronLeft className="w-6 h-6" />
</Button>
<Button
onClick={() => navigateToVideo('next')}
className="absolute right-2 md:right-4 top-1/2 transform -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white border-none p-2 rounded-full z-20 transition-all duration-200"
className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/60 hover:bg-black/80 text-white border-none p-2 rounded-full z-20"
size="sm"
data-testid="button-next-video"
>
<ChevronRight className="w-5 h-5 md:w-6 md:h-6" />
<ChevronRight className="w-6 h-6" />
</Button>
</>
)}