Added sidebar toggle for screen-xs

See #2312

diff --git a/com.woltlab.wcf/templates/footer.tpl b/com.woltlab.wcf/templates/footer.tpl
index 06b6210283e64805f4668cd29e0173e66077db0d..24d3b6cd171c1ea1def9f4297ecd4734b72536a3 100644 (file)
--- a/com.woltlab.wcf/templates/footer.tpl
+++ b/com.woltlab.wcf/templates/footer.tpl
@@ -43,7 +43,7 @@
                        {/capture}
                                
                        {if $__sidebarRightContent|trim}
-                               <aside class="sidebar boxesSidebarRight">
+                               <aside class="sidebar boxesSidebarRight" data-show-sidebar="{lang}wcf.global.button.showSidebar{/lang}" data-hide-sidebar="{lang}wcf.global.button.hideSidebar{/lang}">
                                        <div class="boxContainer">
                                                {if MODULE_WCF_AD && $__disableAds|empty && $__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.top')}
                                                        <div class="box boxBorderless">

diff --git a/com.woltlab.wcf/templates/header.tpl b/com.woltlab.wcf/templates/header.tpl
index 013411941c2e93014095246071121f66bccdb7ca..9f4bebca647087580ca23469d11585129aa8e859 100644 (file)
--- a/com.woltlab.wcf/templates/header.tpl
+++ b/com.woltlab.wcf/templates/header.tpl
@@ -74,7 +74,7 @@
        <section id="main" class="main" role="main"{if !$__mainItemScope|empty} {@$__mainItemScope}{/if}>
                <div class="layoutBoundary">
                        {hascontent}
-                               <aside class="sidebar boxesSidebarLeft">
+                               <aside class="sidebar boxesSidebarLeft{if !$__sidebarLeftHasMenu|empty || $__wcf->getBoxHandler()->sidebarLeftHasMenu()} boxesSidebarLeftHasMenu{/if}" data-show-sidebar="{lang}wcf.global.button.showSidebar{/lang}" data-hide-sidebar="{lang}wcf.global.button.hideSidebar{/lang}" data-show-navigation="{lang}wcf.global.button.showNavigation{/lang}" data-hide-navigation="{lang}wcf.global.button.hideNavigation{/lang}">
                                        <div class="boxContainer">
                                                {content}
                                                        {event name='boxesSidebarLeftTop'}

diff --git a/com.woltlab.wcf/templates/settings.tpl b/com.woltlab.wcf/templates/settings.tpl
index feae6fecc33c77f994398747a8c658eba23364c6..c807aaa2928f829c796760f665b5881a954438ba 100644 (file)
--- a/com.woltlab.wcf/templates/settings.tpl
+++ b/com.woltlab.wcf/templates/settings.tpl
@@ -4,7 +4,7 @@
 
 {include file='userMenuSidebar'}
 
-{include file='header' __disableAds=true}
+{include file='header' __disableAds=true __sidebarLeftHasMenu=true}
 
 {include file='formError'}
 

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
index ce74e5f6b459d59f5c8bfd41cca200cce1a86c6b..1765974168c4951ac6b50c6688abbbc4be75b0d3 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
@@ -21,6 +21,8 @@ define(
        var _pageMenuMain = null;
        var _pageMenuUser = null;
        var _messageGroups = null;
+       var _sidebars = [];
+       var _sidebarXsEnabled = false;
        
        /**
         * @exports     WoltLabSuite/Core/Ui/Mobile
@@ -38,6 +40,10 @@ define(
                        
                        _main = elById('main');
                        
+                       elBySelAll('.sidebar', undefined, function (sidebar) {
+                               _sidebars.push(sidebar);
+                       });
+                       
                        if (Environment.touch()) {
                                document.documentElement.classList.add('touch');
                        }
@@ -60,6 +66,12 @@ define(
                                unmatch: this.disableShadow.bind(this),
                                setup: this.enableShadow.bind(this)
                        });
+                       
+                       UiScreen.on('screen-xs', {
+                               match: this._enableSidebarXS.bind(this),
+                               unmatch: this._disableSidebarXS.bind(this),
+                               setup: this._setupSidebarXS.bind(this)
+                       });
                },
                
                /**
@@ -288,6 +300,32 @@ define(
                                        parent.classList.remove('mobileLinkShadowContainer');
                                }
                        }
+               },
+               
+               _enableSidebarXS: function() {
+                       _sidebarXsEnabled = true;
+               },
+               
+               _disableSidebarXS: function() {
+                       _sidebarXsEnabled = false;
+                       
+                       _sidebars.forEach(function (sidebar) {
+                               sidebar.classList.remove('open');
+                       });
+               },
+               
+               _setupSidebarXS: function() {
+                       _sidebars.forEach(function (sidebar) {
+                               sidebar.addEventListener('mousedown', function(event) {
+                                       if (_sidebarXsEnabled && event.target === sidebar) {
+                                               event.preventDefault();
+                                               
+                                               sidebar.classList.toggle('open');
+                                       }
+                               });
+                       });
+                       
+                       _sidebarXsEnabled = true;
                }
        };
 });

diff --git a/wcfsetup/install/files/lib/system/box/BoxHandler.class.php b/wcfsetup/install/files/lib/system/box/BoxHandler.class.php
index 3a1981f52774c53a83bf89c49abb7916e8a09c74..27d6a8b53de3fe7ea8f2cb2e67e656298ba8548b 100644 (file)
--- a/wcfsetup/install/files/lib/system/box/BoxHandler.class.php
+++ b/wcfsetup/install/files/lib/system/box/BoxHandler.class.php
@@ -190,6 +190,22 @@ class BoxHandler extends SingletonFactory {
                }
        }
        
+       /**
+        * Returns true if the left sidebar contains at least one visible menu.
+        * 
+        * @return      boolean
+        * @since       3.1
+        */
+       public function sidebarLeftHasMenu() {
+               foreach ($this->getBoxes('sidebarLeft') as $box) {
+                       if ($box->getMenu() && $box->getMenu()->hasContent()) {
+                               return true;
+                       }
+               }
+               
+               return false;
+       }
+       
        /**
         * Disables the loading of the box layout for the active page.
         */

diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss
index fdcec4fb94b1da59b25f343bc5252a5de3beb5fa..0981e2b049cc974144db8025cd35329ab9553a9b 100644 (file)
--- a/wcfsetup/install/files/style/layout/box.scss
+++ b/wcfsetup/install/files/style/layout/box.scss
@@ -626,6 +626,47 @@
        padding-right: 10px;
 }
 
+@include screen-xs {
+       .boxesSidebarLeft,
+       .boxesSidebarRight {
+               pointer-events: none;
+               
+               > .boxContainer {
+                       pointer-events: all;
+               }
+               
+               &:not(.open) > .boxContainer {
+                       display: none;
+               }
+               
+               &::before {
+                       background-color: $wcfSidebarBackground;
+                       color: $wcfSidebarLink;
+                       /* DEBUG */
+                       content: attr(data-show-sidebar);
+                       display: block;
+                       padding: 10px 0;
+                       pointer-events: all;
+                       text-align: center;
+               }
+               
+               &.open::before {
+                       content: attr(data-hide-sidebar);
+                       margin-bottom: 20px;
+               }
+       }
+       
+       .boxesSidebarLeft.boxesSidebarLeftHasMenu {
+               &::before {
+                       content: attr(data-show-navigation);
+               }
+               
+               &.open::before {
+                       content: attr(data-hide-navigation);
+               }
+       }
+}
+
 /* styling for boxes in <contentTop>/<contentBottom> position */
 .boxesContentTop,
 .boxesContentBottom {

diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index bb10d654cd1281c480675c1aae6b74e1addec23e..cf8ba88db0eb160887ff7d10113a3f818831b1c3 100644 (file)
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -2791,6 +2791,10 @@ Fehler sind beispielsweise:
                <item name="wcf.global.select"><![CDATA[Auswählen]]></item>
                <item name="wcf.global.sorting"><![CDATA[Sortierung]]></item>
                <item name="wcf.global.fontAwesome.selectIcon"><![CDATA[Icon auswählen]]></item>
+               <item name="wcf.global.button.hideNavigation"><![CDATA[Navigation verbergen]]></item>
+               <item name="wcf.global.button.showNavigation"><![CDATA[Navigation anzeigen]]></item>
+               <item name="wcf.global.button.hideSidebar"><![CDATA[Sidebar verbergen]]></item>
+               <item name="wcf.global.button.showSidebar"><![CDATA[Sidebar anzeigen]]></item>
        </category>
        
        <category name="wcf.global.form">

diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index e36da42cc9d6299accebaa5cc125e19a61b3cf4b..b1547af42d8c853b721fd21e890b8d7eda25ec10 100644 (file)
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -2741,6 +2741,10 @@ Errors are:
                <item name="wcf.global.select"><![CDATA[Select]]></item>
                <item name="wcf.global.sorting"><![CDATA[Sorting]]></item>
                <item name="wcf.global.fontAwesome.selectIcon"><![CDATA[Select Icon]]></item>
+               <item name="wcf.global.button.hideNavigation"><![CDATA[Hide Navigation]]></item>
+               <item name="wcf.global.button.showNavigation"><![CDATA[Show Navigation]]></item>
+               <item name="wcf.global.button.hideSidebar"><![CDATA[Hide Sidebar]]></item>
+               <item name="wcf.global.button.showSidebar"><![CDATA[Show Sidebar]]></item>
        </category>
        
        <category name="wcf.global.form">