From 23192d23e28ddd23a9c92383a1bee52ea4ba031e Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Mon, 28 Oct 2013 14:42:50 +0100 Subject: [PATCH] Mobile optimization overhaul --- com.woltlab.wcf/templates/headInclude.tpl | 48 ++++---- wcfsetup/install/files/js/WCF.js | 86 ++++++++++++++ wcfsetup/install/files/style/button.less | 82 ++++++------- wcfsetup/install/files/style/layout.less | 135 ++++++++++++++++++++-- wcfsetup/install/lang/de.xml | 4 + wcfsetup/install/lang/en.xml | 4 + 6 files changed, 288 insertions(+), 71 deletions(-) diff --git a/com.woltlab.wcf/templates/headInclude.tpl b/com.woltlab.wcf/templates/headInclude.tpl index a7333e36a7..ecc369ff9c 100644 --- a/com.woltlab.wcf/templates/headInclude.tpl +++ b/com.woltlab.wcf/templates/headInclude.tpl @@ -122,6 +122,10 @@ 'wcf.global.page.next': '{capture assign=pageNext}{lang}wcf.global.page.next{/lang}{/capture}{@$pageNext|encodeJS}', 'wcf.global.page.previous': '{capture assign=pagePrevious}{lang}wcf.global.page.previous{/lang}{/capture}{@$pagePrevious|encodeJS}', 'wcf.global.pageDirection': '{lang}wcf.global.pageDirection{/lang}', + 'wcf.global.sidebar.hideLeftSidebar': '{lang}wcf.global.sidebar.hideLeftSidebar{/lang}', + 'wcf.global.sidebar.hideRightSidebar': '{lang}wcf.global.sidebar.hideRightSidebar{/lang}', + 'wcf.global.sidebar.showLeftSidebar': '{lang}wcf.global.sidebar.showLeftSidebar{/lang}', + 'wcf.global.sidebar.showRightSidebar': '{lang}wcf.global.sidebar.showRightSidebar{/lang}', 'wcf.global.success': '{lang}wcf.global.success{/lang}', 'wcf.global.success.add': '{lang}wcf.global.success.add{/lang}', 'wcf.global.success.edit': '{lang}wcf.global.success.edit{/lang}', @@ -138,14 +142,18 @@ {event name='javascriptLanguageImport'} }); - - if (jQuery.browser.touch) $('html').addClass('touch'); + + WCF.Dropdown.init(); + + if ($.browser.touch) { + WCF.System.Mobile.UX.init(); + } + new WCF.Date.Time(); new WCF.Effect.SmoothScroll(); new WCF.Effect.BalloonTooltip(); new WCF.Sitemap(); {if $__wcf->getStyleHandler()->countStyles() > 1}new WCF.Style.Chooser();{/if} - WCF.Dropdown.init(); WCF.System.PageNavigation.init('.pageNavigation'); WCF.Date.Picker.init(); new WCF.User.ProfilePreview(); @@ -172,22 +180,22 @@ }); //]]> - + {include file='imageViewer'} diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js index baaf1ca904..6132981575 100755 --- a/wcfsetup/install/files/js/WCF.js +++ b/wcfsetup/install/files/js/WCF.js @@ -6060,6 +6060,92 @@ WCF.System.FlexibleMenu = { } }; +/** + * Namespace for mobile device-related classes. + */ +WCF.System.Mobile = { }; + +/** + * Handles general navigation and UX on mobile devices. + */ +WCF.System.Mobile.UX = { + /** + * main container + * @var jQuery + */ + _main: null, + + /** + * Initializes the WCF.System.Mobile.UX class. + */ + init: function() { + this._main = $('#main'); + + $('html').addClass('touch'); + + this._initSidebarToggleButtons(); + this._initSearchBar(); + this._initButtonGroupNavigation(); + + WCF.DOMNodeInsertedHandler.addCallback('WCF.System.Mobile.UX', $.proxy(this._initButtonGroupNavigation, this)); + }, + + /** + * Initializes the sidebar toggle buttons. + */ + _initSidebarToggleButtons: function() { + var $sidebarLeft = this._main.hasClass('sidebarOrientationLeft'); + var $sidebarRight = this._main.hasClass('sidebarOrientationRight'); + if ($sidebarLeft || $sidebarRight) { + // use icons if language item is empty/non-existant + var $languageShowSidebar = 'wcf.global.sidebar.show' + ($sidebarLeft ? 'Left' : 'Right') + 'Sidebar'; + if ($languageShowSidebar === WCF.Language.get($languageShowSidebar) || WCF.Language.get($languageShowSidebar) === '') { + $languageShowSidebar = ''; + } + + var $languageHideSidebar = 'wcf.global.sidebar.hide' + ($sidebarLeft ? 'Left' : 'Right') + 'Sidebar'; + if ($languageHideSidebar === WCF.Language.get($languageHideSidebar) || WCF.Language.get($languageHideSidebar) === '') { + $languageHideSidebar = ''; + } + + // add toggle buttons + var self = this; + $('' + $languageShowSidebar + '').appendTo($('.content')).click(function() { self._main.addClass('mobileShowSidebar'); }); + $('' + $languageHideSidebar + '').appendTo($('.sidebar')).click(function() { self._main.removeClass('mobileShowSidebar'); }); + } + }, + + /** + * Initializes the search bar. + */ + _initSearchBar: function() { + var $searchBar = $('.searchBar:eq(0)'); + + $searchBar.click(function() { $searchBar.addClass('searchBarOpen'); }); + this._main.click(function() { $searchBar.removeClass('searchBarOpen'); }); + }, + + /** + * Initializes the button group lists, converting them into native dropdowns. + */ + _initButtonGroupNavigation: function() { + $('.buttonGroupNavigation:not(.jsMobileButtonGroupNavigation)').each(function(index, navigation) { + var $navigation = $(navigation).addClass('jsMobileButtonGroupNavigation dropdown'); + var $button = $('').prependTo($navigation); + + // convert button group into a dropdown menu + var $dropdownMenu = $navigation.children('ul:eq(0)').addClass('dropdownMenu');//.removeClass('smallButtons buttonGroup'); + //var $links = $dropdownMenu.find('> li > a').removeClass('button jsTooltip').removeAttr('title'); + //$links.children('span.invisible').removeClass('invisible'); + //$links.children('span.icon').remove(); + + WCF.Dropdown.initDropdown($button, false); + + $dropdownMenu.removeClass('dropdownMenu'); + }); + } +}; + /** * System notification overlays. * diff --git a/wcfsetup/install/files/style/button.less b/wcfsetup/install/files/style/button.less index 1094dacb82..5ca9a6e6b8 100644 --- a/wcfsetup/install/files/style/button.less +++ b/wcfsetup/install/files/style/button.less @@ -192,65 +192,59 @@ button.small, @media only screen and (max-width: 800px) { nav.buttonGroupNavigation { - > a:first-child { + > a:first-child > { display: inline-block; outline: 0; - > span.icon { + span.icon { font-size: 21px; height: 24px; width: 24px; } - - + a { - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - z-index:100; - } - - &:focus { - + a { - display: block; - } - - ~ ul { - display: block; - } - } } > ul { display: none; - opacity: 1; - position: absolute; - right: 0; - z-index: 350; + } + } + + ul.buttonGroup { + display: none; + } + + #dropdownMenuContainer > ul.buttonGroup { + font-size: 0; + position: absolute; + z-index: 450; + + &.dropdownOpen { + display: block; + } + + > li { + display: block; + float: none; + font-size: 0 !important; + opacity: 1 !important; + overflow: hidden; - &:hover { - display: block; + &:not(:last-child) > a { + border-bottom-width: 0; } - > li { - display: block; - float: none; - opacity: 1 !important; + > a { + .button; + + border-radius: 0 !important; + font-size: @wcfSmallFontSize; + overflow: hidden; + text-overflow: ellipsis; + width: 124px; + white-space: nowrap; + word-wrap: normal; - > a { - .button; - - border-radius: 0 !important; - overflow: hidden; - text-overflow: ellipsis; - width: 124px; - white-space: nowrap; - word-wrap: normal; - - > span.invisible { - display: inline; - } + > span.invisible { + display: inline; } } } diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less index d66c0caaab..4bd593ab14 100644 --- a/wcfsetup/install/files/style/layout.less +++ b/wcfsetup/install/files/style/layout.less @@ -224,7 +224,7 @@ } } - &:hover { + &.searchBarOpen { width: 100%; > form { @@ -573,6 +573,10 @@ > .content { display: table-cell; vertical-align: top; + + > .mobileSidebarToggleButton { + display: none; + } } > .sidebar { @@ -654,7 +658,124 @@ @media only screen and (max-width: 800px) { /* hide sidebar */ #main { - border-right-width: 0; + > div > div { + > .sidebar, + > .content { + position: relative; + width: 100%; + } + } + + &.sidebarOrientationLeft, + &.sidebarOrientationRight { + overflow: hidden; + + > div { + /* revert overflow from parent */ + overflow: visible; + + width: 200%; + + .transition(margin-left, .2s, ease); + } + } + + &.sidebarOrientationLeft { + > div { + margin-left: -100%; + + > div { + > .sidebar { + margin-left: -100%; + + > div { + width: 100%; + + fieldset { + width: 100%; + } + } + + > .mobileSidebarToggleButton { + border-radius: 0 0 0 @wcfSmallButtonBorderRadius; + border-width: 0 0 1px 1px; + display: block; + right: -3px; + position: absolute; + top: 0; + } + } + + > .content { + padding-top: 35px; + + > .mobileSidebarToggleButton { + border-radius: 0 0 @wcfSmallButtonBorderRadius 0; + border-width: 0 1px 1px 0; + display: block; + left: -3px; + position: absolute; + top: 0; + } + } + } + } + } + + &.sidebarOrientationRight { + > div > div { + > .sidebar { + > div { + width: 100%; + + fieldset { + width: 100%; + } + } + + > .mobileSidebarToggleButton { + border-radius: 0 0 @wcfSmallButtonBorderRadius 0; + border-width: 0 1px 1px 0; + display: block; + left: -3px; + position: absolute; + top: 0; + } + } + + > .content { + padding-top: 35px; + + > .mobileSidebarToggleButton { + border-radius: 0 0 0 @wcfSmallButtonBorderRadius; + border-width: 0 0 1px 1px; + display: block; + right: -3px; + position: absolute; + top: 0; + } + } + } + } + + &.mobileShowSidebar { + .sidebar { + padding-top: 35px; + } + + &.sidebarOrientationLeft { + > div { + margin-left: 0; + } + } + + &.sidebarOrientationRight { + > div { + margin-left: -100%; + } + } + } + /*border-right-width: 0; position: relative; //margin-top: 7px; @@ -673,7 +794,7 @@ &.sidebarOrientationRight { .sidebar { - display: none; + //display: none; } } @@ -718,13 +839,13 @@ } } } - } + }*/ .content { border-left: 0 !important; border-right: 0 !important; - margin-left: 0 !important; - margin-right: 0 !important; + margin-left: 0; + margin-right: 0; padding-left: 0 !important; padding-right: 0 !important; @@ -1262,7 +1383,7 @@ padding: @wcfGapTiny @wcfGapMedium; &:before { - content: "\f060"; + content: "\f062"; font-family: FontAwesome; font-size: 14px; padding-right: @wcfGapSmall; diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml index 2f8a319356..5daf9b1a58 100644 --- a/wcfsetup/install/lang/de.xml +++ b/wcfsetup/install/lang/de.xml @@ -1712,6 +1712,10 @@ Fehler sind beispielsweise: + + + + diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml index 288630a9fb..5f0683228a 100644 --- a/wcfsetup/install/lang/en.xml +++ b/wcfsetup/install/lang/en.xml @@ -1703,6 +1703,10 @@ Allowed extensions: {', '|implode:$attachmentHandler->getFormattedAllowedExtensi + + + + -- 2.20.1