Small sidebar overhaul

diff --git a/com.woltlab.wcf/template/header.tpl b/com.woltlab.wcf/template/header.tpl
index c40b38eaff719806e2b8a956e93fa67fb4bef255..6ae57b130b20b6e85da6e90044f485e84809f5c3 100644 (file)
--- a/com.woltlab.wcf/template/header.tpl
+++ b/com.woltlab.wcf/template/header.tpl
@@ -40,7 +40,9 @@
        <div>
                {if $sidebar|isset}
                        <aside class="sidebar"{if $sidebarOrientation|isset && $sidebarOrientation == 'right'} data-is-open="{if $sidebarCollapsed}false{else}true{/if}" data-sidebar-name="{$sidebarName}"{/if}>
-                               {@$sidebar}
+                               <div>
+                                       {@$sidebar}
+                               </div>
                        </aside>
                        
                        {if $sidebarOrientation|isset && $sidebarOrientation == 'right'}

diff --git a/wcfsetup/install/files/acp/js/WCF.ACP.js b/wcfsetup/install/files/acp/js/WCF.ACP.js
index 5922a7167ed8e48120ed8f9a1ee534c84bd72f76..f3c33ba0c02262393597edacbf0d2779b3e014ec 100644 (file)
--- a/wcfsetup/install/files/acp/js/WCF.ACP.js
+++ b/wcfsetup/install/files/acp/js/WCF.ACP.js
@@ -90,7 +90,7 @@ WCF.ACP.Menu = Class.extend({
         */
        init: function(activeMenuItems) {
                this._headerNavigation = $('nav#mainMenu');
-               this._sidebarNavigation = $('aside.collapsibleMenu');
+               this._sidebarNavigation = $('aside.collapsibleMenu > div');
                
                this._prepareElements(activeMenuItems);
        },

diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index de8b58391b4264d5cdb89f636c60781c5b79a173..ae7a477c9307068e587f2b88a6b4c8b8cecb4952 100644 (file)
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -172,34 +172,36 @@
                <div>
                        {hascontent}
                                <aside class="sidebar collapsibleMenu">
-                                       {content}
-                                               {* work-around for unknown core-object during WCFSetup *}
-                                               {if PACKAGE_ID}
-                                                       {foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_parentMenuItem}
-                                                               <div id="{$_parentMenuItem->menuItem}-container" style="display: none;" class="menuGroup collapsibleMenus" data-parent-menu-item="{$_parentMenuItem->menuItem}">
-                                                                       {foreach from=$__wcf->getACPMenu()->getMenuItems($_parentMenuItem->menuItem) item=_menuItem}
-                                                                               <fieldset>
-                                                                                       <legend class="menuHeader" data-menu-item="{$_menuItem->menuItem}">{lang}{@$_menuItem->menuItem}{/lang}</legend>
-                                                                                       
-                                                                                       <nav class="menuGroupItems">
-                                                                                               <ul id="{$_menuItem->menuItem}">
-                                                                                                       {foreach from=$__wcf->getACPMenu()->getMenuItems($_menuItem->menuItem) item=menuItemCategory}
-                                                                                                               {if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
-                                                                                                                       {foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}
-                                                                                                                               <li id="{$subMenuItem->menuItem}" data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getLink()}">{lang}{$subMenuItem->menuItem}{/lang}</a></li>
-                                                                                                                       {/foreach}
-                                                                                                               {else}
-                                                                                                                       <li id="{$menuItemCategory->menuItem}" data-menu-item="{$menuItemCategory->menuItem}"><a href="{$menuItemCategory->getLink()}">{lang}{$menuItemCategory->menuItem}{/lang}</a></li>
-                                                                                                               {/if}
-                                                                                                       {/foreach}
-                                                                                               </ul>
-                                                                                       </nav>
-                                                                               </fieldset>
-                                                                       {/foreach}
-                                                               </div>
-                                                       {/foreach}
-                                               {/if}
-                                       {/content}
+                                       <div>
+                                               {content}
+                                                       {* work-around for unknown core-object during WCFSetup *}
+                                                       {if PACKAGE_ID}
+                                                               {foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_parentMenuItem}
+                                                                       <div id="{$_parentMenuItem->menuItem}-container" style="display: none;" class="menuGroup collapsibleMenus" data-parent-menu-item="{$_parentMenuItem->menuItem}">
+                                                                               {foreach from=$__wcf->getACPMenu()->getMenuItems($_parentMenuItem->menuItem) item=_menuItem}
+                                                                                       <fieldset>
+                                                                                               <legend class="menuHeader" data-menu-item="{$_menuItem->menuItem}">{lang}{@$_menuItem->menuItem}{/lang}</legend>
+                                                                                               
+                                                                                               <nav class="menuGroupItems">
+                                                                                                       <ul id="{$_menuItem->menuItem}">
+                                                                                                               {foreach from=$__wcf->getACPMenu()->getMenuItems($_menuItem->menuItem) item=menuItemCategory}
+                                                                                                                       {if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
+                                                                                                                               {foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}
+                                                                                                                                       <li id="{$subMenuItem->menuItem}" data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getLink()}">{lang}{$subMenuItem->menuItem}{/lang}</a></li>
+                                                                                                                               {/foreach}
+                                                                                                                       {else}
+                                                                                                                               <li id="{$menuItemCategory->menuItem}" data-menu-item="{$menuItemCategory->menuItem}"><a href="{$menuItemCategory->getLink()}">{lang}{$menuItemCategory->menuItem}{/lang}</a></li>
+                                                                                                                       {/if}
+                                                                                                               {/foreach}
+                                                                                                       </ul>
+                                                                                               </nav>
+                                                                                       </fieldset>
+                                                                               {/foreach}
+                                                                       </div>
+                                                               {/foreach}
+                                                       {/if}
+                                               {/content}
+                                       </div>
                                </aside>
                        {/hascontent}
                        

diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index 30d20269d878ce3cfd42b3d79f974e6327843d79..49e7b1112031a2e4dfaffe4888f902f7fe6a9d64 100644 (file)
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -282,6 +282,8 @@
                        width: 300px;
                        z-index: 120;
                        
+                       .transition(width, .2s, ease);
+                       
                        > .collapsibleButton {
                                background-color: @wcfSidebarBackgroundColor;
                                background-image: url('../icon/arrowRightColored.svg');
@@ -295,6 +297,12 @@
                                position: absolute;
                                top: 0;
                                width: 24px;
+                               
+                               .transition(left, .2s, ease);
+                       }
+                       
+                       > div {
+                               overflow: hidden;
                        }
                }
                
@@ -303,6 +311,8 @@
                        min-height: 100px;
                        padding: @wcfGapSmall @wcfGapLarge * 2 - @wcfGapTiny @wcfGapLarge;
                        z-index: 130;
+                       
+                       .transition(margin, .2s, ease);
                }
        }
        
