mirror of
https://github.com/phpbb/phpbb.git
synced 2025-06-28 06:08:52 +00:00
[ticket/12613] Improved pagination
PHPBB3-12613
This commit is contained in:
parent
49c875413c
commit
c3b24e2005
11 changed files with 152 additions and 51 deletions
|
@ -341,6 +341,7 @@ $lang = array_merge($lang, array(
|
||||||
'JUMP_PAGE' => 'Enter the page number you wish to go to',
|
'JUMP_PAGE' => 'Enter the page number you wish to go to',
|
||||||
'JUMP_TO' => 'Jump to',
|
'JUMP_TO' => 'Jump to',
|
||||||
'JUMP_TO_PAGE' => 'Click to jump to page…',
|
'JUMP_TO_PAGE' => 'Click to jump to page…',
|
||||||
|
'JUMP_TO_PAGE_FORM' => 'Jump to page:',
|
||||||
|
|
||||||
'KB' => 'KB',
|
'KB' => 'KB',
|
||||||
'KIB' => 'KiB',
|
'KIB' => 'KiB',
|
||||||
|
|
|
@ -126,8 +126,8 @@ class pagination
|
||||||
// determine this number. Again at most five pages? Then just display them all. More than
|
// determine this number. Again at most five pages? Then just display them all. More than
|
||||||
// five and we first (min) determine whether we'd end up listing more pages than exist.
|
// five and we first (min) determine whether we'd end up listing more pages than exist.
|
||||||
// We then (max) ensure we're displaying the minimum number of pages.
|
// We then (max) ensure we're displaying the minimum number of pages.
|
||||||
$start_page = ($total_pages > 5) ? min(max(1, $on_page - 3), $total_pages - 4) : 1;
|
$start_page = ($total_pages > 5) ? min(max(1, $on_page - 2), $total_pages - 4) : 1;
|
||||||
$end_page = ($total_pages > 5) ? max(min($total_pages, $on_page + 3), 5) : $total_pages;
|
$end_page = ($total_pages > 5) ? max(min($total_pages, $on_page + 2), 5) : $total_pages;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($on_page != 1)
|
if ($on_page != 1)
|
||||||
|
|
|
@ -25,20 +25,12 @@ function popup(url, width, height, name) {
|
||||||
/**
|
/**
|
||||||
* Jump to page
|
* Jump to page
|
||||||
*/
|
*/
|
||||||
function jumpto(item) {
|
function jumpto(form) {
|
||||||
if (!item || !item.length) {
|
|
||||||
item = $('a.pagination-trigger[data-lang-jump-page]');
|
|
||||||
if (!item.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var jump_page = item.attr('data-lang-jump-page'),
|
var page = $(form).find("input[name='page-number']").val(),
|
||||||
on_page = item.attr('data-on-page'),
|
per_page = $(form).find("input[name='per-page']").val(),
|
||||||
per_page = item.attr('data-per-page'),
|
base_url = $(form).find("input[name='base-url']").val(),
|
||||||
base_url = item.attr('data-base-url'),
|
start_name = $(form).find("input[name='start-name']").val();
|
||||||
start_name = item.attr('data-start-name'),
|
|
||||||
page = prompt(jump_page, on_page);
|
|
||||||
|
|
||||||
if (page !== null && !isNaN(page) && page == Math.floor(page) && page > 0) {
|
if (page !== null && !isNaN(page) && page == Math.floor(page) && page > 0) {
|
||||||
if (base_url.indexOf('?') === -1) {
|
if (base_url.indexOf('?') === -1) {
|
||||||
|
@ -363,10 +355,17 @@ function parse_document(container)
|
||||||
/**
|
/**
|
||||||
* Pagination
|
* Pagination
|
||||||
*/
|
*/
|
||||||
container.find('a.pagination-trigger').click(function() {
|
container.find('form.page-jump-form').submit(function(event) {
|
||||||
|
event.preventDefault();
|
||||||
jumpto($(this));
|
jumpto($(this));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
container.find('.pagination-trigger').click(function() {
|
||||||
|
$input = $(this).parent().find("input[name='page-number']");
|
||||||
|
|
||||||
|
setTimeout(function() { $input.focus(); },100);
|
||||||
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Dropdowns
|
* Dropdowns
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -1,18 +1,37 @@
|
||||||
<!-- IF BASE_URL -->
|
<ul>
|
||||||
<a href="#" class="pagination-trigger" title="{L_JUMP_TO_PAGE}" data-lang-jump-page="{L_JUMP_PAGE|e('html_attr')}{L_COLON}" data-on-page="{CURRENT_PAGE}" data-per-page="{PER_PAGE}" data-base-url="{BASE_URL|e('html_attr')}" data-base-is-route="{BASE_IS_ROUTE}" data-start-name="{START_NAME}">{PAGE_NUMBER}</a> •
|
<!-- IF BASE_URL -->
|
||||||
<!-- ELSE -->
|
<li class="dropdown-container dropdown-button-control dropdown-jump-to jump-to">
|
||||||
{PAGE_NUMBER} •
|
<a href="#" class="pagination-trigger dropdown-trigger" title="{L_JUMP_TO_PAGE}">{PAGE_NUMBER}</a>
|
||||||
<!-- ENDIF -->
|
<div class="dropdown hidden">
|
||||||
<ul>
|
<div class="pointer"><div class="pointer-inner"></div></div>
|
||||||
<!-- BEGIN pagination -->
|
<ul class="dropdown-contents">
|
||||||
<!-- IF pagination.S_IS_PREV -->
|
<li>{L_JUMP_TO_PAGE_FORM}</li>
|
||||||
<!-- ELSEIF pagination.S_IS_CURRENT -->
|
<li>
|
||||||
<li class="active"><span>{pagination.PAGE_NUMBER}</span></li>
|
<form class="page-jump-form" method="get">
|
||||||
<!-- ELSEIF pagination.S_IS_ELLIPSIS -->
|
<fieldset>
|
||||||
<li class="ellipsis"><span>{L_ELLIPSIS}</span></li>
|
<input type="text" name="page-number" maxlength="6" title="{L_SEARCH_KEYWORDS}" class="inputbox tiny" value="" placeholder="{CURRENT_PAGE}" />
|
||||||
<!-- ELSEIF pagination.S_IS_NEXT -->
|
<input class="button2" value="{L_GO}" type="submit" />
|
||||||
<!-- ELSE -->
|
<input type="hidden" value="{PER_PAGE}" name="per-page">
|
||||||
<li><a href="{pagination.PAGE_URL}">{pagination.PAGE_NUMBER}</a></li>
|
<input type="hidden" value="{START_NAME}" name="start-name">
|
||||||
<!-- ENDIF -->
|
<input type="hidden" value="{BASE_URL|e('html_attr')}" name="base-url">
|
||||||
<!-- END pagination -->
|
</fieldset>
|
||||||
</ul>
|
</form>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<!-- ENDIF -->
|
||||||
|
<!-- BEGIN pagination -->
|
||||||
|
<!-- IF pagination.S_IS_PREV -->
|
||||||
|
<li class="previous"><a href="{pagination.PAGE_URL}">{L_PREVIOUS}</a></li>
|
||||||
|
<!-- ELSEIF pagination.S_IS_CURRENT -->
|
||||||
|
<li class="active"><span>{pagination.PAGE_NUMBER}</span></li>
|
||||||
|
<!-- ELSEIF pagination.S_IS_ELLIPSIS -->
|
||||||
|
<li class="ellipsis"><span>{L_ELLIPSIS}</span></li>
|
||||||
|
<!-- ELSEIF pagination.S_IS_NEXT -->
|
||||||
|
<li class="next"><a href="{pagination.PAGE_URL}">{L_NEXT}</a></li>
|
||||||
|
<!-- ELSE -->
|
||||||
|
<li><a href="{pagination.PAGE_URL}">{pagination.PAGE_NUMBER}</a></li>
|
||||||
|
<!-- ENDIF -->
|
||||||
|
<!-- END pagination -->
|
||||||
|
</ul>
|
||||||
|
|
|
@ -59,11 +59,11 @@
|
||||||
|
|
||||||
<div class="pagination">
|
<div class="pagination">
|
||||||
<!-- IF not S_IS_BOT and U_MARK_TOPICS and .topicrow --><a href="{U_MARK_TOPICS}" accesskey="m" data-ajax="mark_topics_read">{L_MARK_TOPICS_READ}</a> • <!-- ENDIF -->
|
<!-- IF not S_IS_BOT and U_MARK_TOPICS and .topicrow --><a href="{U_MARK_TOPICS}" accesskey="m" data-ajax="mark_topics_read">{L_MARK_TOPICS_READ}</a> • <!-- ENDIF -->
|
||||||
{TOTAL_TOPICS} •
|
{TOTAL_TOPICS}
|
||||||
<!-- IF .pagination -->
|
<!-- IF .pagination -->
|
||||||
<!-- INCLUDE pagination.html -->
|
<!-- INCLUDE pagination.html -->
|
||||||
<!-- ELSE -->
|
<!-- ELSE -->
|
||||||
{PAGE_NUMBER}
|
• {PAGE_NUMBER}
|
||||||
<!-- ENDIF -->
|
<!-- ENDIF -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -233,11 +233,11 @@
|
||||||
|
|
||||||
<div class="pagination">
|
<div class="pagination">
|
||||||
<!-- IF not S_IS_BOT and U_MARK_TOPICS and .topicrow --><a href="{U_MARK_TOPICS}" data-ajax="mark_topics_read">{L_MARK_TOPICS_READ}</a> • <!-- ENDIF -->
|
<!-- IF not S_IS_BOT and U_MARK_TOPICS and .topicrow --><a href="{U_MARK_TOPICS}" data-ajax="mark_topics_read">{L_MARK_TOPICS_READ}</a> • <!-- ENDIF -->
|
||||||
{TOTAL_TOPICS} •
|
{TOTAL_TOPICS}
|
||||||
<!-- IF .pagination -->
|
<!-- IF .pagination -->
|
||||||
<!-- INCLUDE pagination.html -->
|
<!-- INCLUDE pagination.html -->
|
||||||
<!-- ELSE -->
|
<!-- ELSE -->
|
||||||
{PAGE_NUMBER}
|
• {PAGE_NUMBER}
|
||||||
<!-- ENDIF -->
|
<!-- ENDIF -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -51,11 +51,11 @@
|
||||||
|
|
||||||
<!-- IF .pagination or TOTAL_POSTS -->
|
<!-- IF .pagination or TOTAL_POSTS -->
|
||||||
<div class="pagination">
|
<div class="pagination">
|
||||||
<!-- IF U_VIEW_UNREAD_POST and not S_IS_BOT --><a href="{U_VIEW_UNREAD_POST}">{L_VIEW_UNREAD_POST}</a> • <!-- ENDIF -->{TOTAL_POSTS} •
|
<!-- IF U_VIEW_UNREAD_POST and not S_IS_BOT --><a href="{U_VIEW_UNREAD_POST}">{L_VIEW_UNREAD_POST}</a> • <!-- ENDIF -->{TOTAL_POSTS}
|
||||||
<!-- IF .pagination -->
|
<!-- IF .pagination -->
|
||||||
<!-- INCLUDE pagination.html -->
|
<!-- INCLUDE pagination.html -->
|
||||||
<!-- ELSE -->
|
<!-- ELSE -->
|
||||||
{PAGE_NUMBER}
|
• {PAGE_NUMBER}
|
||||||
<!-- ENDIF -->
|
<!-- ENDIF -->
|
||||||
</div>
|
</div>
|
||||||
<!-- ENDIF -->
|
<!-- ENDIF -->
|
||||||
|
@ -352,11 +352,11 @@
|
||||||
|
|
||||||
<!-- IF .pagination or TOTAL_POSTS -->
|
<!-- IF .pagination or TOTAL_POSTS -->
|
||||||
<div class="pagination">
|
<div class="pagination">
|
||||||
{TOTAL_POSTS} •
|
{TOTAL_POSTS}
|
||||||
<!-- IF .pagination -->
|
<!-- IF .pagination -->
|
||||||
<!-- INCLUDE pagination.html -->
|
<!-- INCLUDE pagination.html -->
|
||||||
<!-- ELSE -->
|
<!-- ELSE -->
|
||||||
{PAGE_NUMBER}
|
• {PAGE_NUMBER}
|
||||||
<!-- ENDIF -->
|
<!-- ENDIF -->
|
||||||
</div>
|
</div>
|
||||||
<!-- ENDIF -->
|
<!-- ENDIF -->
|
||||||
|
|
|
@ -226,6 +226,11 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pagination li.previous a { background-position: -50px 2px; }
|
||||||
|
.pagination li.next a { background-position: -30px 2px; }
|
||||||
|
.pagination li.previous a:hover { background-position: -50px -18px; }
|
||||||
|
.pagination li.next a:hover { background-position: -30px -18px; }
|
||||||
|
|
||||||
/* Miscellaneous styles
|
/* Miscellaneous styles
|
||||||
---------------------------------------- */
|
---------------------------------------- */
|
||||||
.rtl #forum-permissions {
|
.rtl #forum-permissions {
|
||||||
|
|
|
@ -188,6 +188,10 @@ dl.details dd {
|
||||||
border-color: #B4BAC0;
|
border-color: #B4BAC0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pagination li.next a, .pagination li.previous a, .pagination li.jump-to a {
|
||||||
|
background-image: url("./images/icons_pagination.png");
|
||||||
|
}
|
||||||
|
|
||||||
/* Pagination in viewforum for multipage topics */
|
/* Pagination in viewforum for multipage topics */
|
||||||
.row .pagination {
|
.row .pagination {
|
||||||
background-image: url("./images/icon_pages.gif");
|
background-image: url("./images/icon_pages.gif");
|
||||||
|
|
|
@ -833,21 +833,61 @@ li.pagination ul {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination ul li, dl .pagination ul li, dl.icon .pagination ul li {
|
.pagination ul li, dl .pagination ul li, dl.icon .pagination ul li {
|
||||||
display: inline;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination li a, .pagnation li span, li .pagination li a, li .pagination li span, .pagination li.active span, .pagination li.ellipsis span {
|
.pagination li a, .pagnation li span, li .pagination li a, li .pagination li span, .pagination li.active span, .pagination li.ellipsis span {
|
||||||
font-weight: normal;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 0 2px;
|
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: block;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
line-height: 1.5em;
|
font-weight: normal;
|
||||||
|
line-height: 13px;
|
||||||
|
min-width: 10px;
|
||||||
|
padding: 3px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pagination li.ellipsis span {
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination li.jump-to {
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination li.jump-to a, .pagination li.next a, .pagination li.previous a {
|
||||||
|
font-size: 0;
|
||||||
|
height: 13px;
|
||||||
|
width: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination li.jump-to a {
|
||||||
|
background-position: 0 2px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination li.next a {
|
||||||
|
background-position: -50px 2px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination li.previous a {
|
||||||
|
background-position: -30px 2px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination li.jump-to a:hover { background-position: 0 -18px; }
|
||||||
|
.pagination li.next a:hover { background-position: -50px -18px; }
|
||||||
|
.pagination li.previous a:hover { background-position: -30px -18px; }
|
||||||
|
|
||||||
/* Pagination in viewforum for multipage topics */
|
/* Pagination in viewforum for multipage topics */
|
||||||
.row .pagination {
|
.row .pagination {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -859,6 +899,11 @@ li.pagination ul {
|
||||||
background: none 0 50% no-repeat;
|
background: none 0 50% no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
li .pagination li a, li .pagnation li span {
|
||||||
|
border-radius: 1px;
|
||||||
|
padding: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
/* jQuery popups
|
/* jQuery popups
|
||||||
---------------------------------------- */
|
---------------------------------------- */
|
||||||
.phpbb_alert {
|
.phpbb_alert {
|
||||||
|
@ -1155,3 +1200,25 @@ form > p.post-notice strong {
|
||||||
.compact .icon-notification > a > strong, .compact .icon-pm > a > strong {
|
.compact .icon-notification > a > strong, .compact .icon-pm > a > strong {
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropdown-jump-to .dropdown {
|
||||||
|
top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-jump-to .dropdown-contents {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-jump-to .dropdown-contents ul {
|
||||||
|
display: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-jump-to .dropdown-contents li {
|
||||||
|
display: list-item;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
padding-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-jump-to input.tiny {
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
|
BIN
phpBB/styles/prosilver/theme/images/icons_pagination.png
Normal file
BIN
phpBB/styles/prosilver/theme/images/icons_pagination.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 786 B |
|
@ -201,10 +201,12 @@ ul.topiclist li.row dt a.subforum {
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination li a, .pagination li span {
|
.pagination ul {
|
||||||
min-width: 10px;
|
margin-top: 5px;
|
||||||
display: inline-block;
|
}
|
||||||
text-align: center;
|
|
||||||
|
.row .pagination ul {
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive tables
|
/* Responsive tables
|
||||||
|
@ -518,6 +520,10 @@ fieldset.display-actions {
|
||||||
padding-bottom: 1px;
|
padding-bottom: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.topic-actions > .pagination li.jump-to {
|
||||||
|
margin: 0 2px;
|
||||||
|
}
|
||||||
|
|
||||||
.topic-actions > div.search-box, p.jumpbox-return {
|
.topic-actions > div.search-box, p.jumpbox-return {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue