Sidebar overhaul
authorMarcel Werk <burntime@woltlab.com>
Thu, 29 Mar 2012 19:42:03 +0000 (21:42 +0200)
committerMarcel Werk <burntime@woltlab.com>
Thu, 29 Mar 2012 19:42:03 +0000 (21:42 +0200)
wcfsetup/install/files/acp/templates/header.tpl
wcfsetup/install/files/style/bootstrap.less
wcfsetup/install/files/style/forms.less
wcfsetup/install/files/style/layout.less
wcfsetup/install/files/style/navigation.less
wcfsetup/install/files/style/sidebar.less [new file with mode: 0644]
wcfsetup/install/files/style/user.less

index 416a36655469d4e601ec92b0fd9b06cfbc4b624a..912c1fc7402d32c957177ce7305e9014fdb13fb8 100644 (file)
                                <aside class="sidebar">
                                        <!-- sidebar menu -->
                                        <nav id="sidebarContent" class="sidebarContent">
-                                               {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}
-                                                                                       <h1 class="menuHeader" data-menu-item="{$menuItem->menuItem}">{lang}{@$menuItem->menuItem}{/lang}</h1>
-                                                                                       <div 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>
-                                                                                       </div>
-                                                                               {/foreach}
-                                                                       </div>
-                                                               {/foreach}
-                                                       {/if}
-                                               {/content}
+                                               <ul>
+                                                       <li>
+                                                       {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}
+                                                                                               <h1 class="menuHeader" data-menu-item="{$menuItem->menuItem}">{lang}{@$menuItem->menuItem}{/lang}</h1>
+                                                                                               <div 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>
+                                                                                               </div>
+                                                                                       {/foreach}
+                                                                               </div>
+                                                                       {/foreach}
+                                                               {/if}
+                                                       {/content}
+                                                       </li>
+                                               </ul>
                                        </nav>
                                        <!-- /sidebar menu -->
                                </aside>
index 90c1a2e84127f2330c1bb1a1f81d1c5fac9d1d34..a1e1fe61ae86a7c4a045be91d56beb88d5c3bc34 100644 (file)
@@ -27,6 +27,7 @@
 @import "comments.less";
 @import "user.less";
 @import "like.less";
+@import "sidebar.less";
 
 @import "message.less";
 @import "dialog.less";
index db7d19be8791e460b07ad432e4f6de1bc236619d..783d3f33af371b001059e460bb33aab4d031ab6f 100644 (file)
@@ -32,20 +32,6 @@ fieldset legend ~ p {
        margin-bottom: @wcfGapMedium;
 }
 
-/* Special Sidebar */
-
-.sidebar fieldset {
-       background-color: transparent;
-       border-width: 0;
-}
-
-.sidebar fieldset legend {
-       padding: 0;
-       text-transform: uppercase;
-               
-       .textShadow(@wcfHighlightBackgroundColor);
-}
-
 /* ############## Labeled Content ############## */
 
 /* Simple */
index 07f43d56720bb41563cc380973c4361b7a50e868..f1540d10107a25e371aa3b1610f1ff87c2caf3fe 100644 (file)
@@ -162,6 +162,10 @@ img {
                        color: @wcfDimmedColor;
                        padding-top: 5px;
                }
+               
+               > h3 {
+                       color: @wcfDimmedColor;
+               }
        }
 }
 
@@ -214,6 +218,16 @@ dl.dataList {
        }
 }
 
+ul.dataList {
+       li {
+               display: inline-block;
+               
+               &:not(:last-child):after {
+                       content: ",";
+               }
+       }
+}
+
 .framed {
        img  {
                background-color: @wcfContentBackgroundColor;
index 968067bbfa599ecebaff05bdcc5be0b3a45234d1..c5716eb68790809f49b1d906ba1eebb488a52921 100644 (file)
                        display: inline;
                }
        }