@@ -329,15 +339,11 @@
                        }
                        
                        > .sidebar {
-                               width: 20px;
-                               
-                               > div,
-                               > fieldset {
-                                       display: none;
-                               }
+                               width: 0;
                                
                                > .collapsibleButton {
                                        background-image: url('../icon/arrowLeftColored.svg');
+                                       left: -40px;
                                }
                        }
                }
@@ -1129,12 +1135,12 @@ ul.inlineDataList {
 }
 
 /* ### sidebar ### */
-.sidebar > fieldset:not(:last-child), .sidebar > div:not(:last-child) {
+.sidebar > div > fieldset:not(:last-child), .sidebar > div > div:not(:last-child) {
        border-bottom: 1px solid @wcfContainerBorderColor;
        margin-bottom: @wcfGapMedium;
 }
 
-.sidebar.collapsibleMenu > fieldset, .sidebar.collapsibleMenu > div {
+.sidebar.collapsibleMenu > div > fieldset, .sidebar.collapsibleMenu > div > div {
        border-bottom-width: 0;
 }
 
@@ -1194,7 +1200,9 @@ ul.inlineDataList {
                                        }
                                        
                                        &:hover:not(.active) {
-                                               background-color: @wcfContainerHoverBackgroundColor;
+                                               > a {
+                                                       color: @wcfLinkHoverColor;
+                                               }
                                        }
                                        
                                        > a {
@@ -1202,6 +1210,8 @@ ul.inlineDataList {
                                                display: block;
                                                padding: @wcfGapTiny @wcfGapMedium @wcfGapSmall @wcfGapLarge;
                                                
+                                               .textShadow(@wcfSidebarBackgroundColor);
+                                               
                                                &:hover {
                                                        text-decoration: none;
                                                }
@@ -1210,7 +1220,9 @@ ul.inlineDataList {
                        }
                }
                
-               > div {
+               > div,
+               > ul,
+               > dl {
                        width: 300px - @wcfGapMedium * 2;
                }
        }
@@ -1241,6 +1253,7 @@ ul.inlineDataList {
        .formSubmit {
                margin-bottom: @wcfGapMedium;
                margin-top: 0;
+               width: 300px;
        }
        
        &.collapsibleMenu {