ニジカ Pagination 完成

broadcast/index.frm.php

@@ -68,10 +68,16 @@
                                     </div>
 
                                     <div class="col-sm input-group">
-                                        <input type="text" class="form-control" placeholder="YYYY-MM-DD" id="filter-date-start"
+                                        <input type="text"
+                                               class="form-control"
+                                               placeholder="YYYY-MM-DD"
+                                               id="filter-date-start"
                                                value="<?= $date_start ?>" />
                                         <span class="input-group-text">〜</span>
-                                        <input type="text" class="form-control" placeholder="YYYY-MM-DD" id="filter-date-end"
+                                        <input type="text"
+                                               class="form-control"
+                                               placeholder="YYYY-MM-DD"
+                                               id="filter-date-end"
                                                value="<?= $date_end ?>" />
                                     </div>
                                 </div>
@@ -82,7 +88,10 @@
                                     </div>
 
                                     <div class="col-sm">
-                                        <input type="text" class="form-control" placeholder="<?= $april_fool ? 'ﾑﾑﾑﾑ!!  ｸｻﾀﾍﾞﾃﾙ!!!!!' : 'ぬ゛ぅ゛ぅ゛ぅ゛ぅ゛ぅ゛ん゛' ?>" id="filter-keyword" 
+                                        <input type="text"
+                                               class="form-control"
+                                               placeholder="<?= $april_fool ? 'ﾑﾑﾑﾑ!!  ｸｻﾀﾍﾞﾃﾙ!!!!!' : 'ぬ゛ぅ゛ぅ゛ぅ゛ぅ゛ぅ゛ん゛' ?>"
+                                               id="filter-keyword" 
                                                value="<?= $keyword ?>"/>
                                     </div>
                                 </div>
@@ -111,7 +120,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

@@ -1,38 +1,61 @@
+<!-- vim:set tabstop=4 softtabstop=4 expandtab :-->
+
 <nav class="d-flex justify-content-center" aria-label="...">
     <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" />
+                    <div class="page-link-text">|&lt;</div>
+                </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" />
+                    <div class="page-link-text">|&lt;</div>
+                </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" />
+                    <div class="page-link-text"><?= $i ?></div>
+                </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" />
+                <div class="page-link-text"><?= $page ?></div>
+            </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" />
+                    <div class="page-link-text"><?= $i ?></div>
+                </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" />
+                    <div class="page-link-text">&gt;|</div>
+                </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" />
+                    <div class="page-link-text">&gt;|</div>
+                </span>
             </li>
         <?php endif ?>
     </ul>

broadcast/style.css

@@ -1,3 +1,5 @@
+/* vim:set tabstop=2 softtabstop=2 expandtab :*/
+
 .container-max-width
 {
   max-width:  1600px;
@@ -22,5 +24,46 @@
 {
   width:          3.5em;
   text-align:     center;
+  vertical-align: middle;
+  margin:         0;
+  padding:        0;
+}
+
+.page-link
+{
+  color:          black;
+  padding:        0;
+  margin:         0;
+  border:         none;
+  margin-right:   -3px;
+}
+
+.page-item.active > .page-link
+{
+  font-weight:  bold;
+}
+
+.page-item.disabled > .page-link
+{
+  color:  gray;
+}
+
+.page-link-text
+{
+  position:   absolute;
+  top:        50%;
+  left:       50%;
+  transform:  translate(-50%, -50%);
+  padding:    0;
+  margin:     0;
+}
+
+.pagination
+{
+  --bs-pagination-bg:           none;
+  --bs-pagination-disabled-bg:  none;
+  --bs-pagination-hover-bg:     none;
+  --bs-pagination-active-color: none;
+  --bs-pagination-active-bg:    none;
 }