Merge pull request #28 from arlen/feature-cfm170-pagination

Conditionally show first/next and previous/last pagination links on first and last pages (CFM-170)
COmanage · May 17, 2022 · da7620f · da7620f
2 parents ee4e598 + 2c2a504
commit da7620f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 17 deletions.
diff --git a/app/templates/element/pagination.php b/app/templates/element/pagination.php
@@ -36,22 +36,21 @@
   </span>
   <?php if($this->Paginator->hasPage(2)): ?>
     <!-- show the pagination elements if there is more than 1 page -->
-    <ul class="paginationFirst">
-      <?= $this->Paginator->first(__d('operation', 'first')); ?>
-    </ul>
-    <ul class="paginationPrev">
-      <?= $this->Paginator->prev(__d('operation', 'previous'), ['class' => 'disabled']); ?>
-    </ul>
+    <?php if($this->Paginator->hasPrev()): ?>
+      <ul class="paginationFirstPrev">
+        <?= $this->Paginator->first(__d('operation', 'first')); ?>
+        <?= $this->Paginator->prev(__d('operation', 'previous'), ['class' => 'disabled']); ?>
+      </ul>
+    <?php endif; ?>
     <ul class="paginationNumbers">
       <?= $this->Paginator->numbers(); ?>
     </ul>
-    <ul class="paginationNext">
-      <?= $this->Paginator->next(__d('operation', 'next'), ['class' => 'disabled']); ?>
-    </ul>
-    <ul class="paginationLast">
-      <?= $this->Paginator->last(__d('operation', 'last')); ?>
-    </ul>
-
+    <?php if($this->Paginator->hasNext()): ?>
+      <ul class="paginationNextLast">
+        <?= $this->Paginator->next(__d('operation', 'next'), ['class' => 'disabled']); ?>
+        <?= $this->Paginator->last(__d('operation', 'last')); ?>
+      </ul>
+    <?php endif; ?>
     <form id="goto-page"
           class="pagination-form"
           method="get"

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -851,13 +851,11 @@ th.actions {
 #pagination .paginationCounter {
   display: block;
 }
-#pagination .paginationFirst,
-#pagination .paginationPrev {
+#pagination ul.paginationFirstPrev li {
   margin-right: 0.5em;
   font-size: 0.9em;
 }
-#pagination .paginationLast,
-#pagination .paginationNext {
+#pagination ul.paginationNextLast li {
   margin-left: 0.5em;
   font-size: 0.9em;
 }