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

Adjust layout of Folx Stadl page to center title and reposition logo

Browse Source 
Modify client/src/pages/FolxStadlPage.tsx to center the "FOLX STADL" title, move the logo to the right side, and rearrange navigation elements for a more organized layout.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/izllXJt
This commit is contained in:
sebastjanartic 2025-08-30 20:36:17 +00:00
parent d27c7c00d0
commit a43a1a584f
2 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756586103437.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

53
client/src/pages/FolxStadlPage.tsx
View File

@ -56,7 +56,7 @@ export default function FolxStadlPage() {
<div className="border-b border-white/10 bg-black/20 backdrop-blur-sm sticky top-0 z-40"> <div className="border-b border-white/10 bg-black/20 backdrop-blur-sm sticky top-0 z-40">
<div className="max-w-7xl mx-auto px-4 py-4"> <div className="max-w-7xl mx-auto px-4 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
{/* Left side - Back button and title */} {/* Left side - Back button */}
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Link href="/"> <Link href="/">
<button className="flex items-center gap-2 text-bunny-light hover:text-white transition-colors"> <button className="flex items-center gap-2 text-bunny-light hover:text-white transition-colors">
@ -64,29 +64,42 @@ export default function FolxStadlPage() {
<span className="hidden sm:inline">Zurück</span> <span className="hidden sm:inline">Zurück</span>
</button> </button>
</Link> </Link>
</div>
{/* Center - FOLX STADL title */}
<div className="flex-1 flex justify-center">
<h1 className="text-2xl sm:text-3xl font-bold text-white uppercase tracking-wide">FOLX STADL</h1> <h1 className="text-2xl sm:text-3xl font-bold text-white uppercase tracking-wide">FOLX STADL</h1>
</div> </div>
{/* Right side - Mobile menu button */} {/* Right side - Logo and navigation */}
<div className="md:hidden"> <div className="flex items-center gap-4">
<Button {/* Desktop navigation with logo */}
variant="ghost" <div className="hidden md:flex items-center space-x-6">
size="sm" <nav className="flex space-x-6">
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} <Link href="/" className="text-bunny-light hover:text-white transition-colors">
className="text-white hover:bg-white/10" Home
data-testid="button-mobile-menu-folx" </Link>
> </nav>
{isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />} <Link href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
</Button> <div className="w-8 h-8 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
</div> <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1"></div>
</div>
{/* Desktop navigation */} <span className="text-lg font-bold text-white tracking-wide">go4.video</span>
<div className="hidden md:flex items-center space-x-6">
<nav className="flex space-x-6">
<Link href="/" className="text-bunny-light hover:text-white transition-colors">
Home
</Link> </Link>
</nav> </div>
{/* Mobile menu button */}
<div className="md:hidden">
<Button
variant="ghost"
size="sm"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
className="text-white hover:bg-white/10"
data-testid="button-mobile-menu-folx"
>
{isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
</Button>
</div>
</div> </div>
</div> </div>