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

Adjust pagination to display only page numbers

Browse Source 
Refactors the pagination component in multiple pages (FolxStadlPage, GeschichteLiedPage, GipfelstammtischPage) to exclusively show page numbers by removing "Previous" and "Next" buttons and updating the gap between page number 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:11:39 +00:00
parent 156da5dec8
commit abfb77f171
3 changed files with 5 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -258,19 +258,8 @@ export default function FolxStadlPage() {
{/* Bottom Pagination */}
{totalPages > 1 && (
<div className="mt-8 flex justify-center gap-2 px-4 overflow-x-auto">
<Button
variant="outline"
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
disabled={currentPage === 1}
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
</Button>
<div className="flex gap-1 min-w-0 flex-shrink-0">
{Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
<div className="mt-8 flex justify-center gap-1 px-4 overflow-x-auto">
{Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
let pageNum;
if (totalPages <= 5) {
pageNum = i + 1;
@ -297,17 +286,6 @@ export default function FolxStadlPage() {
</Button>
);
})}
</div>
<Button
variant="outline"
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
disabled={currentPage === totalPages}
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" />
</Button>
</div>
)}

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

@ -260,19 +260,8 @@ export default function GeschichteLiedPage() {
{/* Bottom Pagination */}
{totalPages > 1 && (
<div className="mt-8 flex justify-center gap-2 px-4 overflow-x-auto">
<Button
variant="outline"
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
disabled={currentPage === 1}
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
</Button>
<div className="flex gap-1 min-w-0 flex-shrink-0">
{Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
<div className="mt-8 flex justify-center gap-1 px-4 overflow-x-auto">
{Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
let pageNum;
if (totalPages <= 5) {
pageNum = i + 1;
@ -299,17 +288,6 @@ export default function GeschichteLiedPage() {
</Button>
);
})}
</div>
<Button
variant="outline"
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
disabled={currentPage === totalPages}
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" />
</Button>
</div>
)}
</div>

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

@ -260,18 +260,7 @@ export default function GipfelstammtischPage() {
{/* Bottom Pagination */}
{totalPages > 1 && (
<div className="mt-8 flex justify-center gap-2 px-4 overflow-x-auto">
<Button
variant="outline"
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
disabled={currentPage === 1}
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
</Button>
<div className="flex gap-1 min-w-0 flex-shrink-0">
<div className="mt-8 flex justify-center gap-1 px-4 overflow-x-auto">
{Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
let pageNum;
if (totalPages <= 5) {
@ -299,17 +288,6 @@ export default function GipfelstammtischPage() {
</Button>
);
})}
</div>
<Button
variant="outline"
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
disabled={currentPage === totalPages}
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" />
</Button>
</div>
)}
</div>