Improved mobile version of the pagination

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 19c753a485a11f7417c97c65f3042be89af4e517..a10f9b2ebd88989a894668dbaedfbea502173dce 100644 (file)
--- 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 9d7d43b999cd4b9c6b9c9040162af231640bb1dc..3ada7c039befb007c5409717d15fa7fd0876e676 100644 (file)
--- 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