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

Organize video content to display descriptions alongside videos

Browse Source 
Restructures the FolxStadlPage component to a two-column layout, placing video descriptions on the right side of the video list using lg:grid-cols-3.

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/QQTyNAb
This commit is contained in:
sebastjanartic 2025-08-30 16:10:22 +00:00
parent 2a5b323759
commit 22387c5148
1 changed files with 45 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,25 +57,55 @@ export default function FolxStadlPage() {
</div>
</div>
{/* Video Grid */}
{/* Main Content */}
<div className="max-w-7xl mx-auto px-4 py-8">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
{folxStadlVideos.map((video) => (
<div key={video.id} className="group">
<VideoCard
video={video}
onClick={handleVideoClick}
className="w-full hover:scale-105 transition-all duration-300 group-hover:shadow-2xl rounded-lg overflow-hidden"
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Left Side - Video List */}
<div className="lg:col-span-2">
<div className="space-y-4">
{folxStadlVideos.map((video, index) => (
<div key={video.id} className="group">
<VideoCard
video={video}
onClick={handleVideoClick}
className="w-full hover:scale-102 transition-all duration-300 group-hover:shadow-2xl rounded-lg overflow-hidden"
/>
</div>
))}
</div>
))}
</div>
{folxStadlVideos.length === 0 && (
<div className="text-center py-16">
<p className="text-bunny-muted text-lg">No FOLX STADL videos found</p>
{folxStadlVideos.length === 0 && (
<div className="text-center py-16">
<p className="text-bunny-muted text-lg">No FOLX STADL videos found</p>
</div>
)}
</div>
)}
{/* Right Side - Description */}
<div className="lg:col-span-1">
<div className="bg-black/20 backdrop-blur-sm rounded-lg p-6 sticky top-8">
<h2 className="text-2xl font-bold text-white mb-4">FOLX STADL S4</h2>
<div className="space-y-4 text-bunny-light">
<p className="text-lg">
Kompletna 4. sezona FOLX STADL oddaj iz Prime Time Studio Bad Tölz.
</p>
<p>
Vse epizode vključujejo nastope znanih izvajalcev volkstümliche glasbe,
vodijo pa moderatorji Hansi Berger, Martina, Spitzbua Markus in Lucky Putz.
</p>
<div className="border-t border-white/10 pt-4 mt-6">
<h3 className="font-semibold text-white mb-2">V tej kolekciji:</h3>
<ul className="text-sm space-y-1 text-bunny-muted">
<li>• {folxStadlVideos.length} kompletnih oddaj</li>
<li>• Nastopi vodilnih izvajalcev</li>
<li>• Premium studio produkcija</li>
<li>• HD video kvaliteta</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Video Modal */}