Przeglądaj źródła

Improve pagination styling in logs page (#8541)

Before:

<img width="819" height="82" alt="2026-03-01_13-47" src="https://github.com/user-attachments/assets/96262bd2-25de-42b2-a19a-275b81f300cb" />

After:

<img width="842" height="77" alt="2026-03-01_13-48" src="https://github.com/user-attachments/assets/895f2db8-74ef-4aa6-ade4-b8b0794fc287" />

---


* Made button text actually centered
* Removed italic font
* Added `overflow-x: auto` so page doesn't overflow if there's too many pagination buttons displayed on a small screen
Inverle 1 miesiąc temu
rodzic
commit
b98aa6b00c

+ 47 - 45
app/views/helpers/logs_pagination.phtml

@@ -7,59 +7,61 @@
 ?>
 <?php if ($this->nbPage > 1) { ?>
 <nav class="nav-pagination nav-list">
-	<ul class="pagination">
-		<?php
-			/** @var string $getteur from Minz_Paginator::render() */
-			$params[$getteur] = 1;
-		?>
-		<li class="item pager-first">
-			<a href="<?= Minz_Url::display(['c' => $c, 'a' => $a, 'params' => $params]) ?>">« <?= _t('conf.logs.pagination.first') ?></a>
-		</li>
+	<div class="pagination-wrapper">
+		<ul class="pagination">
+			<?php
+				/** @var string $getteur from Minz_Paginator::render() */
+				$params[$getteur] = 1;
+			?>
+			<li class="item pager-first">
+				<a href="<?= Minz_Url::display(['c' => $c, 'a' => $a, 'params' => $params]) ?>">« <?= _t('conf.logs.pagination.first') ?></a>
+			</li>
 
-		<?php $params[$getteur] = $this->currentPage - 1; ?>
+			<?php $params[$getteur] = $this->currentPage - 1; ?>
 
-		<li class="item pager-previous">
-			<?php if ($this->currentPage > 1) { ?>
-			<a href="<?= Minz_Url::display(['c' => $c, 'a' => $a, 'params' => $params]) ?>">‹ <?= _t('conf.logs.pagination.previous') ?></a>
-			<?php } ?>
-		</li>
+			<li class="item pager-previous">
+				<?php if ($this->currentPage > 1) { ?>
+				<a href="<?= Minz_Url::display(['c' => $c, 'a' => $a, 'params' => $params]) ?>">‹ <?= _t('conf.logs.pagination.previous') ?></a>
+				<?php } ?>
+			</li>
 
-		<?php if ($this->currentPage - 2 > 1) { ?>
-		<li class="item">…</a></li>
-		<?php } ?>
+			<?php if ($this->currentPage - 2 > 1) { ?>
+			<li class="item">…</a></li>
+			<?php } ?>
 
-		<?php
-		for ($i = $this->currentPage - 2; $i <= $this->currentPage + 2; $i++) {
-			if ($i > 0 && $i <= $this->nbPage) {
-				$params[$getteur] = $i;
-				if ($i != $this->currentPage) {
-					$class = '';
-					$aria = 'false';
-				} else {
-					$class = ' active';
-					$aria = 'true';
-				} ?>
-				<li class="item<?= $class ?>"><a href="<?= Minz_Url::display(['c' => $c, 'a' => $a, 'params' => $params]) ?>" aria-current="<?= $aria ?>"><?= $i ?></a></li>
 			<?php
-			}
-		} ?>
+			for ($i = $this->currentPage - 2; $i <= $this->currentPage + 2; $i++) {
+				if ($i > 0 && $i <= $this->nbPage) {
+					$params[$getteur] = $i;
+					if ($i != $this->currentPage) {
+						$class = '';
+						$aria = 'false';
+					} else {
+						$class = ' active';
+						$aria = 'true';
+					} ?>
+					<li class="item<?= $class ?>"><a href="<?= Minz_Url::display(['c' => $c, 'a' => $a, 'params' => $params]) ?>" aria-current="<?= $aria ?>"><?= $i ?></a></li>
+				<?php
+				}
+			} ?>
 
-		<?php if ($this->nbPage > $this->currentPage + 2) { ?>
-		<li class="item">…</a></li>
-		<?php } ?>
+			<?php if ($this->nbPage > $this->currentPage + 2) { ?>
+			<li class="item">…</a></li>
+			<?php } ?>
 
-		<?php $params[$getteur] = $this->currentPage + 1; ?>
+			<?php $params[$getteur] = $this->currentPage + 1; ?>
 
-		<li class="item pager-next">
-			<?php if ($this->currentPage < $this->nbPage) { ?>
-			<a href="<?= Minz_Url::display(['c' => $c, 'a' => $a, 'params' => $params]) ?>"><?= _t('conf.logs.pagination.next') ?> ›</a>
-			<?php } ?>
-		</li>
+			<li class="item pager-next">
+				<?php if ($this->currentPage < $this->nbPage) { ?>
+				<a href="<?= Minz_Url::display(['c' => $c, 'a' => $a, 'params' => $params]) ?>"><?= _t('conf.logs.pagination.next') ?> ›</a>
+				<?php } ?>
+			</li>
 
-		<?php $params[$getteur] = $this->nbPage; ?>
-		<li class="item pager-last">
-			<a href="<?= Minz_Url::display(['c' => $c, 'a' => $a, 'params' => $params]) ?>"><?= _t('conf.logs.pagination.last') ?> »</a>
-		</li>
-	</ul>
+			<?php $params[$getteur] = $this->nbPage; ?>
+			<li class="item pager-last">
+				<a href="<?= Minz_Url::display(['c' => $c, 'a' => $a, 'params' => $params]) ?>"><?= _t('conf.logs.pagination.last') ?> »</a>
+			</li>
+		</ul>
+	</div>
 </nav>
 <?php } ?>

+ 7 - 1
p/themes/base-theme/frss.css

@@ -971,13 +971,19 @@ input[type="checkbox"]:focus-visible {
 	padding: 0;
 	display: table;
 	table-layout: fixed;
+}
+
+.pagination .item:not(:has(a)) {
 	text-align: center;
 }
 
+.pagination-wrapper {
+	overflow-x: auto;
+}
+
 .pagination .item {
 	display: table-cell;
 	width: 3em;
-	font-style: italic;
 }
 
 .pagination .item.active {

+ 7 - 1
p/themes/base-theme/frss.rtl.css

@@ -971,13 +971,19 @@ input[type="checkbox"]:focus-visible {
 	padding: 0;
 	display: table;
 	table-layout: fixed;
+}
+
+.pagination .item:not(:has(a)) {
 	text-align: center;
 }
 
+.pagination-wrapper {
+	overflow-x: auto;
+}
+
 .pagination .item {
 	display: table-cell;
 	width: 3em;
-	font-style: italic;
 }
 
 .pagination .item.active {