Add optimizations for mobile devices (WIP)

diff --git a/com.woltlab.wcf/template/mainMenu.tpl b/com.woltlab.wcf/template/mainMenu.tpl
index a4f83e41c0b2909185a58b2e1da7b65aa51437a5..3251019f152c563a012af652ea132aea3297cfc8 100644 (file)
--- a/com.woltlab.wcf/template/mainMenu.tpl
+++ b/com.woltlab.wcf/template/mainMenu.tpl
@@ -1,5 +1,12 @@
 {if $__wcf->getPageMenu()->getMenuItems('header')|count > 0}
        <nav id="mainMenu" class="mainMenu">
-               <ul>{foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=menuItem}<li{if $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem} class="active"{/if}><a href="{$menuItem->getProcessor()->getLink()}">{lang}{$menuItem->menuItem}{/lang}{if $menuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$menuItem->getProcessor()->getNotifications()}</span>{/if}</a></li>{/foreach}</ul>
+               <span class="invisible">{lang}wcf.page.mainMenu{/lang}</span>
+               <ul>{foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=menuItem}<li{if $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem} class="active"{/if}>{*
+                       *}<a href="{$menuItem->getProcessor()->getLink()}">{lang}{$menuItem->menuItem}{/lang}{if $menuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$menuItem->getProcessor()->getNotifications()}</span>{/if}</a>{*
+               *}{if $__wcf->getPageMenu()->getMenuItems($menuItem->menuItem)|count > 0 && $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem}<ul class="invisible">{*
+                               *}{foreach from=$__wcf->getPageMenu()->getMenuItems($menuItem->menuItem) item=subMenuItem}{*
+                                       *}<li><a href="{$subMenuItem->getProcessor()->getLink()}"><span>{lang}{$subMenuItem->menuItem}{/lang}</span></a>{if $subMenuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$subMenuItem->getProcessor()->getNotifications()}</span>{/if}</li>{*
+                               *}{/foreach}{*
+               *}</ul>{/if}</li>{/foreach}</ul>
        </nav>
 {/if}

diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index 7e1eb3526795759e60435b80288ab39a55b048ca..ca429f72ab9c9dc96fe91ca336cde25f4fc72206 100644 (file)
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -26,6 +26,12 @@
        z-index: 100;
 }
 
+@media only screen and (max-width: 640px) {
+       #pageHeader {
+               margin-top: 48px;
+       }
+}
+
 #top {
        display: block;
        height: 1px;
@@ -141,7 +147,7 @@
                height: auto;
                
                .icon {
-                       font-size: 28px;
+                       font-size: 21px;
                        height: auto;
                        width: auto;
                }
