From 8641a16265be14cb6de421f17e9a08a7cfba9750 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 31 Aug 2016 12:19:59 +0200
Subject: [PATCH] Improved mobile version of the pagination

---
 .../PagesFunctionTemplatePlugin.class.php     |  2 +-
 .../install/files/style/ui/pagination.scss    | 85 ++++++++++---------
 2 files changed, 47 insertions(+), 40 deletions(-)

diff --git a/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php b/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
index 19c753a485..a10f9b2ebd 100644
--- a/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
+++ b/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
@@ -25,7 +25,7 @@ use wcf\util\StringUtil;
  * @package	WoltLabSuite\Core\System\Template\Plugin
  */
 class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
-	const SHOW_LINKS = 11;
+	const SHOW_LINKS = 9;
 	
 	/**
 	 * CSS class name for <nav> element
diff --git a/wcfsetup/install/files/style/ui/pagination.scss b/wcfsetup/install/files/style/ui/pagination.scss
index 9d7d43b999..3ada7c039b 100644
--- a/wcfsetup/install/files/style/ui/pagination.scss
+++ b/wcfsetup/install/files/style/ui/pagination.scss
@@ -1,46 +1,53 @@
-.pagination > ul {
-	display: inline-flex;
+.pagination {
+	@include screen-xs {
+		text-align: center;
+	}
 	
-	> li {
-		display: flex;
-		flex: 0 0 auto;
-		
-		> .invisible {
-			display: none;
-		}
-		
-		> a,
-		> span {
-			color: $wcfContentText;
-			padding: 2px 8px 0;
-		}
+	> ul {
+		display: inline-flex;
+		flex-wrap: wrap;
 		
-		&.disabled > span {
-			color: $wcfContentDimmedText;
-		}
-		
-		&.active > a,
-		&.active > span,
-		> a:hover {
-			background-color: $wcfButtonBackgroundActive;
-			color: $wcfButtonTextActive;
-		}
-		
-		> .icon {
-			height: auto;
-			line-height: inherit;
-			width: auto;
-		}
-		
-		&:not(:last-child) {
-			margin-right: 1px;
-		}
-		
-		&:not(.skip) {
+		> li {
+			display: flex;
+			flex: 0 0 auto;
+			
+			> .invisible {
+				display: none;
+			}
+			
 			> a,
 			> span {
-				padding: 4px 8px;
+				color: $wcfContentText;
+				padding: 2px 8px 0;
+			}
+			
+			&.disabled > span {
+				color: $wcfContentDimmedText;
+			}
+			
+			&.active > a,
+			&.active > span,
+			> a:hover {
+				background-color: $wcfButtonBackgroundActive;
+				color: $wcfButtonTextActive;
+			}
+			
+			> .icon {
+				height: auto;
+				line-height: inherit;
+				width: auto;
+			}
+			
+			&:not(:last-child) {
+				margin-right: 1px;
+			}
+			
+			&:not(.skip) {
+				> a,
+				> span {
+					padding: 4px 8px;
+				}
 			}
 		}
 	}
-}
+}
\ No newline at end of file
-- 
2.20.1