More refinements to the ACP style

- added some more dummy icons
- following the sketch with some more det
ails
- changing some HTML elements
- added some more comments

diff --git a/wcfsetup/install/files/acp/js/WCF.ACP.js b/wcfsetup/install/files/acp/js/WCF.ACP.js
index e8c2e7938376ca78c2fdf91aebf61b6a38221455..88224518e8480cdd5fc1a3d8ffc84035220d29e8 100644 (file)
--- a/wcfsetup/install/files/acp/js/WCF.ACP.js
+++ b/wcfsetup/install/files/acp/js/WCF.ACP.js
@@ -24,7 +24,7 @@ WCF.ACP.Menu.prototype = {
         * @param       array           activeMenuItems\r
         */\r
        init: function(activeMenuItems) {\r
-               this._headerNavigation = $('nav#mainMenu');\r
+               this._headerNavigation = $('menu#mainMenu');\r
                this._sidebarNavigation = $('nav#sidebarMenu');\r
                \r
                this._prepareElements(activeMenuItems);\r

diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css
index 2ee39895c92cbd25fed22f94e6f129a6a1f82d64..8abdb1cb544a066ea0b93f48b2fc7b377de936b5 100644 (file)
--- a/wcfsetup/install/files/acp/style/testing.css
+++ b/wcfsetup/install/files/acp/style/testing.css
@@ -7,6 +7,10 @@
 \r
 /* -- -- -- -- -- Miscellaneous -- -- -- -- -- */\r
 \r
+* {\r
+       text-overflow: ellipsis;\r
+}\r
+\r
 body {\r
        font-family: 'Trebuchet MS', Arial, sans-serif;\r
        font-size: .8em;\r
@@ -64,46 +68,47 @@ header div#logo a {
        text-align: right;\r
 }\r
 \r
-/* -- -- -- -- -- Tabs -- -- -- -- --  */\r
+/* -- -- -- -- -- Main Menu -- -- -- -- --  */\r
 \r
-nav#mainMenu {\r
-       margin: 0 10px -7px;\r
+menu.mainMenu {\r
+       margin: 0 7px -7px;\r
        background-color: rgba(0, 0, 0, .5);\r
-       border-radius: 7px 7px 0 0;\r
+       border-radius: 5px 5px 0 0;\r
        display: inline-block;\r
 }\r
 \r
-nav#mainMenu:after {\r
+menu.mainMenu:after {\r
        content: "";\r
        display: block;\r
        clear: both;\r
 }\r
 \r
-nav#mainMenu li {\r
-       font-size: 110%;\r
+menu.mainMenu li {\r
+       font-size: 105%;\r
        font-weight: normal;\r
        color: #ccc;\r
-       \r
+       text-shadow: 0 -1px 0 #000;\r
        cursor: pointer;\r
        display: inline-block;\r
        margin: 5px -5px 0;\r
-       padding: 5px 20px;\r
+       padding: 3px 20px 11px;\r
        float: left;\r
        position: relative;\r
        z-index: 1;\r
 }\r
 \r
-nav#mainMenu li:after {\r
+menu.mainMenu li:after {\r
        content: "";\r
        display: block;\r
        clear: both;\r
 }\r
 \r
-nav#mainMenu li:hover {\r
+menu.mainMenu li:hover {\r
        color: #fff;\r
 }\r
 \r
-nav#mainMenu li.activeMenuItem {\r
+menu.mainMenu li.activeMenuItem {\r
+       font-size: 110%;\r
        font-weight: bold;\r
        color: #369;\r
        text-shadow: 0 1px 0 #fff;\r
@@ -114,37 +119,36 @@ nav#mainMenu li.activeMenuItem {
        background-image: -o-linear-gradient(#fff, #e7f2fd);\r
        background-image: linear-gradient(#fff, #e7f2fd);\r
        \r
-       border-radius: 7px 7px 0 0;\r
+       border-radius: 5px 5px 0 0;\r
        margin: 0;\r
-       padding: 15px 20px 10px;\r
-       padding-top: 15px;\r
+       padding: 10px 20px 13px;\r
        position: relative;\r
-       top: -5px;\r
+       top: -3px;\r
        z-index: 10;\r
 }\r
 \r
-/* -- -- -- -- -- Sub Bar -- -- -- -- --  */\r
+/* -- -- -- -- -- Header Navigation -- -- -- -- --  */\r
 \r
-menu.subbar {\r
+nav.headerNavigation {\r
        display: block;\r
        background-color: #e7f2fd;\r
        border-bottom: 1px solid #bcd;\r
-       border-radius: 5px 5px 0 0;\r
+       border-radius: 3px 3px 0 0;\r
        padding: 3px 7px;\r
        position: relative;\r
 }\r
 \r
-menu.subbar:after {\r
+nav.headerNavigation:after {\r
        content: "";\r
        display: block;\r
        clear: both;\r
 }\r
 \r
-menu.subbar ul {\r
+nav.headerNavigation ul {\r
        display: block;\r
 }\r
 \r
-menu.subbar ul li {\r
+nav.headerNavigation ul li {\r
        float: right;\r
 }\r
 \r
@@ -157,7 +161,7 @@ div.main {
        table-layout: fixed;\r
 }\r
 \r
-div.mainInner {\r
+div.main > div {\r
        display: table-row;\r
 }\r
 \r
@@ -173,7 +177,7 @@ div#content {
        \r
        display: table-cell;\r
        padding: 21px;\r
-       width: auto;\r
+       width: 100%;\r
 }\r
 \r
 /* -- -- -- -- -- Sidebar -- -- -- -- -- */\r
@@ -186,6 +190,10 @@ aside.sidebar {
 \r
 /* -- -- -- -- -- Sidebar Menu -- -- -- -- -- */\r
 \r
+nav.sidebarMenu {\r
+       white-space: nowrap;\r
+}\r
+\r
 nav.sidebarMenu div.menuContainer {\r
        background-color: #d8e7f5;\r
        position: relative;\r
@@ -205,15 +213,14 @@ nav.sidebarMenu div.menuContainer a:hover {
 \r
 nav.sidebarMenu div.menuContainer h1 {\r
        background-image: url("../../icon/arrowRightS.png");\r
-       background-position: 7px center;\r
+       background-position: 15px center;\r
        background-repeat: no-repeat;\r
        color: #369;\r
        cursor: pointer;\r
        font-size: 130%;\r
        font-weight: bold;\r
-       margin-top: 7px;\r
-       padding: 7px;\r
-       padding-left: 30px;\r
+       margin-top: 5px;\r
+       padding: 7px 7px 7px 35px;\r
        position: relative;\r
 }\r
 \r
@@ -222,7 +229,8 @@ nav.sidebarMenu div.menuContainer h1.activeMenuItem {
 }\r
 \r
 nav.sidebarMenu div.menuContainer ul li {\r
-       padding: 7px 7px 7px 31px;\r
+       font-size: 110%;\r
+       padding: 7px 15px 7px 35px;\r
 }\r
 \r
 nav.sidebarMenu div.menuContainer ul li.activeMenuItem {\r
@@ -252,7 +260,7 @@ footer:after {
 footer > div {\r
        background-color: #e7f2fd;\r
        border-top: 1px solid #bcd;\r
-       border-radius: 0 0 5px 5px;\r
+       border-radius: 0 0 3px 3px;\r
        clear: both;\r
        padding: 3px 7px;\r
 }\r
@@ -356,6 +364,8 @@ div.ui-widget-overlay {
        top: 0;\r
 }\r
 \r
+/* -- -- -- -- -- Headlines -- -- -- -- -- */\r
+\r
 div.mainHeadline {\r
        height: 48px;\r
        margin-bottom: 7px;\r
@@ -391,6 +401,8 @@ h3.subHeadline {
        padding: 7px;\r
 }\r
 \r
+/* -- -- -- -- -- Fieldsets -- -- -- -- -- */\r
+\r
 fieldset {\r
        border: 1px solid #ccc;\r
        border-radius: 10px;\r
@@ -415,6 +427,8 @@ fieldset > ul li {
        list-style-type: circle;\r
 }\r
 \r
+/* -- -- -- -- -- Forms -- -- -- -- -- */\r
+\r
 div.formElement {\r
        clear: both;\r
        margin-bottom: 14px;\r
@@ -444,6 +458,9 @@ div.formGroupField div.formField label {
        display: block;\r
 }\r
 \r
+\r
+\r
+\r
 .border {\r
        border: 1px solid #ccc;\r
        border-radius: 5px;\r
@@ -468,6 +485,8 @@ div.formGroupField div.formField label {
        border-width: 0 !important;\r
 }\r
 \r
+/* -- -- -- -- -- Tables -- -- -- -- -- */\r
+\r
 table {\r
        border-radius: 0 0 5px 5px;\r
        width: 100% !important;\r
@@ -557,6 +576,8 @@ tr.container-2 td {
        background-color: #eee;\r
 }\r
 \r
+/* -- -- -- -- -- Page Navigation -- -- -- -- -- */\r
+\r
 .pageNavigation ul li {\r
        display: inline-block;\r
 }\r
@@ -586,6 +607,8 @@ tr.container-2 td {
        vertical-align: middle;\r
 }\r
 \r
+/* -- -- -- -- -- Large Buttons -- -- -- -- -- */\r
+\r
 div.largeButtons {\r
        text-align: right;\r
 }\r
@@ -636,6 +659,10 @@ input[type='submit'] {
        cursor: pointer;\r
 }\r
 \r
+\r
+\r
+\r
+\r
 div#packageInstallationDialogContainer {\r
        background-color: #fefefe;\r
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#eee));\r
@@ -705,12 +732,14 @@ fieldset legend ~ p {
        margin-bottom: 14px;\r
 }\r
 \r
+/* -- -- -- -- -- Tabbed Content -- -- -- -- -- */\r
+\r
 dl {\r
        clear: both;\r
        margin-bottom: 7px;\r
 }\r
 \r
-dt /* is op */ {\r
+dt { /* is op */\r
        float: left;\r
        text-align: right;\r
        width: 230px;\r
@@ -730,7 +759,11 @@ dl.disabled dt {
        color: #777;\r
 }\r
 \r
-/* Taken from jQuery UI @ themes/base/jquery.ui.tabs.css */\r
+\r
+\r
+\r
+/* -- -- -- -- -- Taken from jQuery UI @ themes/base/jquery.ui.tabs.css -- -- -- -- -- */\r
+\r
 .ui-tabs {\r
        position: relative; /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */\r
        padding: 3px;\r

diff --git a/wcfsetup/install/files/acp/templates/footer.tpl b/wcfsetup/install/files/acp/templates/footer.tpl
index 39017ac9344dedb3fb07fd7a4f05f97e23284905..7f5d95672149c3ec0372b64a0c701687c3c736a6 100644 (file)
--- a/wcfsetup/install/files/acp/templates/footer.tpl
+++ b/wcfsetup/install/files/acp/templates/footer.tpl
@@ -14,6 +14,7 @@
                </div>\r
                <p class="copyright"><a href="http://www.woltlab.com" title="www.woltlab.com">Copyright &copy; 2001-2011 WoltLab&reg; GmbH</a></p>\r
        </footer>\r
+       <!-- /FOOTER -->\r
        <a id="bottom"></a>\r
 </body>\r
 </html>
\ No newline at end of file

diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 42ef5e2b6c3dc23e889c9223d462815b22b5e29a..31218c65696a7475019a3f73150fecd957e7b650 100644 (file)
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -62,12 +62,14 @@
                //]]>\r
        </script>\r
 </head>\r
+\r
 <body id="tpl{$templateName|ucfirst}">\r
+       <!-- HEADER -->\r
        <a id="top"></a>\r
        <header>\r
                \r
-               <!-- top nav -->\r
-               <!-- /top nav -->\r
+               <!-- top panel -->\r
+               <!-- /top panel -->\r
                \r
                <!-- logo -->\r
                <div id="logo">\r
@@ -79,7 +81,7 @@
                <!-- /logo -->\r
                \r
                <!-- top nav -->\r
-               <nav id="mainMenu">\r
+               <menu id="mainMenu" class="mainMenu">\r
                        {* work-around for unknown core-object during WCFSetup *}\r
                        {if PACKAGE_ID}\r
                                <ul>\r
@@ -88,23 +90,22 @@
                                        {/foreach}\r
                                </ul>\r
                        {/if}\r
-               </nav>\r
+               </menu>\r
                <!-- /top nav -->\r
                \r
                <!-- sub bar -->\r
-               \r
-               <menu class="subbar">\r
+               <nav class="headerNavigation">\r
                        <ul>\r
                                <li id="toBottomLink" class="toBottomLink"><a href="#bottom" title="{lang}wcf.global.scrollDown{/lang}"><img src="{@RELATIVE_WCF_DIR}icon/downS.png" alt="{lang}wcf.global.scrollDown{/lang}" /> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>\r
                        </ul>\r
-               </menu>\r
-               \r
+               </nav>\r
                <!-- /sub bar -->\r
        </header>\r
+       <!-- /HEADER -->\r
        \r
        <!-- CONTENT -->\r
        <div id="main" class="main">\r
-               <div class="mainInner">\r
+               <div>\r
                        <aside class="sidebar">\r
                                <!-- sub nav -->\r
                                <nav id="sidebarMenu" class="sidebarMenu">\r
@@ -114,7 +115,7 @@
                                                        <div class="menuContainer" data-parentMenuItem="{$parentMenuItem->menuItem}" id="{$parentMenuItem->menuItem}-container" style="display: none;">\r
                                                                {foreach from=$__wcf->getACPMenu()->getMenuItems($parentMenuItem->menuItem) item=menuItem}\r
                                                                        <h1 data-menuItem="{$menuItem->menuItem}" class="menuHeader">{lang}{@$menuItem->menuItem}{/lang}</h1>\r
-                                                                       <div>\r
+                                                                       <div class="sidebarMenuGroup">\r
                                                                                <ul id="{$menuItem->menuItem}">\r
                                                                                        {foreach from=$__wcf->getACPMenu()->getMenuItems($menuItem->menuItem) item=menuItemCategory}\r
                                                                                                {if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}\r

diff --git a/wcfsetup/install/files/icon/deleteS.png b/wcfsetup/install/files/icon/deleteS.png
old mode 100644 (file)
new mode 100755 (executable)
index 839b811..7016ef5
Binary files a/wcfsetup/install/files/icon/deleteS.png and b/wcfsetup/install/files/icon/deleteS.png differ

diff --git a/wcfsetup/install/files/icon/downS.png b/wcfsetup/install/files/icon/downS.png
new file mode 100644 (file)
index 0000000..8b68b9c
Binary files /dev/null and b/wcfsetup/install/files/icon/downS.png differ

diff --git a/wcfsetup/install/files/icon/upS.png b/wcfsetup/install/files/icon/upS.png
new file mode 100644 (file)
index 0000000..5d7d2a6
Binary files /dev/null and b/wcfsetup/install/files/icon/upS.png differ