[ticket/12613] Improved pagination

PHPBB3-12613
author: PayBas <contact@paybas.com> 2014-05-29 23:28:22 +0200
committer: PayBas <contact@paybas.com> 2014-06-05 09:59:31 +0200
commit: c3b24e200566b11e80f96f8186dbe5eab6241d72 (patch)
tree: 243ae8a25f93e6eee62ca2a18273e5a933c49580
parent: 49c875413ca2fd1cc438ce42c64e0a00a5044e56 (diff)
download: forums-c3b24e200566b11e80f96f8186dbe5eab6241d72.tar
forums-c3b24e200566b11e80f96f8186dbe5eab6241d72.tar.gz
forums-c3b24e200566b11e80f96f8186dbe5eab6241d72.tar.bz2
forums-c3b24e200566b11e80f96f8186dbe5eab6241d72.tar.xz
forums-c3b24e200566b11e80f96f8186dbe5eab6241d72.zip
11 files changed, 152 insertions, 51 deletions
diff --git a/phpBB/language/en/common.php b/phpBB/language/en/common.php
index 2020783100..d2aa0fea54 100644
--- a/phpBB/language/en/common.php
+++ b/phpBB/language/en/common.php
@@ -341,6 +341,7 @@ $lang = array_merge($lang, array(
 	'JUMP_PAGE'				=> 'Enter the page number you wish to go to',
 	'JUMP_TO'				=> 'Jump to',
 	'JUMP_TO_PAGE'			=> 'Click to jump to page…',
+	'JUMP_TO_PAGE_FORM'		=> 'Jump to page:',
 
 	'KB'					=> 'KB',
 	'KIB'					=> 'KiB',
diff --git a/phpBB/phpbb/pagination.php b/phpBB/phpbb/pagination.php
index 927d711f4b..1d20b7f81c 100644
--- a/phpBB/phpbb/pagination.php
+++ b/phpBB/phpbb/pagination.php
@@ -126,8 +126,8 @@ class pagination
 				// 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.
 				// 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;
-				$end_page = ($total_pages > 5) ? max(min($total_pages, $on_page + 3), 5) : $total_pages;
+				$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 + 2), 5) : $total_pages;
 			}
 
 			if ($on_page != 1)
