ニジカ Pagination

broadcast/index.frm.php

@@ -101,7 +101,8 @@
                     <?php foreach (array_slice ($log_data,
                                                 ($page - 1) * $length,
                                                 $length,
-                                                true) as $record): ?>
+                                                true)
+                                   as $record): ?>
                         <div class="mb-4">
                             <div>
                                 <?= $record['date_time'] ?>

broadcast/pagination.cmp.php

@@ -2,37 +2,47 @@
     <ul class="pagination opacity-0">
         <?php if ($page > 1): ?>
             <li class="page-item">
-                <a class="page-link no-wrap" href="javascript: void (0)" onclick="Script.jumpTo (1)">|&lt;</a>
+                <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (1)">
+                    <img src="./assets/page-first.png" />|&lt;
+                </a>
             </li>
         <?php else: ?>
             <li class="page-item disabled">
-                <span class="page-link">|&lt;</span>
+                <span class="page-link">
+                    <img src="./assets/page-first.png" />|&lt;
+                </span>
             </li>
         <?php endif ?>
 
         <?php for ($i = max (min ($page + 10, $pages_max) - 20, 1); $i < $page; ++$i): ?>
             <li class="page-item page-<?= $page - $i ?>">
-                <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $i ?>)"><?= $i ?></a>
+                <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $i ?>)">
+                    <img src="./assets/page-body.png" /><?= $i ?>
+                </a>
             </li>
         <?php endfor ?>
 
         <li class="page-item active" aria-current="page">
-            <span class="page-link"><?= $page ?></span>
+            <span class="page-link"><img src="./assets/page-body.png" /><?= $page ?></span>
         </li>
 
         <?php for ($i = $page + 1; $i <= min (max ($page - 10, 1) + 20, $pages_max); ++$i): ?>
             <li class="page-item page-<?= $i - $page ?>">
-                <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $i ?>)"><?= $i ?></a>
+                <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $i ?>)">
+                    <img src="./assets/page-body.png" /><?= $i ?>
+                </a>
             </li>
         <?php endfor ?>
 
         <?php if ($page < $pages_max): ?>
             <li class="page-item">
-                <a class="page-link no-wrap" href="javascript: void (0)" onclick="Script.jumpTo (<?= $pages_max ?>)">&gt;|</a>
+                <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $pages_max ?>)">
+                    <img src="./assets/page-last.png" />&gt;|
+                </a>
             </li>
         <?php else: ?>
             <li class="page-item disabled">
-                <span class="page-link">&gt;|</span>
+                <span class="page-link"><img src="./assets/page-last.png" />&gt;|</span>
             </li>
         <?php endif ?>
     </ul>

broadcast/style.css

@@ -18,9 +18,20 @@
   max-width:  6px;
 }
 
+.pagination
+{
+
+}
+
 .page-item
 {
   width:      3.5em;
   text-align: center;
+  vertical-align: middle;
+}
+
+.page-item:not(:not(.disabled, .active)) img
+{
+  filter: invert(100%);
 }