Pagination: Make it a LOT better

thx grinotion for the idea xddddd
This commit is contained in:
veselcraft 2021-11-27 15:19:17 +03:00
parent 478f8f9368
commit 7d94282ad4
No known key found for this signature in database
GPG key ID: AED66BC1AC628A4E
2 changed files with 35 additions and 12 deletions

View file

@ -1,14 +1,16 @@
{var $space = 2}
{var $pageCount = ceil($conf->count / $conf->perPage)}
<div n:if="!($conf->page === 1 && $conf->count <= $conf->perPage)" class="paginator"> <div n:if="!($conf->page === 1 && $conf->count <= $conf->perPage)" class="paginator">
<br/> {if $conf->page > $space}
<center> <a n:attr="class => ($conf->page === 1 ? 'active')" href="?{http_build_query(array_merge($_GET, ['p' => 1]), 'k', '&', PHP_QUERY_RFC3986)}">«</a>
<a n:if="$conf->page != 1" {/if}
href="?{http_build_query(array_merge($_GET, ['p' => ($conf->page - 1)]), 'k', '&', PHP_QUERY_RFC3986)}" {for $j = $conf->page - ($space-1); $j <= $conf->page + ($space-1); $j++}
style="float: left;">&lt;&lt; {_paginator_back}</a> {if $j > 0 && $j <= $pageCount}
<a n:attr="class => ($conf->page === $j ? 'active')" href="?{http_build_query(array_merge($_GET, ['p' => $j]), 'k', '&', PHP_QUERY_RFC3986)}">{$j}</a>
{tr("paginator_page", $conf->page)} {/if}
{/for}
<a n:if="$conf->count > (($conf->page - 1) * $conf->perPage + $conf->amount) && $conf->amount > 0" {if $conf->page <= $pageCount-$space}
href="?{http_build_query(array_merge($_GET, ['p' => ($conf->page + 1)]), 'k', '&', PHP_QUERY_RFC3986)}" <a n:attr="class => ($conf->page === $pageCount ? 'active')" href="?{http_build_query(array_merge($_GET, ['p' => $pageCount]), 'k', '&', PHP_QUERY_RFC3986)}">»</a>
style="float: right;">{_paginator_next} &gt;&gt;</a> {/if}
</center>
</div> </div>

View file

@ -1525,3 +1525,24 @@ body.scrolled .toTop:hover {
color: rgb(128, 128, 128); color: rgb(128, 128, 128);
font-size: 10px; font-size: 10px;
} }
.paginator {
float: right;
margin-top: -1px;
}
.paginator a {
border-top: 3px solid transparent;
display: inline-block;
padding: 4px 5px;
}
.paginator a:hover {
border-top: 3px solid rgb(170, 170, 170);
background-color: rgb(230, 230, 230);
}
.paginator a.active {
border-top: 3px solid rgb(130, 130, 130);
font-weight: bold;
}