diff --git a/phpBB/styles/prosilver/template/forum_fn.js b/phpBB/styles/prosilver/template/forum_fn.js
index fa838fde19..5d2382c4dd 100644
--- a/phpBB/styles/prosilver/template/forum_fn.js
+++ b/phpBB/styles/prosilver/template/forum_fn.js
@@ -25,20 +25,12 @@ function popup(url, width, height, name) {
 /**
 * Jump to page
 */
-function jumpto(item) {
-	if (!item || !item.length) {
-		item = $('a.pagination-trigger[data-lang-jump-page]');
-		if (!item.length) {
-			return;
-		}
-	}
+function jumpto(form) {
 
-	var jump_page = item.attr('data-lang-jump-page'),
-		on_page = item.attr('data-on-page'),
-		per_page = item.attr('data-per-page'),
-		base_url = item.attr('data-base-url'),
-		start_name = item.attr('data-start-name'),
-		page = prompt(jump_page, on_page);
+	var page = $(form).find("input[name='page-number']").val(),
+		per_page = $(form).find("input[name='per-page']").val(),
+		base_url = $(form).find("input[name='base-url']").val(),
+		start_name = $(form).find("input[name='start-name']").val();
 
 	if (page !== null && !isNaN(page) && page == Math.floor(page) && page > 0) {
 		if (base_url.indexOf('?') === -1) {
@@ -363,9 +355,16 @@ function parse_document(container)
 	/**
 	* Pagination
 	*/
-	container.find('a.pagination-trigger').click(function() {
+	container.find('form.page-jump-form').submit(function(event) {
+		event.preventDefault();
 		jumpto($(this));
 	});
+	
+	container.find('.pagination-trigger').click(function() {
+		$input = $(this).parent().find("input[name='page-number']");
+
+		setTimeout(function() { $input.focus(); },100);
+	});
 
 	/**
 	* Dropdowns
diff --git a/phpBB/styles/prosilver/template/pagination.html b/phpBB/styles/prosilver/template/pagination.html
index e27a90900a..8b8631ce26 100644
--- a/phpBB/styles/prosilver/template/pagination.html
+++ b/phpBB/styles/prosilver/template/pagination.html
@@ -1,18 +1,37 @@
-					<!-- IF BASE_URL -->
-					<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> &bull;
-					<!-- ELSE -->
-					{PAGE_NUMBER} &bull;
-					<!-- ENDIF -->
-					<ul>
-					<!-- BEGIN pagination -->
-						<!-- IF pagination.S_IS_PREV -->
-						<!-- 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 -->
-						<!-- ELSE -->
-						<li><a href="{pagination.PAGE_URL}">{pagination.PAGE_NUMBER}</a></li>
-						<!-- ENDIF -->
-					<!-- END pagination -->
-					</ul>
+<ul>
+<!-- IF BASE_URL -->
+	<li class="dropdown-container dropdown-button-control dropdown-jump-to jump-to">
+		<a href="#" class="pagination-trigger dropdown-trigger" title="{L_JUMP_TO_PAGE}">{PAGE_NUMBER}</a>
+		<div class="dropdown hidden">
+			<div class="pointer"><div class="pointer-inner"></div></div>
+			<ul class="dropdown-contents">
+				<li>{L_JUMP_TO_PAGE_FORM}</li>
+				<li>
+					<form class="page-jump-form" method="get">
+					<fieldset>
+						<input type="text" name="page-number"  maxlength="6" title="{L_SEARCH_KEYWORDS}" class="inputbox tiny" value="" placeholder="{CURRENT_PAGE}" />
+						<input class="button2" value="{L_GO}" type="submit" />
+						<input type="hidden" value="{PER_PAGE}" name="per-page">
+						<input type="hidden" value="{START_NAME}" name="start-name">
+						<input type="hidden" value="{BASE_URL|e('html_attr')}" name="base-url">
+					</fieldset>
+					</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>
diff --git a/phpBB/styles/prosilver/template/viewforum_body.html b/phpBB/styles/prosilver/template/viewforum_body.html
index c747dd01f5..51aaeb937e 100644
--- a/phpBB/styles/prosilver/template/viewforum_body.html
+++ b/phpBB/styles/prosilver/template/viewforum_body.html
@@ -59,11 +59,11 @@
 
 	<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> &bull; <!-- ENDIF -->
-		{TOTAL_TOPICS} &bull; 
+		{TOTAL_TOPICS} 
 		<!-- IF .pagination -->
 			<!-- INCLUDE pagination.html -->
 		<!-- ELSE -->
-			{PAGE_NUMBER}
+			&bull; {PAGE_NUMBER}
 		<!-- ENDIF -->
 	</div>
 
@@ -233,11 +233,11 @@
 
 		<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> &bull; <!-- ENDIF -->
-			{TOTAL_TOPICS} &bull; 
+			{TOTAL_TOPICS} 
 			<!-- IF .pagination -->
 				<!-- INCLUDE pagination.html -->
 			<!-- ELSE -->
-				{PAGE_NUMBER}
+				 &bull; {PAGE_NUMBER}
 			<!-- ENDIF -->
 		</div>
 	</div>
diff --git a/phpBB/styles/prosilver/template/viewtopic_body.html b/phpBB/styles/prosilver/template/viewtopic_body.html
index fb0b9733e7..2133f9a21a 100644
--- a/phpBB/styles/prosilver/template/viewtopic_body.html
+++ b/phpBB/styles/prosilver/template/viewtopic_body.html
@@ -51,11 +51,11 @@
 
 	<!-- IF .pagination or TOTAL_POSTS -->
 		<div class="pagination">
-			<!-- IF U_VIEW_UNREAD_POST and not S_IS_BOT --><a href="{U_VIEW_UNREAD_POST}">{L_VIEW_UNREAD_POST}</a> &bull; <!-- ENDIF -->{TOTAL_POSTS} &bull;
+			<!-- IF U_VIEW_UNREAD_POST and not S_IS_BOT --><a href="{U_VIEW_UNREAD_POST}">{L_VIEW_UNREAD_POST}</a> &bull; <!-- ENDIF -->{TOTAL_POSTS} 
 			<!-- IF .pagination -->
 				<!-- INCLUDE pagination.html -->
 			<!-- ELSE -->
-				{PAGE_NUMBER}
+				&bull; {PAGE_NUMBER}
 			<!-- ENDIF -->
 		</div>
 	<!-- ENDIF -->
@@ -352,11 +352,11 @@
 
 	<!-- IF .pagination or TOTAL_POSTS -->
 		<div class="pagination">
-			{TOTAL_POSTS} &bull;
+			{TOTAL_POSTS} 
 			<!-- IF .pagination -->
 				<!-- INCLUDE pagination.html -->
 			<!-- ELSE -->
-				{PAGE_NUMBER}
+				&bull; {PAGE_NUMBER}
 			<!-- ENDIF -->
 		</div>
 	<!-- ENDIF -->
diff --git a/phpBB/styles/prosilver/theme/bidi.css b/phpBB/styles/prosilver/theme/bidi.css
index 78b95d902e..907a1dff7e 100644
--- a/phpBB/styles/prosilver/theme/bidi.css
+++ b/phpBB/styles/prosilver/theme/bidi.css
@@ -226,6 +226,11 @@
 	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
 ---------------------------------------- */
 .rtl #forum-permissions {
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css
index 72c8b5f226..a21cd1e3ec 100644
--- a/phpBB/styles/prosilver/theme/colours.css
+++ b/phpBB/styles/prosilver/theme/colours.css
@@ -188,6 +188,10 @@ dl.details dd {
 	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 */
 .row .pagination {
 	background-image: url("./images/icon_pages.gif");
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css
index b9728729f9..a95ffdcfc5 100644
--- a/phpBB/styles/prosilver/theme/common.css
+++ b/phpBB/styles/prosilver/theme/common.css
@@ -833,21 +833,61 @@ li.pagination ul {
 }
 
 .pagination ul li, dl .pagination ul li, dl.icon .pagination ul li {
-	display: inline;
+	display: inline-block;
 	padding: 0;
 	font-size: 100%;
 	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 {
-	font-weight: normal;
-	text-decoration: none;
-	padding: 0 2px;
 	border: 1px solid transparent;
+	border-radius: 2px;
+	display: block;
 	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 */
 .row .pagination {
 	display: block;
@@ -859,6 +899,11 @@ li.pagination ul {
 	background: none 0 50% no-repeat;
 }
 
+li .pagination li a, li .pagnation li span {
+	border-radius: 1px;
+	padding: 1px;
+}
+
 /* jQuery popups
 ---------------------------------------- */
 .phpbb_alert {
@@ -1155,3 +1200,25 @@ form > p.post-notice strong {
 .compact .icon-notification > a > strong, .compact .icon-pm > a > strong {
 	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;
+}
diff --git a/phpBB/styles/prosilver/theme/images/icons_pagination.png b/phpBB/styles/prosilver/theme/images/icons_pagination.png
new file mode 100644
index 0000000000..c75f8ee1d4
--- /dev/null
+++ b/phpBB/styles/prosilver/theme/images/icons_pagination.png
diff --git a/phpBB/styles/prosilver/theme/responsive.css b/phpBB/styles/prosilver/theme/responsive.css
index b76f6b60cd..e3e4a46fa2 100644
--- a/phpBB/styles/prosilver/theme/responsive.css
+++ b/phpBB/styles/prosilver/theme/responsive.css
@@ -201,10 +201,12 @@ ul.topiclist li.row dt a.subforum {
 	margin: 5px 0;
 }
 
-.pagination li a, .pagination li span {
-	min-width: 10px;
-	display: inline-block;
-	text-align: center;
+.pagination ul {
+	margin-top: 5px;
+}
+
+.row .pagination ul {
+	margin-top: 0;
 }
 
 /* Responsive tables
@@ -518,6 +520,10 @@ fieldset.display-actions {
 		padding-bottom: 1px;
 	}
 
+	.topic-actions > .pagination li.jump-to {
+		margin: 0 2px;
+	}
+
 	.topic-actions > div.search-box, p.jumpbox-return {
 		display: none;
 	}
author	PayBas <contact@paybas.com>	2014-05-29 23:28:22 +0200
committer	PayBas <contact@paybas.com>	2014-06-05 09:59:31 +0200
commit	c3b24e200566b11e80f96f8186dbe5eab6241d72 (patch)
tree	243ae8a25f93e6eee62ca2a18273e5a933c49580
parent	49c875413ca2fd1cc438ce42c64e0a00a5044e56 (diff)
download	forums-c3b24e200566b11e80f96f8186dbe5eab6241d72.tar forums-c3b24e200566b11e80f96f8186dbe5eab6241d72.tar.gz forums-c3b24e200566b11e80f96f8186dbe5eab6241d72.tar.bz2 forums-c3b24e200566b11e80f96f8186dbe5eab6241d72.tar.xz forums-c3b24e200566b11e80f96f8186dbe5eab6241d72.zip