From 2df0e1d9f5739f374d033396f6cc57855845d4bb Mon Sep 17 00:00:00 2001
From: miteruzo <miteruzo@naver.com>
Date: Sun, 7 Apr 2024 23:54:34 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=8B=E3=82=B8=E3=82=AB=20Pagination=20?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 broadcast/index.frm.php      | 15 +++++++++---
 broadcast/pagination.cmp.php | 27 +++++++++++++++------
 broadcast/style.css          | 46 ++++++++++++++++++++++++++++++------
 3 files changed, 71 insertions(+), 17 deletions(-)

diff --git a/broadcast/index.frm.php b/broadcast/index.frm.php
index ce569c0..34a1937 100644
--- a/broadcast/index.frm.php
+++ b/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>
diff --git a/broadcast/pagination.cmp.php b/broadcast/pagination.cmp.php
index 89ae363..bcd6b72 100644
--- a/broadcast/pagination.cmp.php
+++ b/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>
diff --git a/broadcast/style.css b/broadcast/style.css
index edc2cc5..70152fd 100644
--- a/broadcast/style.css
+++ b/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;
 }