ニジカ Pagination 完成
This commit is contained in:
+12
-3
@@ -68,10 +68,16 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-sm input-group">
|
<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 ?>" />
|
value="<?= $date_start ?>" />
|
||||||
<span class="input-group-text">〜</span>
|
<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 ?>" />
|
value="<?= $date_end ?>" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -82,7 +88,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-sm">
|
<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 ?>"/>
|
value="<?= $keyword ?>"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,15 +1,19 @@
|
|||||||
|
<!-- vim:set tabstop=4 softtabstop=4 expandtab :-->
|
||||||
|
|
||||||
<nav class="d-flex justify-content-center" aria-label="...">
|
<nav class="d-flex justify-content-center" aria-label="...">
|
||||||
<ul class="pagination opacity-0">
|
<ul class="pagination opacity-0">
|
||||||
<?php if ($page > 1): ?>
|
<?php if ($page > 1): ?>
|
||||||
<li class="page-item">
|
<li class="page-item">
|
||||||
<a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (1)">
|
<a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (1)">
|
||||||
<img src="./assets/page-first.png" />|<
|
<img src="./assets/page-first.png" />
|
||||||
|
<div class="page-link-text">|<</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<li class="page-item disabled">
|
<li class="page-item disabled">
|
||||||
<span class="page-link">
|
<span class="page-link">
|
||||||
<img src="./assets/page-first.png" />|<
|
<img src="./assets/page-first.png" />
|
||||||
|
<div class="page-link-text">|<</div>
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<?php endif ?>
|
<?php endif ?>
|
||||||
@@ -17,19 +21,24 @@
|
|||||||
<?php for ($i = max (min ($page + 10, $pages_max) - 20, 1); $i < $page; ++$i): ?>
|
<?php for ($i = max (min ($page + 10, $pages_max) - 20, 1); $i < $page; ++$i): ?>
|
||||||
<li class="page-item page-<?= $page - $i ?>">
|
<li class="page-item page-<?= $page - $i ?>">
|
||||||
<a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<?php endfor ?>
|
<?php endfor ?>
|
||||||
|
|
||||||
<li class="page-item active" aria-current="page">
|
<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>
|
</li>
|
||||||
|
|
||||||
<?php for ($i = $page + 1; $i <= min (max ($page - 10, 1) + 20, $pages_max); ++$i): ?>
|
<?php for ($i = $page + 1; $i <= min (max ($page - 10, 1) + 20, $pages_max); ++$i): ?>
|
||||||
<li class="page-item page-<?= $i - $page ?>">
|
<li class="page-item page-<?= $i - $page ?>">
|
||||||
<a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<?php endfor ?>
|
<?php endfor ?>
|
||||||
@@ -37,12 +46,16 @@
|
|||||||
<?php if ($page < $pages_max): ?>
|
<?php if ($page < $pages_max): ?>
|
||||||
<li class="page-item">
|
<li class="page-item">
|
||||||
<a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $pages_max ?>)">
|
<a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $pages_max ?>)">
|
||||||
<img src="./assets/page-last.png" />>|
|
<img src="./assets/page-last.png" />
|
||||||
|
<div class="page-link-text">>|</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<li class="page-item disabled">
|
<li class="page-item disabled">
|
||||||
<span class="page-link"><img src="./assets/page-last.png" />>|</span>
|
<span class="page-link">
|
||||||
|
<img src="./assets/page-last.png" />
|
||||||
|
<div class="page-link-text">>|</div>
|
||||||
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<?php endif ?>
|
<?php endif ?>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
+41
-9
@@ -1,3 +1,5 @@
|
|||||||
|
/* vim:set tabstop=2 softtabstop=2 expandtab :*/
|
||||||
|
|
||||||
.container-max-width
|
.container-max-width
|
||||||
{
|
{
|
||||||
max-width: 1600px;
|
max-width: 1600px;
|
||||||
@@ -18,20 +20,50 @@
|
|||||||
max-width: 6px;
|
max-width: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination
|
|
||||||
{
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-item
|
.page-item
|
||||||
{
|
{
|
||||||
width: 3.5em;
|
width: 3.5em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: middle;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user