Add optimizations for mobile devices (WIP)

diff --git a/com.woltlab.wcf/template/headInclude.tpl b/com.woltlab.wcf/template/headInclude.tpl
index e3aebf0dfac7e1db7742d911c94b7505f9c9681c..3909eff0895fb08c54e7681729a61543e47ff264 100644 (file)
--- a/com.woltlab.wcf/template/headInclude.tpl
+++ b/com.woltlab.wcf/template/headInclude.tpl
@@ -1,11 +1,12 @@
 <base href="{$baseHref}" />
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
+<meta name="format-detection" content="telephone=no" />
 {implode from=$__wcf->getMetaTagHandler() item=__metaTag glue="\n"}{@$__metaTag}{/implode}
 
 <script type="text/javascript">
        //<![CDATA[
-       var SID_ARG_2ND = '{@SID_ARG_2ND_NOT_ENCODED}';
+       var SID_ARG_2ND = '{@SID_ARG_2ND_NOT_ENCODED}';
        var RELATIVE_WCF_DIR = '{@$__wcf->getPath()}';
        var SECURITY_TOKEN = '{@SECURITY_TOKEN}';
        var LANGUAGE_ID = {@$__wcf->getLanguage()->languageID};

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index e775a6833b4df2526ca5f0920fd0a58c63ab62bf..dc723c962c467352f5f08de7e716423f461f8b9e 100755 (executable)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -4090,6 +4090,8 @@ WCF.Effect.BalloonTooltip = Class.extend({
         * Initializes tooltips.
         */
        init: function() {
+               if (jQuery.browser.mobile) return;
+
                if (!this._didInit) {
                        // create empty div
                        this._tooltip = $('<div id="balloonTooltip" class="balloonTooltip"><span id="balloonTooltipText"></span><span class="pointer"><span></span></span></div>').appendTo($('body')).hide();

diff --git a/wcfsetup/install/files/style/button.less b/wcfsetup/install/files/style/button.less
index ff06c39893cbe16116583f0e87298af257110c2d..a5f05998fb6039ad33f652b67f45634cd65154d3 100644 (file)
--- a/wcfsetup/install/files/style/button.less
+++ b/wcfsetup/install/files/style/button.less
@@ -154,6 +154,55 @@ button.active:hover {
        }
 }
 
+@media only screen and (max-device-width: 480px) {
+       .buttonGroup {
+               min-height: 21px;
+               min-width: 21px;
+               position: relative;
+               z-index: 148;
+               
+               &:before {
+                       content: "\f03a";
+                       font-family: FontAwesome;
+                       font-size: 21px;
+                       right: 0;
+                       position: absolute;
+                       top: 0;
+               }
+               
+               > li {
+                       display: none;
+                       
+                       &:not(:first-child) {
+                               > a {
+                                       border-top: 0;
+                               }
+                       }
+                       
+                       > .button {
+                               border-radius: 0 !important;
+                       }
+               }
+               
+               &:hover {
+                       > li {
+                               display: block;
+                               
+                               > a {
+                                       overflow: hidden;
+                                       text-overflow: ellipsis;
+                                       width: 124px;
+                                       white-space: nowrap;
+                                       
+                                       > span.invisible {
+                                               display: inline;
+                                       }
+                               }
+                       }
+               }
+       }
+}
+
 /* sidebar buttons */
 .sidebar {
        button,

diff --git a/wcfsetup/install/files/style/dialog.less b/wcfsetup/install/files/style/dialog.less
index ddd1a0c789a94b8290534e716fdc45bffe094799..78e0ea4b748d64181e2bb04691159171c2845c9f 100644 (file)
--- a/wcfsetup/install/files/style/dialog.less
+++ b/wcfsetup/install/files/style/dialog.less
@@ -11,6 +11,19 @@
        .boxShadow(0, 1px, rgba(0, 0, 0, .3), 23px);
 }
 
+@media only screen and (max-device-width: 480px) {
+       .dialogContainer {
+               border: 0;
+               left: 0 !important;
+               max-width: none;
+               min-width: 0;
+               top: 0 !important;
+               width: 100%;
+               
+               .borderRadius(0);
+       }
+}
+
 .dialogTitlebar {
        background-color: @wcfTabularBoxBackgroundColor;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
@@ -56,6 +69,12 @@
        }
 }
 
+@media only screen and (max-device-width: 480px) {
+       .dialogTitlebar {
+               .borderRadius(0);
+       }
+}
+
 .dialogContent {
        background-color: @wcfContainerBackgroundColor;
        color: @wcfColor;
@@ -96,6 +115,20 @@
        }
 }
 
+@media only screen and (max-device-width: 480px) {
+       .dialogContent {
+               max-height: none !important;
+               
+               &:not(.dialogForm) {
+                       .borderRadius(0);
+               }
+               
+               .formSubmit {
+                       .borderRadius(0);
+               }
+       }
+}
+
 .dialogOverlay {
        background-color: rgba(0, 0, 0, .5);
        bottom: 0;

diff --git a/wcfsetup/install/files/style/form.less b/wcfsetup/install/files/style/form.less
index b1e44da600b7d05965a0b46daa623c5391321e21..f97eed23a6cb242e0018dddec8581989bce14443 100644 (file)
--- a/wcfsetup/install/files/style/form.less
+++ b/wcfsetup/install/files/style/form.less
@@ -126,6 +126,25 @@ dl:not(.plain) {
        }
 }
 
+@media only screen and (max-device-width: 480px) {
+       dl:not(.plain) {
+               > dt {
+                       float: none;
+                       margin-bottom: @wcfGapTiny;
+                       text-align: left;
+                       width: auto !important;
+               }
+               
+               > dd {
+                       margin-left: 0 !important;
+               }
+       }
+       
+       fieldset > dl:not(:first-of-type) {
+               margin-top: 14px;
+       }
+}
+
 /* sidebar */
 .sidebar {
        dl:not(.plain) {

diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index 1868562cc369c2408f32b639cce88800b8d9c603..4d5948499c8a22a5868d39f3306be60a7505a997 100644 (file)
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -49,10 +49,10 @@
        }
        
        > div {
+               position: relative;
+               
                > ul.userPanelItems {
-                       float: left;
-                       
-                       .clearfix();
+                       /*.clearfix();*/
                        
                        > li {
                                float: left;
@@ -94,10 +94,10 @@
                }
        
                > .searchBar {
-                       float: right;
-                       padding: 6px 0 7px;
-                       position: relative;
                        background-color: @wcfUserPanelHoverBackgroundColor;
+                       position: absolute;
+                       right: 0;
+                       top: 0;
                        
                        &:before {
                                content: "\f002";
@@ -106,7 +106,7 @@
                                font-size: 14px;
                                left: 7px;
                                position: absolute;
-                               top: 10px;
+                               top: 12px;
                        }
                        
                        > form {
@@ -116,6 +116,7 @@
                                        background-color: transparent;
                                        border-width: 0;
                                        color: @wcfUserPanelColor;
+                                       height: 40px;
                                        padding: 6px 12px 5px 26px;
                                        width: 240px;
                                        -webkit-appearance: textfield;
@@ -128,26 +129,73 @@
                                }
                        }
                }
+               
+               &.layoutFluid > .searchBar {
+                       right: 30px;
+               }
        }
 }
 
 @media only screen and (max-device-width: 480px) {
-       /* hide user panel labels */
-       .userPanel > div {
-               > ul.userPanelItems > li {
-                       > a > span:not(.icon) {
-                               display: none;
-                       }
-                       
-                       &#pageLanguageContainer > div > div > hgroup {
-                               display: none;
-                       }
+       .userPanel {
+               height: auto;
+               
+               .icon {
+                       font-size: 28px;
+                       height: auto;
+                       width: auto;
                }
                
-               > .searchBar {
-                       > form {
-                               input[type="search"] {
-                                       width: auto;
+               > div {
+                       > ul.userPanelItems {
+                               > li {
+                                       > a,
+                                       > div:not(.dropdownMenu) {
+                                               height: 28px;
+                                               padding: 12px 11px 8px 11px;
+                                       }
+                                       
+                                       > .framed > img {
+                                               margin-top: 0;
+                                       }
+                                       
+                                       /* hide user panel labels */
+                                       > a > span:not(.icon),
+                                       &#pageLanguageContainer > div > div > hgroup {
+                                               display: none;
+                                       }
+                               }
+                       }
+               
+                       > .searchBar {
+                               height: 48px;
+                               min-width: 40px;
+                               right: 0 !important;
+                               
+                               &:before {
+                                       font-size: 28px;
+                               }
+                               
+                               > form {
+                                       display: none;
+                                       
+                                       input[type="search"] {
+                                               height: 48px;
+                                               padding-left: 40px;
+                                               width: 100%;
+                                       }
+                               }
+                               
+                               &:hover {
+                                       width: 100%;
+                                       
+                                       > form {
+                                               display: block;
+                                       }
+                               }
+                               
+                               &:before {
+                                       top: 8px;
                                }
                        }
                }
@@ -278,6 +326,69 @@
        }
 }
 
+@media only screen and (max-device-width: 480px) {
+       .mainMenu {
+               min-height: 38px;
+               position: relative;
+               z-index: 150;
+               
+               > ul {
+                       border: solid 1px @wcfContainerBorderColor;
+                       left: @wcfGapSmall;
+                       position: absolute;
+                       
+                       .borderRadius(5px);
+                       
+                       > li {
+                               display: none;
+                               font-size: 120% !important;
+                               margin: 0 !important;
+                               padding: 0 !important;
+                               width: 100%;
+                               
+                               &.active {
+                                       display: block;
+                                       
+                                       > a {
+                                               &:before {
+                                                       content: "\f03a";
+                                                       font-family: FontAwesome;
+                                                       font-size: 14px;
+                                                       left: 10px;
+                                                       position: absolute;
+                                                       top: 7px;
+                                               }
+                                       }
+                               }
+                               
+                               > a {
+                                       background-color: transparent !important;
+                                       border: 0 !important;
+                                       color: @wcfMainMenuColor !important;
+                                       font-weight: normal !important;
+                                       padding: 5px 5px 5px 32px !important;
+                                       position: relative;
+                                       text-align: left !important;
+                               }
+                       }
+                       
+                       &:hover {
+                               > li {
+                                       display: block;
+                                       
+                                       &.active {
+                                               > a {
+                                                       &:before {
+                                                               content: "\f00c";
+                                                       }
+                                               }       
+                                       }
+                               }
+                       }
+               }
+       }
+}
+
 /* navigation */
 .navigation {
        padding: 0 7px;
@@ -366,6 +477,72 @@
        border-top: 1px solid @wcfContainerBorderColor;
 }
 
+@media only screen and (max-device-width: 480px) {
+       .navigationHeader {
+               background-color: transparent;
+               border: 0;
+               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;
+                               width: 100%;
+                               
+                               &:first-child {
+                                       display: block;
+                                       
+                                       > a {
+                                               &:before {
+                                                       content: "\f03a";
+                                                       font-family: FontAwesome;
+                                                       font-size: 14px;
+                                                       left: 10px;
+                                                       position: absolute;
+                                                       top: 7px;
+                                               }
+                                       }
+                               }
+                               
+                               > a {
+                                       background-color: transparent !important;
+                                       border: 0 !important;
+                                       color: @wcfMainMenuColor !important;
+                                       display: inline-block;
+                                       font-weight: normal !important;
+                                       padding: 5px 5px 5px 32px !important;
+                                       position: relative;
+                                       text-align: left !important;
+                               }
+                       }
+                       
+                       &:hover {
+                               > li {
+                                       display: block;
+                                       
+                                       &:first-child {
+                                               > a {
+                                                       &:before {
+                                                               content: "";
+                                                       }
+                                               }       
+                                       }
+                               }
+                       }
+               }
+       }
+}
+
 /* ### footer ### */
 .footer {
        padding-bottom: @wcfGapMedium;
@@ -504,6 +681,10 @@
                        margin-right: 0 !important;
                        padding-left: @wcfGapSmall !important;
                        padding-right: @wcfGapSmall !important;
+                       
+                       > *:first-child {
+                               margin-top: 0;
+                       }
                }
        }
 }
@@ -549,6 +730,12 @@
        }
 }
 
+@media only screen and (max-device-width: 480px) {
+       .boxHeadline {
+               margin-top: @wcfGapSmall;
+       }
+}
+
 .contentNavigation {
        display: table;
        width: 100%;
@@ -584,6 +771,12 @@
        padding: @wcfGapMedium @wcfGapLarge @wcfGapMedium;
 }
 
+@media only screen and (max-device-width: 480px) {
+       .containerPadding {
+               padding: @wcfGapSmall;
+       }
+}
+
 .containerHeadline {
        margin-bottom: @wcfGapSmall;
        
@@ -891,6 +1084,12 @@
        }
 }
 
+@media only screen and (max-device-width: 480px) {
+       .content > .breadcrumbs {
+               display: none;
+       }
+}
+
 .smallBreadcrumbs {
        > li {
                display: inline;
@@ -1438,6 +1637,16 @@ ul.inlineDataList {
        }
 }
 
+@media only screen and (max-device-width: 480px) {
+       .pageNavigation {
+               > ul > li {
+                       &:not(.skip):not(.active) {
+                               display: none;
+                       }
+               }
+       }
+}
+
 .statusDisplay .pageNavigation {
        font-size: @wcfSmallFontSize;
        float: left;