@@ -151,12 +157,12 @@
                                > li {
                                        > a,
                                        > div:not(.dropdownMenu) {
-                                               height: 28px;
-                                               padding: 12px 11px 8px 11px;
+                                               height: 21px;
+                                               padding: 11px 11px 9px 11px;
                                        }
                                        
                                        > .framed > img {
-                                               margin-top: 0;
+                                               margin-top: -4px;
                                        }
                                        
                                        /* hide user panel labels */
@@ -168,19 +174,19 @@
                        }
                
                        > .searchBar {
-                               height: 48px;
+                               height: 41px;
                                min-width: 40px;
                                right: 0 !important;
                                
                                &:before {
-                                       font-size: 28px;
+                                       font-size: 21px;
                                }
                                
                                > form {
                                        display: none;
                                        
                                        input[type="search"] {
-                                               height: 48px;
+                                               height: 41px;
                                                padding-left: 40px;
                                                width: 100%;
                                        }
@@ -277,48 +283,50 @@
 }
 
 /* main menu */
-.mainMenu {
-       > ul {
-               background-color: @wcfMainMenuBackgroundColor;
-               display: inline-block;
-               
-               > li {
+@media only screen and (min-width: 641px) {
+       .mainMenu {
+               > ul {
+                       background-color: @wcfMainMenuBackgroundColor;
                        display: inline-block;
-                       font-size: @wcfTitleFontSize;
-                       margin-top: -7px;
-                       vertical-align: bottom;
                        
-                       > a {
-                               color: @wcfMainMenuColor;
+                       > li {
                                display: inline-block;
-                               padding: 9px 21px;
-                                                               
-                               &:hover {
-                                       color: @wcfMainMenuActiveColor;
-                                       text-decoration: none;
-                               }
-                       }
-                       
-                       &.active {
-                               font-size: @wcfSubHeadlineFontSize;
-                               margin-top: -8px;
+                               font-size: @wcfTitleFontSize;
+                               margin-top: -7px;
+                               vertical-align: bottom;
                                
                                > a {
-                                       background-color: @wcfNavigationHeaderBackgroundColor;
-                                       color: @wcfMainMenuActiveColor;
-                                       font-weight: bold;
-                                       min-width: 80px;
-                                       padding: 14px 21px 8px;
-                                       text-align: center;
+                                       color: @wcfMainMenuColor;
+                                       display: inline-block;
+                                       padding: 9px 21px;
+                                                                       
+                                       &:hover {
+                                               color: @wcfMainMenuActiveColor;
+                                               text-decoration: none;
+                                       }
+                               }
+                               
+                               &.active {
+                                       font-size: @wcfSubHeadlineFontSize;
+                                       margin-top: -8px;
+                                       
+                                       > a {
+                                               background-color: @wcfNavigationHeaderBackgroundColor;
+                                               color: @wcfMainMenuActiveColor;
+                                               font-weight: bold;
+                                               min-width: 80px;
+                                               padding: 14px 21px 8px;
+                                               text-align: center;
+                                       }
+                               }
+                               
+                               &:not(.active) {
+                                       padding-top: 5px;
+                               }
+                               
+                               &:not(:last-child) > a {
+                                       border-right: 1px solid @wcfContainerBorderColor;
                                }
-                       }
-                       
-                       &:not(.active) {
-                               padding-top: 5px;
-                       }
-                       
-                       &:not(:last-child) > a {
-                               border-right: 1px solid @wcfContainerBorderColor;
                        }
                }
        }
@@ -326,67 +334,53 @@
 
 @media only screen and (max-width: 640px) {
        .mainMenu {
-               float: left;
-               min-height: 38px;
                position: relative;
-               z-index: 150;
+               
+               &:hover > ul {
+                       display: block;
+               }
+               
+               > .invisible {
+                       .button;
+                       margin-left: @wcfGapSmall;
+                       padding-left: 28px;
+                       
+                       &:before {
+                               content: "\f03a";
+                               font-family: FontAwesome;
+                               font-size: 14px;
+                               left: 9px;
+                               position: absolute;
+                               top: 6px;
+                       }
+               }
                
                > ul {
-                       border: solid 1px @wcfContainerBorderColor;
+                       .dropdown .dropdownMenu;
+                       font-size: 120%;
                        left: @wcfGapSmall;
-                       position: absolute;
-                       
-                       .borderRadius(5px);
                        
-                       > li {
-                               display: none;
-                               font-size: 120% !important;
-                               margin: 0 !important;
-                               padding: 0 !important;
-                               overflow: hidden;
-                               text-overflow: ellipsis;
-                               width: 120px;
-                               white-space: nowrap;
-                               
-                               &.active {
+                       > li.active {
+                               > ul.invisible {
                                        display: block;
-                                       
-                                       > a {
-                                               &:before {
-                                                       content: "\f03a";
-                                                       font-family: FontAwesome;
-                                                       font-size: 14px;
-                                                       left: 7px;
-                                                       position: absolute;
-                                                       top: 7px;
-                                               }
-                                       }
+                                       font-size: 85%;
+                                       padding-left: 14px;
                                }
                                
                                > a {
-                                       background-color: transparent !important;
-                                       border: 0 !important;
-                                       color: @wcfMainMenuColor !important;
-                                       font-weight: normal !important;
-                                       padding: 4px 4px 4px 28px !important;
                                        position: relative;
-                                       text-align: left !important;
-                               }
-                       }
-                       
-                       &:hover {
-                               > li {
-                                       display: block;
                                        
-                                       &.active {
-                                               > a {
-                                                       &:before {
-                                                               content: "\f00c";
-                                                       }
-                                               }       
+                                       &:after {
+                                               content: "\f00c";
+                                               font-family: FontAwesome;
+                                               font-size: 14px;
+                                               position: absolute;
+                                               right: 7px;
                                        }
                                }
                        }
+                       
+                       
                }
        }
 }
@@ -462,7 +456,8 @@
 @media only screen and (max-width: 640px) {
        .navigation {
                > ul.navigationIcons,
-               > ul.navigationItems {
+               > ul.navigationItems,
+               > ul.navigationMenuItems {
                        display: none;
                }
        }
@@ -483,70 +478,6 @@
        .navigationHeader {
                background-color: transparent;
                border: 0;
-               float: left;
-               margin-left: 127px;
-               min-height: 38px;
-               position: relative;
-               z-index: 149;
-               
-               > ul.navigationMenuItems {
-                       background-color: @wcfMainMenuBackgroundColor;
-                       border: solid 1px @wcfContainerBorderColor;
-                       left: @wcfGapSmall;
-                       position: absolute;
-                       
-                       .borderRadius(5px);
-                       
-                       > li {
-                               display: none;
-                               font-size: 120% !important;
-                               margin: 0 !important;
-                               overflow: hidden;
-                               text-overflow: ellipsis;
-                               width: 176px;
-                               white-space: nowrap;
-                               
-                               &:first-child {
-                                       display: block;
-                                       
-                                       > a {
-                                               &:before {
-                                                       content: "\f03a";
-                                                       font-family: FontAwesome;
-                                                       font-size: 14px;
-                                                       left: 7px;
-                                                       position: absolute;
-                                                       top: 7px;
-                                               }
-                                       }
-                               }
-                               
-                               > a {
-                                       background-color: transparent !important;
-                                       border: 0 !important;
-                                       color: @wcfMainMenuColor !important;
-                                       display: inline-block;
-                                       font-weight: normal !important;
-                                       padding: 4px 4px 4px 28px !important;
-                                       position: relative;
-                                       text-align: left !important;
-                               }
-                       }
-                       
-                       &:hover {
-                               > li {
-                                       display: block;
-                                       
-                                       &:first-child {
-                                               > a {
-                                                       &:before {
-                                                               content: "";
-                                                       }
-                                               }       
-                                       }
-                               }
-                       }
-               }
        }
 }
 
@@ -677,7 +608,7 @@
 @media only screen and (max-width: 640px) {
        /* hide sidebar */
        #main {
-               margin-top: 96px;
+               margin-top: 7px;
                
                .sidebar {
                        display: none;
@@ -688,8 +619,8 @@
                        border-right: 0 !important;
                        margin-left: 0 !important;
                        margin-right: 0 !important;
-                       padding-left: @wcfGapSmall !important;
-                       padding-right: @wcfGapSmall !important;
+                       padding-left: 0 !important;
+                       padding-right: 0 !important;
                        
                        > *:first-child {
                                margin-top: 0;
@@ -742,6 +673,8 @@
 @media only screen and (max-width: 640px) {
        .boxHeadline {
                margin-top: @wcfGapSmall;
+               margin-left: @wcfGapSmall;
+               margin-right: @wcfGapSmall;
        }
 }
 
@@ -771,6 +704,20 @@
        }
 }
 
+@media only screen and (max-width: 640px) {
+       .contentNavigation {
+               box-sizing:border-box;
+               -moz-box-sizing:border-box;
+               -webkit-box-sizing:border-box;
+               padding-left: @wcfGapSmall;
+               padding-right: @wcfGapSmall;
+               
+               > * {
+                       margin-top: @wcfGapSmall;
+               }
+       }
+}
+
 .container {
        background-color: @wcfContainerBackgroundColor;
        border: 1px solid @wcfContainerBorderColor;
@@ -781,6 +728,10 @@
 }
 
 @media only screen and (max-width: 640px) {
+       .container {
+               border-width: 1px 0;
+       }
+       
        .containerPadding {
                padding: @wcfGapSmall;
        }
@@ -1290,6 +1241,16 @@
        }
 }
 
+@media only screen and (max-width: 640px) {
+       .tabularBox {
+               border-width: 1px 0;
+       }
+       
+       .tabularBoxTitle {
+               border-top-width: 0;
+       }
+}
+
 .table {
        border-spacing: 0;
        width: 100%;
@@ -1663,6 +1624,10 @@ ul.inlineDataList {
                        }
                }
        }
+       
+       .contentNavigation .pageNavigation {
+               margin-top: @wcfGapSmall + 5;
+       }
 }
 
 .statusDisplay .pageNavigation {

diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index c4a5ab77f0827bc496dce7d7dedf61bc7cffefe6..831fd189d1600f77360f803fb1cc5ec2fd801cbe 100644 (file)
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -938,6 +938,7 @@
                <item name="wcf.page.pageNo"><![CDATA[Seite {#$pageNo}]]></item>
                <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>
        </category>
        
        <category name="wcf.style">

diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index 2af558f91eba0b53271b7771534ef465cec20a6d..bcd933ba0fcc4b0f8aa8b59b22f6697ca2e62584 100644 (file)
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -930,6 +930,7 @@
                <item name="wcf.page.pageNo"><![CDATA[Page {#$pageNo}]]></item>
                <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>
        </category>
        
        <category name="wcf.style">