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"
onClick={() => setCurrentPage(Math.max(1, 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" />
Vorherige
@ -303,7 +303,7 @@ export default function FolxStadlPage() {
variant="outline"
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
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
<ChevronRight className="w-4 h-4" />

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

@ -265,7 +265,7 @@ export default function GeschichteLiedPage() {
variant="outline"
onClick={() => setCurrentPage(Math.max(1, 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" />
Vorherige
@ -305,7 +305,7 @@ export default function GeschichteLiedPage() {
variant="outline"
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
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
<ChevronRight className="w-4 h-4" />

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

@ -265,7 +265,7 @@ export default function GipfelstammtischPage() {
variant="outline"
onClick={() => setCurrentPage(Math.max(1, 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" />
Vorherige
@ -305,7 +305,7 @@ export default function GipfelstammtischPage() {
variant="outline"
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
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
<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 || [];
if (!currentVideo) return allVideos;
console.log('Filtering videos for:', currentVideo.title);
// Check if current video belongs to a specific category
if (currentVideo.title.includes("FOLX STADL") || currentVideo.title.includes("FOLXSTADL")) {
@ -105,9 +104,6 @@ export default function VideoPage() {
const filtered = allVideos.filter(video =>
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;
}
@ -202,7 +198,6 @@ export default function VideoPage() {
const handleTouchStart = (e: React.TouchEvent) => {
setTouchEnd(0);
setTouchStart(e.targetTouches[0].clientX);
console.log('VideoPage touch start - currentVideo:', currentVideo?.title, 'allVideos count:', allVideos.length);
};
const handleTouchMove = (e: React.TouchEvent) => {
@ -216,14 +211,10 @@ export default function VideoPage() {
const isLeftSwipe = distance > 20;
const isRightSwipe = distance < -20;
console.log('VideoPage swipe:', { distance, isLeftSwipe, isRightSwipe, allVideosCount: allVideos.length });
if (isLeftSwipe) {
console.log('Navigating to next video');
navigateToVideo('next');
}
if (isRightSwipe) {
console.log('Navigating to prev video');
navigateToVideo('prev');
}
};