From 6d87addfd08a125ad7cb1fc2dea0eb416408a962 Mon Sep 17 00:00:00 2001
From: Paul-Christian Volkmer
Date: Wed, 18 Mar 2026 12:49:29 +0100
Subject: feat: improve pagination (#271)

---
 src/main/resources/templates/index.html | 25 +++++++++----------------
 src/web/style.css                       |  3 +++
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index c740bbe..ed1988b 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -55,26 +55,19 @@
                 <th:block th:insert="~{fragments :: request}" th:each="request : ${requests}">
                 </th:block>
             </div>
-            <div th:if="${patientPseudonym == null && query == null}" class="page-control">
-                <a id="first-page-link" th:href="@{/(page=${0})}" title="Zum Anfang: Taste W" th:if="${not requests.isFirst()}">&larrb;</a><a th:if="${requests.isFirst()}">&larrb;</a>
-                <a id="prev-page-link" th:href="@{/(page=${requests.getNumber() - 1})}" title="Seite zurück: Taste A" th:if="${not requests.isFirst()}">&larr;</a><a th:if="${requests.isFirst()}">&larr;</a>
+            <div th:if="${patientPseudonym == null}" class="page-control">
+                <a id="first-page-link" th:href="@{/(q=${query},f=${filter},page=${0})}" title="Zum Anfang: Taste W" th:if="${not requests.isFirst()}">&#x23EE;</a><a th:if="${requests.isFirst()}">&#x23EE;</a>
+                <a id="prev-page-link" th:href="@{/(q=${query},f=${filter},page=${requests.getNumber() - 1})}" title="Seite zurück: Taste A" th:if="${not requests.isFirst()}">&#x23F4;</a><a th:if="${requests.isFirst()}">&#x23F4;</a>
                 <span>Seite [[ ${requests.getNumber() + 1} ]] von [[ ${requests.getTotalPages()} ]]</span>
-                <a id="next-page-link" th:href="@{/(page=${requests.getNumber() + 1})}" title="Seite vor: Taste D" th:if="${not requests.isLast()}">&rarr;</a><a th:if="${requests.isLast()}">&rarr;</a>
-                <a id="last-page-link" th:href="@{/(page=${requests.getTotalPages() - 1})}" title="Zum Ende: Taste S" th:if="${not requests.isLast()}">&rarrb;</a><a th:if="${requests.isLast()}">&rarrb;</a>
-            </div>
-            <div th:if="${patientPseudonym == null && query != null}" class="page-control">
-                <a id="first-page-link" th:href="@{/(q=${query},page=${0})}" title="Zum Anfang: Taste W" th:if="${not requests.isFirst()}">&larrb;</a><a th:if="${requests.isFirst()}">&larrb;</a>
-                <a id="prev-page-link" th:href="@{/(q=${query},page=${requests.getNumber() - 1})}" title="Seite zurück: Taste A" th:if="${not requests.isFirst()}">&larr;</a><a th:if="${requests.isFirst()}">&larr;</a>
-                <span>Seite [[ ${requests.getNumber() + 1} ]] von [[ ${requests.getTotalPages()} ]]</span>
-                <a id="next-page-link" th:href="@{/(q=${query},page=${requests.getNumber() + 1})}" title="Seite vor: Taste D" th:if="${not requests.isLast()}">&rarr;</a><a th:if="${requests.isLast()}">&rarr;</a>
-                <a id="last-page-link" th:href="@{/(q=${query},page=${requests.getTotalPages() - 1})}" title="Zum Ende: Taste S" th:if="${not requests.isLast()}">&rarrb;</a><a th:if="${requests.isLast()}">&rarrb;</a>
+                <a id="next-page-link" th:href="@{/(q=${query},f=${filter},page=${requests.getNumber() + 1})}" title="Seite vor: Taste D" th:if="${not requests.isLast()}">&#x23F5;</a><a th:if="${requests.isLast()}">&#x23F5;</a>
+                <a id="last-page-link" th:href="@{/(q=${query},f=${filter},page=${requests.getTotalPages() - 1})}" title="Zum Ende: Taste S" th:if="${not requests.isLast()}">&#x23ED;</a><a th:if="${requests.isLast()}">&#x23ED;</a>
             </div>
             <div th:if="${patientPseudonym != null}" class="page-control">
-                <a id="first-page-link" th:href="@{/patient/{patientPseudonym}(patientPseudonym=${patientPseudonym},page=${0})}" title="Zum Anfang: Taste W" th:if="${not requests.isFirst()}">&larrb;</a><a th:if="${requests.isFirst()}">&larrb;</a>
-                <a id="prev-page-link" th:href="@{/patient/{patientPseudonym}(patientPseudonym=${patientPseudonym},page=${requests.getNumber() - 1})}" title="Seite zurück: Taste A" th:if="${not requests.isFirst()}">&larr;</a><a th:if="${requests.isFirst()}">&larr;</a>
+                <a id="first-page-link" th:href="@{/patient/{patientPseudonym}(patientPseudonym=${patientPseudonym},page=${0})}" title="Zum Anfang: Taste W" th:if="${not requests.isFirst()}">&#x23EE;</a><a th:if="${requests.isFirst()}">&#x23EE;</a>
+                <a id="prev-page-link" th:href="@{/patient/{patientPseudonym}(patientPseudonym=${patientPseudonym},page=${requests.getNumber() - 1})}" title="Seite zurück: Taste A" th:if="${not requests.isFirst()}">&#x23EE;</a><a th:if="${requests.isFirst()}">&#x23EE;</a>
                 <span>Seite [[ ${requests.getNumber() + 1} ]] von [[ ${requests.getTotalPages()} ]]</span>
-                <a id="next-page-link" th:href="@{/patient/{patientPseudonym}(patientPseudonym=${patientPseudonym},page=${requests.getNumber() + 1})}" title="Seite vor: Taste D" th:if="${not requests.isLast()}">&rarr;</a><a th:if="${requests.isLast()}">&rarr;</a>
-                <a id="last-page-link" th:href="@{/patient/{patientPseudonym}(patientPseudonym=${patientPseudonym},page=${requests.getTotalPages() - 1})}" title="Zum Ende: Taste S" th:if="${not requests.isLast()}">&rarrb;</a><a th:if="${requests.isLast()}">&rarrb;</a>
+                <a id="next-page-link" th:href="@{/patient/{patientPseudonym}(patientPseudonym=${patientPseudonym},page=${requests.getNumber() + 1})}" title="Seite vor: Taste D" th:if="${not requests.isLast()}">&#x23F5;</a><a th:if="${requests.isLast()}">&#x23F5;</a>
+                <a id="last-page-link" th:href="@{/patient/{patientPseudonym}(patientPseudonym=${patientPseudonym},page=${requests.getTotalPages() - 1})}" title="Zum Ende: Taste S" th:if="${not requests.isLast()}">&#x23ED;</a><a th:if="${requests.isLast()}">&#x23ED;</a>
             </div>
         </div>
 
diff --git a/src/web/style.css b/src/web/style.css
index b4ffd3d..6ae77b0 100644
--- a/src/web/style.css
+++ b/src/web/style.css
@@ -431,6 +431,7 @@ table.config-table td > button:last-of-type {
     font-size: 1.75rem;
     color: var(--bg-gray);
     text-decoration: none;
+    vertical-align: middle;
 }
 
 .page-control a[href] {
@@ -440,6 +441,8 @@ table.config-table td > button:last-of-type {
 .page-control span {
     padding: 0 .5rem;
     vertical-align: text-bottom;
+    font-size: 1rem;
+    vertical-align: middle;
 }
 
 #samples-table.max {
-- 
cgit v1.2.3