Add optimizations for mobile devices (WIP)

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 2c0fd8554954ecc8395c5b3635a376847c829bc4..1f51feb356e2fda56b8759f0bb89fd08f87de029 100644 (file)
--- a/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
+++ b/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
@@ -48,15 +48,16 @@ class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
         * @param       string          $link
         * @param       integer         $pageNo
         * @param       integer         $activePage
+        * @param       integer         $pages
         * @return      string
         */
-       protected function makeLink($link, $pageNo, $activePage, $break = false) {
+       protected function makeLink($link, $pageNo, $activePage, $pages) {
                // first page
                if ($activePage != $pageNo) {
                        return '<li class="button"><a href="'.$this->insertPageNumber($link, $pageNo).'" title="'.WCF::getLanguage()->getDynamicVariable('wcf.page.pageNo', array('pageNo' => $pageNo)).'">'.StringUtil::formatInteger($pageNo).'</a></li>'."\n";
                }
                else {
-                       return '<li class="button active"><span>'.StringUtil::formatInteger($pageNo).'</span></li>'."\n";
+                       return '<li class="button active"><span>'.StringUtil::formatInteger($pageNo).'</span><span class="invisible">'.WCF::getLanguage()->getDynamicVariable('wcf.page.pagePosition', array('pageNo' => $pageNo, 'pages' => $pages)).'</span></li>'."\n";
                }
        }
        
@@ -130,7 +131,7 @@ class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
                        $html .= $this->makePreviousLink($link, $tagArgs['page']);
                        
                        // first page
-                       $html .= $this->makeLink($link, 1, $tagArgs['page']);
+                       $html .= $this->makeLink($link, 1, $tagArgs['page'], $tagArgs['pages']);
                        
                        // calculate page links
                        $maxLinks = static::SHOW_LINKS - 4;
@@ -172,7 +173,7 @@ class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
                        // left ... links
                        if ($left > 1) {
                                if ($left - 1 < 2) {
-                                       $html .= $this->makeLink($link, 2, $tagArgs['page']);
+                                       $html .= $this->makeLink($link, 2, $tagArgs['page'], $tagArgs['pages']);
                                }
                                else {
                                        $html .= '<li class="button jumpTo"><a title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.jumpTo').'" class="jsTooltip">'.StringUtil::HELLIP.'</a></li>'."\n";
@@ -181,13 +182,13 @@ class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
                        
                        // visible links
                        for ($i = $left + 1; $i < $right; $i++) {
-                               $html .= $this->makeLink($link, $i, $tagArgs['page']);
+                               $html .= $this->makeLink($link, $i, $tagArgs['page'], $tagArgs['pages']);
                        }
                        
                        // right ... links
                        if ($right < $tagArgs['pages']) {
                                if ($tagArgs['pages'] - $right < 2) {
-                                       $html .= $this->makeLink($link, $tagArgs['pages'] - 1, $tagArgs['page']);
+                                       $html .= $this->makeLink($link, $tagArgs['pages'] - 1, $tagArgs['page'], $tagArgs['pages']);
                                }
                                else {
                                        $html .= '<li class="button jumpTo"><a title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.jumpTo').'" class="jsTooltip">'.StringUtil::HELLIP.'</a></li>'."\n";
@@ -195,7 +196,7 @@ class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
                        }
                        
                        // last page
-                       $html .= $this->makeLink($link, $tagArgs['pages'], $tagArgs['page']);
+                       $html .= $this->makeLink($link, $tagArgs['pages'], $tagArgs['page'], $tagArgs['pages']);
                        
                        // next page
                        $html .= $this->makeNextLink($link, $tagArgs['page'], $tagArgs['pages']);

diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index b0f812bd64e25e8f435ea9ee05017c0252ee62ad..3940d35541f1d25f43d82fda62e53a43052414a3 100644 (file)
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -166,10 +166,14 @@
                                        }
                                        
                                        /* hide user panel labels */
-                                       > a > span:not(.icon),
+                                       > a > span:not(.icon):not(.badge),
                                        &#pageLanguageContainer > div > div > hgroup {
                                                display: none;
                                        }
+                                       
+                                       > a > .badge {
+                                               top: -4px;
+                                       }
                                }
                        }
                
