ニジカ 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>

broadcast/pagination.cmp.php

@@ -1,15 +1,19 @@
+<!-- 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" href="javascript: void (0)" onclick="Script.jumpTo (1)">
-                    <img src="./assets/page-first.png" />|&lt;
+                    <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">
-                    <img src="./assets/page-first.png" />|&lt;
+                    <img src="./assets/page-first.png" />
+                    <div class="page-link-text">|&lt;</div>
                 </span>
             </li>
         <?php endif ?>
@@ -17,19 +21,24 @@
         <?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 ?>)">
-                    <img src="./assets/page-body.png" /><?= $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"><img src="./assets/page-body.png" /><?= $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 ?>)">
-                    <img src="./assets/page-body.png" /><?= $i ?>
+                    <img src="./assets/page-body.png" />
+                    <div class="page-link-text"><?= $i ?></div>
                 </a>
             </li>
         <?php endfor ?>
@@ -37,12 +46,16 @@
         <?php if ($page < $pages_max): ?>
             <li class="page-item">
                 <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $pages_max ?>)">
-                    <img src="./assets/page-last.png" />&gt;|
+                    <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"><img src="./assets/page-last.png" />&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;
@@ -18,20 +20,50 @@
   max-width:  6px;
 }
 
-.pagination
+.page-item
 {
+  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
+.page-item.active > .page-link
 {
-  width:      3.5em;
-  text-align: center;
-  vertical-align: middle;
+  font-weight:  bold;
 }
 
-.page-item:not(:not(.disabled, .active)) img
+.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
 {
-  filter: invert(100%);
+  --bs-pagination-bg:           none;
+  --bs-pagination-disabled-bg:  none;
+  --bs-pagination-hover-bg:     none;
+  --bs-pagination-active-color: none;
+  --bs-pagination-active-bg:    none;
 }