-}
-
-.sidebarContent {
-       a:hover {
-               text-decoration: none;
-       }
-       
-       > div {
-               overflow: hidden;
-               position: relative;
-               
-               &.collapsibleMenus > h1 {
-                       background-image: url(../icon/arrowRight.svg);
-                       background-position: 15px center;
-                       background-repeat: no-repeat;
-                       background-size: 16px;
-                       
-                       &.active {
-                               background-image: url(../icon/arrowDown.svg);
-                       }
-               }
-               
-               &:not(.collapsibleMenus) > h1 {
-                       padding-right: @wcfGapLarge;
-               }
-               
-               > h1 {
-                       color: @wcfLinkColor;
-                       cursor: pointer;
-                       font-size: 130%;
-                       font-weight: bold;
-                       padding: @wcfGapSmall @wcfGapMedium @wcfGapSmall (@wcfGapLarge + 16px + @wcfGapTiny);   // icon size + gap
-                       
-                       .textShadow(@wcfHighlightBackgroundColor);
-               }
-               
-               ul > li {
-                       font-size: 110%;
-                       
-                       &.active {
-                               background-color: @wcfContentBackgroundColor;
-                               margin-right: -1px;
-                               overflow: hidden;
-                               
-                               .boxShadow(0, 0, rgba(0, 0, 0, .1));
-                               
-                               a {
-                                       font-weight: bold;
-                               }
-                       }
-                       
-                       > a,
-                       > div {
-                               color: @wcfLinkColor;
-                               display: block;
-                               padding: @wcfGapTiny @wcfGapMedium @wcfGapSmall (@wcfGapLarge + 16px + @wcfGapTiny);
-                               
-                               .textShadow(@wcfHighlightBackgroundColor);
-                       }
-               }
-       }
 }
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/sidebar.less b/wcfsetup/install/files/style/sidebar.less
new file mode 100644 (file)
index 0000000..f474403
--- /dev/null
@@ -0,0 +1,148 @@
+.sidebarContent {
+       padding-top: @wcfGapLarge;
+       
+       > ul {
+               > li {
+                       margin-bottom: @wcfGapMedium;
+                       
+                       &:not(:last-child) {
+                               border-bottom: 1px solid darken(@wcfHighlightBackgroundColor, 8%);
+                       }
+                       
+                       &.sidebarContainer {
+                               padding: 0 @wcfGapMedium @wcfGapMedium;
+                               
+                               .button.more {
+                                       margin: 5px 0 0;
+                                       float: right;
+                               }
+                               
+                               &:after {
+                                       content: "";
+                                       height: 0;
+                                       display: block;
+                                       clear: both;
+                               }
+                       }
+                       
+                       .sidebarContainerHeadline {
+                               margin-bottom: @wcfGapSmall;
+                               
+                               > h1 {
+                                       text-transform: uppercase;
+                                       
+                                       .textShadow(@wcfHighlightBackgroundColor);
+                                       
+                                       .badge {
+                                               float: right;
+                                       }
+                               }
+                       }
+                       
+                       dl.dataList {
+                               margin-bottom: -4px;
+                               
+                               dd {
+                                       margin-bottom: 4px;
+                               }
+                               
+                               dt {
+                                       font-size: 85%;
+                                       color: @wcfLinkColor;
+                               }
+                       }
+                       
+                       /* forms */
+                       fieldset {
+                               background-color: transparent;
+                               border-width: 0;
+                               margin: 0;
+                               padding: @wcfGapSmall 0 0;
+                               
+                               legend {
+                                       padding: 0;
+                                       text-transform: uppercase;
+                                               
+                                       .textShadow(@wcfHighlightBackgroundColor);
+                               }
+                       }
+               }
+       }
+       
+       /* menu groups */
+       .menuGroup {
+               overflow: hidden;
+               position: relative;
+               
+               > h1 {
+                       margin-bottom: @wcfGapMedium;
+                       padding: 0 @wcfGapMedium;
+                       
+                       .textShadow(@wcfHighlightBackgroundColor);
+               }
+               
+               .menuGroupItems {
+                       margin-bottom: @wcfGapSmall;
+                       margin-top: -@wcfGapSmall;
+               }
+               
+               a:hover {
+                       text-decoration: none;
+               }
+               
+               ul > li {
+                       &.active {
+                               background-color: @wcfContentBackgroundColor;
+                               margin-right: -1px;
+                               overflow: hidden;
+                               
+                               .boxShadow(0, 0, rgba(0, 0, 0, .1));
+                               
+                               a {
+                                       font-weight: bold;
+                               }
+                       }
+                       
+                       > a,
+                       > div {
+                               color: @wcfLinkColor;
+                               display: block;
+                               padding: @wcfGapTiny @wcfGapMedium @wcfGapSmall @wcfGapLarge;
+                       }
+               }
+               
+               &.collapsibleMenus {
+                       > h1 {
+                               background-image: url(../icon/arrowRight.svg);
+                               background-position: 15px center;
+                               background-repeat: no-repeat;
+                               background-size: 16px;
+                               color: @wcfLinkColor;
+                               cursor: pointer;
+                               font-weight: bold;
+                               font-size: 130%;
+                               padding-left: (@wcfGapLarge + 16px + @wcfGapTiny);
+                               
+                               &.active {
+                                       background-image: url(../icon/arrowDown.svg);
+                               }
+                       }
+                       
+                       ul > li {
+                               font-size: 110%;
+                               
+                               > a,
+                               > div {
+                                       padding-left: (@wcfGapLarge + 16px + @wcfGapTiny);
+                                       .textShadow(@wcfHighlightBackgroundColor);
+                               }
+                       }
+               }
+               
+               &:not(.collapsibleMenus) {
+                       > h1 {
+                               text-transform: uppercase;
+                       }
+               }
+       }
+}
\ No newline at end of file
index 9013688e765ae249e2d4b3e84c7bd02f7fad5c60..7a47d693ed95ac58b4d4d9b8d61f00594e62eb54 100644 (file)
@@ -1,3 +1,32 @@
+/* ##### User Sidebar #### */
+.sidebarContent {
+       .userAvatar {
+               text-align: center;
+               overflow: hidden;
+       }
+}
+
+/* todo: framed icon list */
+.framedIconList {
+       li {
+               float: left;
+               margin: 0 4px 4px 0;
+               
+               .framed {
+                       display: inline-block;
+               }
+       }
+       
+       &:after {
+               content: "";
+               height: 0;
+               display: block;
+               clear: both;
+       }
+}
+
+
+/* ##### User List #### */
 .simpleUserList {
        h2, p, dl {
                font-size: 85%;