miteruzo/nizika
0
0
Fork 0
Code Issues 5 Pull Requests Releases Wiki Activity

ニジカ Pagination 完成

Browse Source
This commit is contained in:
みてるぞ
2024-04-07 23:54:34 +09:00
parent cbb64ddcf1
commit 2df0e1d9f5
3 changed files with 73 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
broadcast/index.frm.php
+12 -3
View File
@@ -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
+20 -7
View File
@@ -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
+41 -9
View File
@@ -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;
width: 3.5em;
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
}
.page-item:not(:not(.disabled, .active)) img
.page-link
{
filter: invert(100%);
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;
}