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

Standardize pagination button styles across multiple pages

Browse Source 
Update pagination button classes in FolxStadlPage, GeschichteLiedPage, GipfelstammtischPage, and VideoPage to include consistent styling for height, padding, and flex alignment, ensuring a uniform look and feel for navigation elements.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/DyHCx4q
This commit is contained in:
sebastjanartic 2025-09-01 22:06:20 +00:00
parent 6781c400fa
commit 91885b4505
4 changed files with 6 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -263,7 +263,7 @@ export default function FolxStadlPage() {
variant="outline" variant="outline"
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))} onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
disabled={currentPage === 1} disabled={currentPage === 1}
className="border-white/20 text-white hover:bg-white/10" className="border-white/20 text-white hover:bg-white/10 h-10 px-4 flex items-center gap-2"
> >
<ChevronLeft className="w-4 h-4" /> <ChevronLeft className="w-4 h-4" />
Vorherige Vorherige
@ -303,7 +303,7 @@ export default function FolxStadlPage() {
variant="outline" variant="outline"
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))} onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
className="border-white/20 text-white hover:bg-white/10" className="border-white/20 text-white hover:bg-white/10 h-10 px-4 flex items-center gap-2"
> >
Nächste Nächste
<ChevronRight className="w-4 h-4" /> <ChevronRight className="w-4 h-4" />

4
client/src/pages/GeschichteLiedPage.tsx
View File

@ -265,7 +265,7 @@ export default function GeschichteLiedPage() {
variant="outline" variant="outline"
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))} onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
disabled={currentPage === 1} disabled={currentPage === 1}
className="border-white/20 text-white hover:bg-white/10" className="border-white/20 text-white hover:bg-white/10 h-10 px-4 flex items-center gap-2"
> >
<ChevronLeft className="w-4 h-4" /> <ChevronLeft className="w-4 h-4" />
Vorherige Vorherige
@ -305,7 +305,7 @@ export default function GeschichteLiedPage() {
variant="outline" variant="outline"
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))} onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
className="border-white/20 text-white hover:bg-white/10" className="border-white/20 text-white hover:bg-white/10 h-10 px-4 flex items-center gap-2"
> >
Nächste Nächste
<ChevronRight className="w-4 h-4" /> <ChevronRight className="w-4 h-4" />

4
client/src/pages/GipfelstammtischPage.tsx
View File

@ -265,7 +265,7 @@ export default function GipfelstammtischPage() {
variant="outline" variant="outline"
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))} onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
disabled={currentPage === 1} disabled={currentPage === 1}
className="border-white/20 text-white hover:bg-white/10" className="border-white/20 text-white hover:bg-white/10 h-10 px-4 flex items-center gap-2"
> >
<ChevronLeft className="w-4 h-4" /> <ChevronLeft className="w-4 h-4" />
Vorherige Vorherige
@ -305,7 +305,7 @@ export default function GipfelstammtischPage() {
variant="outline" variant="outline"
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))} onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
className="border-white/20 text-white hover:bg-white/10" className="border-white/20 text-white hover:bg-white/10 h-10 px-4 flex items-center gap-2"
> >
Nächste Nächste
<ChevronRight className="w-4 h-4" /> <ChevronRight className="w-4 h-4" />

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

@ -82,7 +82,6 @@ export default function VideoPage() {
const allVideos = recommendedResponse?.videos || []; const allVideos = recommendedResponse?.videos || [];
if (!currentVideo) return allVideos; if (!currentVideo) return allVideos;
console.log('Filtering videos for:', currentVideo.title);
// Check if current video belongs to a specific category // Check if current video belongs to a specific category
if (currentVideo.title.includes("FOLX STADL") || currentVideo.title.includes("FOLXSTADL")) { if (currentVideo.title.includes("FOLX STADL") || currentVideo.title.includes("FOLXSTADL")) {
@ -105,9 +104,6 @@ export default function VideoPage() {
const filtered = allVideos.filter(video => const filtered = allVideos.filter(video =>
video.title.includes("Geschichte des Liedes") video.title.includes("Geschichte des Liedes")
); );
console.log('Found Geschichte videos:', filtered.length);
console.log('Sample titles:', allVideos.slice(0, 5).map(v => v.title));
console.log('Looking for pattern in:', allVideos.filter(v => v.title.toLowerCase().includes('geschichte')).map(v => v.title));
return filtered; return filtered;
} }
@ -202,7 +198,6 @@ export default function VideoPage() {
const handleTouchStart = (e: React.TouchEvent) => { const handleTouchStart = (e: React.TouchEvent) => {
setTouchEnd(0); setTouchEnd(0);
setTouchStart(e.targetTouches[0].clientX); setTouchStart(e.targetTouches[0].clientX);
console.log('VideoPage touch start - currentVideo:', currentVideo?.title, 'allVideos count:', allVideos.length);
}; };
const handleTouchMove = (e: React.TouchEvent) => { const handleTouchMove = (e: React.TouchEvent) => {
@ -216,14 +211,10 @@ export default function VideoPage() {
const isLeftSwipe = distance > 20; const isLeftSwipe = distance > 20;
const isRightSwipe = distance < -20; const isRightSwipe = distance < -20;
console.log('VideoPage swipe:', { distance, isLeftSwipe, isRightSwipe, allVideosCount: allVideos.length });
if (isLeftSwipe) { if (isLeftSwipe) {
console.log('Navigating to next video');
navigateToVideo('next'); navigateToVideo('next');
} }
if (isRightSwipe) { if (isRightSwipe) {
console.log('Navigating to prev video');
navigateToVideo('prev'); navigateToVideo('prev');
} }
}; };