@@ -608,10 +612,55 @@
 @media only screen and (max-width: 640px) {
        /* hide sidebar */
        #main {
+               position: relative;
                margin-top: 7px;
                
-               .sidebar {
-                       display: none;
+               &.sidebarOrientationRight {
+                       .sidebar {
+                               display: none;
+                       }
+               }
+               
+               &.sidebarOrientationLeft {
+                       .sidebar {
+                               float: none;
+                               padding-top: 0;
+                               position: absolute;
+                               right: 0px;
+                               top: 14px;
+                               width: 100%;
+                               
+                               &.mobileSidebar {
+                                       &:before {
+                                               content: "\f03a";
+                                               font-family: FontAwesome;
+                                               font-size: 21px;
+                                               right: 7px;
+                                               position: absolute;
+                                               top: 0;
+                                       }
+                                       
+                                       &:hover {
+                                               > div {
+                                                       display: block;
+                                               }
+                                       }
+                                       
+                                       > div {
+                                               background-color: @wcfSidebarBackgroundColor;
+                                               margin-top: 28px;
+                                               padding-top: 14px;
+                                       }
+                               }
+                               
+                               > div {
+                                       display: none;
+                                       
+                                       > fieldset.jsOnly {
+                                               display: none;
+                                       }
+                               }
+                       }
                }
                
                .content {
@@ -824,6 +873,10 @@
                        .containerContentType {
                                display: none;
                        }
+                       
+                       > div > div > .buttonList {
+                               display: none;
+                       }
                }
                
                &.infoBoxList {
@@ -941,29 +994,33 @@
                        white-space: nowrap;
                }
        }
-       
-       &.doubleColumned,
-       &.tripleColumned {
-               .clearfix();
-               
-               > li {
-                       float: left;
+}
+
+@media only screen and (min-width: 641px) {
+       .containerBoxList {
+               &.doubleColumned,
+               &.tripleColumned {
+                       .clearfix();
                        
-                       > div {
-                               margin-right: @wcfGapLarge;
+                       > li {
+                               float: left;
+                               
+                               > div {
+                                       margin-right: @wcfGapLarge;
+                               }
                        }
                }
-       }
-       
-       &.doubleColumned {
-               > li {
-                       width: 50%;
+               
+               &.doubleColumned {
+                       > li {
+                               width: 50%;
+                       }
                }
-       }
-       
-       &.tripleColumned {
-               > li {
-                       width: 33%;
+               
+               &.tripleColumned {
+                       > li {
+                               width: 33%;
+                       }
                }
        }
 }
@@ -1189,6 +1246,32 @@
        margin-bottom: @wcfGapSmall;
 }
 
+@media only screen and (max-width: 640px) {
+       .tabMenu {
+               > ul {
+                       margin-left: @wcfGapTiny;
+                       margin-right: @wcfGapTiny;
+                       
+                       > li {
+                               &.ui-state-active {
+                                       > a {
+                                               font-size: 100%;
+                                               padding-left: 10px;
+                                               padding-right: 10px;
+                                       }
+                               }
+                               
+                               > a {
+                                       font-size: 100%;
+                                       padding-left: 5px;
+                                       padding-right: 5px;
+                               }
+                       }
+               }
+       
+       }
+}
+
 /* ToDo: 2x hidden? */
 .ui-tabs .ui-tabs-hide {
        display: none !important;
@@ -1605,7 +1688,7 @@ ul.inlineDataList {
                                .textShadow(@wcfButtonBackgroundColor);
                        }
                        
-                       > span {
+                       > span:not(.invisible) {
                                display: inline-block;
                        }
                }
@@ -1618,6 +1701,18 @@ ul.inlineDataList {
                        &:not(.skip):not(.active) {
                                display: none;
                        }
+                       
+                       &.active {
+                               > span {
+                                       &.invisible {
+                                               display: inline-block;
+                                       }
+                                       
+                                       &:not(.invisible) {
+                                               display: none;
+                                       }
+                               }
+                       }
                }
        }
 }

diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index 831fd189d1600f77360f803fb1cc5ec2fd801cbe..0bebafcb07cb17b5fbe1b5ee864b7918a5894e07 100644 (file)
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -939,6 +939,7 @@
                <item name="wcf.page.offline"><![CDATA[Die Seite befindet sich zur Zeit {if OFFLINE_MESSAGE != ''}aus folgenden Gründen im Wartungsmodus:{else}im Wartungsmodus.{/if}]]></item>
                <item name="wcf.page.sitemap"><![CDATA[Schnellnavigation]]></item>
                <item name="wcf.page.mainMenu"><![CDATA[Navigation]]></item>
+               <item name="wcf.page.pagePosition"><![CDATA[Seite {#$pageNo} von {#$pages}]]></item>
        </category>
        
        <category name="wcf.style">

diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index bcd933ba0fcc4b0f8aa8b59b22f6697ca2e62584..13f4db5c7daf13ecb0770ce2f6474a5295fc0909 100644 (file)
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -931,6 +931,7 @@
                <item name="wcf.page.offline"><![CDATA[Page is currently in maintenance mode{if OFFLINE_MESSAGE != ''}:{else}.{/if}]]></item>
                <item name="wcf.page.sitemap"><![CDATA[Sitemap]]></item>
                <item name="wcf.page.mainMenu"><![CDATA[Navigation]]></item>
+               <item name="wcf.page.pagePosition"><![CDATA[Page {#$pageNo} of {#$pages}]]></item>
        </category>
        
        <category name="wcf.style">