More work on sidebars

The profile-sidebar now has the same structure as the one in the ACP;
Changed the way the collapsible arrow icons are being included for all
sidebars, to allow for always opened menu items.

diff --git a/com.woltlab.wcf/template/headInclude.tpl b/com.woltlab.wcf/template/headInclude.tpl
index ad02d7cb35c64147bb787af9a8f45139a1fe7c13..c84da34dbc5febaa675c608d3b3ae3b41a89d54d 100644 (file)
--- a/com.woltlab.wcf/template/headInclude.tpl
+++ b/com.woltlab.wcf/template/headInclude.tpl
@@ -62,7 +62,7 @@
                        'wcf.global.button.collapsible': '{lang}wcf.global.button.collapsible{/lang}'
                        {event name='javascriptLanguageImport'}
                });
-
+               
                WCF.Icon.addObject({
                        'wcf.icon.loading': '{icon size='S'}spinner{/icon}',
                        'wcf.icon.opened': '{icon size='S'}opened2{/icon}',
@@ -74,7 +74,9 @@
                new WCF.Effect.SmoothScroll();
                new WCF.Effect.BalloonTooltip();
                $('<span class="pointer"><span></span></span>').appendTo('.innerError');
-
+               
+               $('#sidebarMenu').wcfSidebar();
+               
                {event name='javascriptInit'}
        });
        //]]>

diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css
index 9f8962396b624c48fb9d09d2d04d4e46eca61308..16896d74a166ce6ac94cc34cedc78069cb29fa4c 100644 (file)
--- a/wcfsetup/install/files/acp/style/wcf.css
+++ b/wcfsetup/install/files/acp/style/wcf.css
@@ -810,8 +810,6 @@ section.content .content {
 
 /* ############## Sidebar ############## */
 
-/* Note that the sidebar may change to float soon! */
-
 /* Globals */
 
 aside.sidebar {
@@ -859,7 +857,7 @@ aside.collapsed {
 
 
 
-/* -- -- -- Collapsible Button -- -- -- */
+/* -- -- -- Collapsible Sidebar Button -- -- -- */
 
 /* Default (Right) */
 
@@ -928,7 +926,6 @@ nav.sidebarMenu {
 
 nav.sidebarMenu > div {
        text-shadow: 0 1px 0 #fff;
-       color: #69c;
        position: relative;
        overflow: hidden;
        z-index: 110;
@@ -938,47 +935,58 @@ nav.sidebarMenu > div {
        width: 0;
 }
 
-nav.sidebarMenu > div a:hover {
+nav.sidebarMenu > .collapsible a:hover {
        text-decoration: none !important;
        color: #369;
 }
 
-nav.sidebarMenu > div h1 {
+nav.sidebarMenu > div > h1 {
        cursor: pointer;
        font-weight: bold;
        color: #369;
+       margin-top: 5px;
+}
+
+nav.sidebarMenu > .collapsible > h1 {
        background-image: url('../../icon/arrowRight.svg');
        background-position: 15px center;
        background-size: 16px;
        background-repeat: no-repeat;
-       margin-top: 5px;
 }
 
 @media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
-       nav.sidebarMenu > div h1 {
+       nav.sidebarMenu > div > h1 {
                font-size: 130%;
-               padding: 7px 25px 7px 35px;
+               padding: 7px 15px 7px 35px;
+       }
+       
+       nav.sidebarMenu > div:not(.collapsible) > h1 {
+               padding: 7px 15px 7px 15px;
        }
        
 }
 
 @media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
-       nav.sidebarMenu > div h1 {
+       nav.sidebarMenu > div > h1 {
                font-size: 150%;
                padding: 7px 15px 7px 35px;
        }
        
+       nav.sidebarMenu > div:not(.collapsible) > h1 {
+               padding: 7px 15px 7px 15px;
+       }
+       
 }
 
-nav.sidebarMenu > div h1.activeMenuItem {
+nav.sidebarMenu > .collapsible h1.activeMenuItem {
        background-image: url('../../icon/arrowDown.svg');
 }
 
 @media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
-       nav.sidebarMenu > div ul li {
+       nav.sidebarMenu > div ul > li {
                font-size: 110%;
        }
        
@@ -986,20 +994,21 @@ nav.sidebarMenu > div h1.activeMenuItem {
 
 @media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
-       nav.sidebarMenu > div ul li {
+       nav.sidebarMenu > div ul > li {
                font-size: 120%;
        }
        
 }
 
-nav.sidebarMenu > div ul li a {
+nav.sidebarMenu > div ul > li > a,
+nav.sidebarMenu > div ul > li > div {
        text-shadow: 0 1px 0 #fff;
        color: #69c;
-       padding: 5px 25px 7px 35px;
+       padding: 5px 15px 7px 35px;
        display: block;
 }
 
-nav.sidebarMenu > div ul li.activeMenuItem {
+nav.sidebarMenu > div ul > li.activeMenuItem {
        background-color: #fff;
        margin-right: -1px;
        overflow: hidden;
@@ -1011,7 +1020,7 @@ nav.sidebarMenu > div ul li.activeMenuItem {
        box-shadow: 0 0 5px rgba(0, 0, 0, .1);
 }
 
-nav.sidebarMenu > div ul li.activeMenuItem a {
+nav.sidebarMenu > div ul > li.activeMenuItem a {
        font-weight: bold;
        color: #369;
 }

diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index ba6abc54574f6f21f29651d94b25cd8d97dfe8f8..c8286a3faa61408f46d3801f751a56e25382d734 100644 (file)
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -71,7 +71,7 @@
                        new WCF.Effect.SmoothScroll();
                        new WCF.Effect.BalloonTooltip();
                        $('<span class="pointer"><span></span></span>').appendTo('.innerError');
-
+                       
                        $('#sidebarMenu').wcfSidebar();
                });
                //]]>
@@ -153,7 +153,7 @@
                                                        {* 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="menuContainer" data-parent-menu-item="{$parentMenuItem->menuItem}">
+                                                                       <div id="{$parentMenuItem->menuItem}-container" style="display: none;" class="menuContainer collapsible" data-parent-menu-item="{$parentMenuItem->menuItem}">
                                                                                {foreach from=$__wcf->getACPMenu()->getMenuItems($parentMenuItem->menuItem) item=menuItem}
                                                                                        <h1 class="menuHeader" data-menu-item="{$menuItem->menuItem}">{lang}{@$menuItem->menuItem}{/lang}</h1>
                                                                                        <div class="sidebarMenuGroup">