Renamed external Links, Improved tab menu & menu view, reordered CSS.
authorLuzifr <szekely@woltlab.com>
Fri, 26 Aug 2011 18:02:12 +0000 (20:02 +0200)
committerLuzifr <szekely@woltlab.com>
Fri, 26 Aug 2011 18:02:12 +0000 (20:02 +0200)
wcfsetup/install/files/acp/style/testing.css
wcfsetup/install/files/acp/templates/option.tpl
wcfsetup/install/files/acp/templates/packageView.tpl
wcfsetup/install/files/acp/templates/userGroupAdd.tpl
wcfsetup/install/files/icon/externalLink.svg [deleted file]
wcfsetup/install/files/icon/externalURL.svg [new file with mode: 0644]

index 921a5f9542ccd8776ca79bd4c3025620bddc577d..8f4cef3699da9c1e3a7e39801b59b181ba8dec60 100644 (file)
@@ -43,8 +43,8 @@ a:hover {
        text-decoration: underline;
 }
 
-a.externalLink {
-       background-image: url("../../icon/externalLink.svg");
+a.externalURL {
+       background-image: url("../../icon/externalURL.svg");
        background-position: right center;
        background-repeat: no-repeat;
        padding-right: 17px;
@@ -220,8 +220,8 @@ nav.headerNavigation {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        margin: 0 23px;
-       padding: 3px 7px;
        position: relative;
+       min-width: 800px;
 }
 
 nav.headerNavigation:after {
@@ -230,6 +230,16 @@ nav.headerNavigation:after {
        clear: both;
 }
 
+nav.headerNavigation > div {
+       padding: 3px 7px;
+}
+
+nav.headerNavigation > div:after {
+       content: "";
+       display: block;
+       clear: both;
+}
+
 nav.headerNavigation ul {
        display: block;
 }
@@ -252,6 +262,7 @@ nav.headerNavigation ul li {
 
 div.main {
        margin: 0 23px;
+       min-width: 800px;
 }
 
 /* -- -- -- -- -- Content -- -- -- -- -- */
@@ -369,6 +380,7 @@ footer.pageFooter {
        position: relative;
        text-align: center;
        position: relative;
+       min-width: 800px;
 }
 
 footer.pageFooter:after {
@@ -960,11 +972,117 @@ input[type='submit']:active,
 
 
 
+/* -- -- -- -- -- Tab Menu -- -- -- -- -- */
+/* Parts taken from jQuery UI @ themes/base/jquery.ui.tabs.css */
+
+/* Tab Menu */
+
+.tabMenu {
+       text-shadow: 0 1px 0 #fff;
+       background-color: none;
+       white-space: nowrap;
+       position: relative;
+       display: block;
+       text-align: center;
+       padding: 0 5px;
+}
+
+.tabMenu:after {
+       content: "";
+       display: block;
+       clear: both;
+}
+
+.tabMenu li {
+       list-style: none;
+       display: inline-block;
+       white-space: nowrap;
+       z-index: 90; /* Prevents border overlay during transition */
+}
+
+.tabMenu li a {
+       color: #999;
+       font-size: 110%;
+       padding: 10px 15px 7px;
+       text-decoration: none;
+       border: 1px solid #ccc;
+       border-top-left-radius: 3px;
+       border-top-right-radius: 3px;
+       display: inline-block;
+       background-color: rgba(245, 245, 245, .5);
+}
+
+.tabMenu li a:hover {
+       color: #666;
+}
+
+.tabMenu li.ui-tabs-selected {
+       margin-bottom: 0;
+       padding-bottom: 1px;
+}
+
+.tabMenu li.ui-state-active a {
+       color: #333 !important;
+       font-weight: bold;
+       font-size: 130%;
+       border-bottom: 1px solid #fff;
+       background-color: rgba(255, 255, 255, 1);
+}
+
+.tabMenu li.ui-state-active a,
+.tabMenu li.ui-state-disabled a,
+.tabMenu li.ui-state-processing a {
+       cursor: default;
+}
+
+.tabMenu li a,
+.ui-tabs .ui-tabs-collapsible .ui-tabs-nav li.ui-state-active a {
+       cursor: pointer;
+}
+
+/* Tab Menu Content */
+
+.tabMenuContent {
+       border: 1px solid #ccc;
+       background-color: rgba(255, 255, 255, 1);
+       z-index: 89; /* Prevents border overlay during transition */
+       display: block;
+       margin: -2px 0 0;
+       padding: 15px 23px;
+}
+
+/* ToDo: 2x hidden? */
+
+.ui-tabs .ui-tabs-hide {
+       display: none !important;
+}
+
+.ui-helper-hidden {
+       display: none;
+}
+
+.ui-helper-hidden-accessible {
+       position: absolute !important;
+       clip: rect(1px 1px 1px 1px);
+       clip: rect(1px,1px,1px,1px);
+}
+
+.ui-helper-clearfix:after {
+       content: "";
+       display: block;
+       height: 0;
+       clear: both;
+}
+
+
+
 /* -- -- -- -- -- Menu -- -- -- -- -- */
 
 .menu {
-       color: #fff;
-       padding: 6px 7px;
+       color: #666;
+       margin: -15px -23px 0 -23px;
+       padding: 10px 7px;
+       border-bottom: 1px solid #ccc;
 }
 
 .menu ul {
@@ -973,9 +1091,53 @@ input[type='submit']:active,
 
 .menu ul li {
        display: inline;
+       white-space: nowrap;
 }
 
 .menu ul li a {
+       color: #666 !important;
+       font-size: 85%;
+       text-decoration: none;
+       text-shadow: 0 1px 0 #fff;
+       border: 1px solid rgba(0, 0, 0, .3);
+       background-color: rgba(0, 0, 0, .05);
+       padding: 2px 10px;
+       border-radius: 13px;
+       
+       -webkit-transition: color .1s linear;
+       -moz-transition: color .1s linear;
+       -ms-transition: color .1s linear;
+       -o-transition: color .1s linear;
+       transition: color .1s linear;
+}
+
+.menu ul li a:hover {
+       color: #333;
+       background-color: rgba(255, 255, 255, 1);
+}
+
+.menu ul li a:active,
+.menu ul li a:focus {
+       border: 1px solid rgba(0, 0, 0, .3);
+       background-color: rgba(255, 255, 255, 1);
+}
+
+.menu ul li.ui-state-active a {
+       border: 1px solid rgba(0, 0, 0, .3);
+       background-color: rgba(255, 255, 255, 1);
+       cursor: default;
+}
+
+/* Special */
+
+.boxTitle > .menu {
+       color: #fff;
+       margin: 0 !important;
+       padding: 6px 7px;
+       border: none;
+}
+
+.boxTitle > .menu ul li a {
        color: #eee !important;
        font-size: 85%;
        text-decoration: none;
@@ -992,13 +1154,15 @@ input[type='submit']:active,
        transition: color .1s linear;
 }
 
-.menu ul li a:hover {
+.boxTitle > .menu ul li a:hover {
        color: #fff !important;
        border: 1px solid rgba(0, 0, 0, .3);
        background-color: rgba(0, 0, 0, .2);
 }
 
-.menu ul li a:active, .menu ul li a:focus, .menu ul li a.active {
+.boxTitle > .menu ul li a:active,
+.boxTitle > .menu ul li a:focus,
+.boxTitle > .menu ul li.ui-state-active a {
        border: 1px solid rgba(0, 0, 0, .5);
        
        -webkit-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
@@ -1403,126 +1567,6 @@ div.ui-widget-overlay {
 
 
 
-/* -- -- -- -- -- Tab Menu -- -- -- -- -- */
-/* Parts taken from jQuery UI @ themes/base/jquery.ui.tabs.css */
-
-/* Tab Menu */
-
-.tabMenu {
-       text-shadow: 0 1px 0 #fff;
-       background-color: none;
-       white-space: nowrap;
-       position: relative;
-       display: block;
-       text-align: center;
-       padding: 0 5px;
-}
-
-.tabMenu:after {
-       content: "";
-       display: block;
-       clear: both;
-}
-
-.tabMenu li {
-       list-style: none;
-       display: inline-block;
-       white-space: nowrap;
-       z-index: 90; /* Prevents border overlay during transition */
-}
-
-.tabMenu li a {
-       color: #999;
-       font-size: 110%;
-       padding: 10px 15px 7px;
-       text-decoration: none;
-       border: 1px solid #ccc;
-       border-top-left-radius: 3px;
-       border-top-right-radius: 3px;
-       display: inline-block;
-       /*
-       background-color: #fefefe;
-       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#eee));
-       background-image: -moz-linear-gradient(0% 0% 270deg, #fefefe, #eee);
-       background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#eee));
-       background-image: -o-linear-gradient(#fefefe, #eee);
-       background-image: linear-gradient(#fefefe, #eee);
-       */
-}
-
-.tabMenu li a:hover {
-       color: #666;
-}
-
-.tabMenu li.ui-tabs-selected {
-       margin-bottom: 0;
-       padding-bottom: 1px;
-}
-
-.tabMenu li.ui-state-active a {
-       color: #333 !important;
-       font-weight: bold;
-       background-color: rgba(255, 255, 255, .015);
-}
-
-.tabMenu li.ui-tabs-selected a {
-       background-color: #fefefe;      
-       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 1)), to(rgba(253, 253, 253, 1)));
-       background-image: -moz-linear-gradient(0% 0% 270deg, rgba(255, 255, 255, 1), rgba(253, 253, 253, 1));
-       background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 1)), to(rgba(253, 253, 253, 1)));
-       background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(253, 253, 253, 1));
-       background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(253, 253, 253, 1));
-       
-       border-bottom: 1px solid rgba(253, 253, 253, 1);
-}
-
-.tabMenu li.ui-tabs-selected a,
-.tabMenu li.ui-state-disabled a,
-.tabMenu li.ui-state-processing a {
-       cursor: default;
-}
-
-.tabMenu li a,
-.ui-tabs .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
-       cursor: pointer;
-}
-
-/* Tab Menu Content */
-
-.tabMenuContent {
-       border: 1px solid #ccc !important;
-       background-color: rgba(253, 253, 253, 1);
-       z-index: 89; /* Prevents border overlay during transition */
-       display: block;
-       margin: -2px 0 0;
-       padding: 15px 23px;
-}
-
-/* ToDo: 2x hidden? */
-
-.ui-tabs .ui-tabs-hide {
-       display: none !important;
-}
-
-.ui-helper-hidden {
-       display: none;
-}
-
-.ui-helper-hidden-accessible {
-       position: absolute !important;
-       clip: rect(1px 1px 1px 1px);
-       clip: rect(1px,1px,1px,1px);
-}
-
-.ui-helper-clearfix:after {
-       content: "";
-       display: block;
-       height: 0;
-       clear: both;
-}
-
-
-
 /* ToDo: Is all that really necessary? We wanted to support good browsers only */
 
 .ui-helper-clearfix {
index edbe4d97c98e8c34783a70ae6dc06332a92fc082..5e256804ab7671dc85975c5f3a7b79da1541b708 100644 (file)
@@ -26,9 +26,9 @@
 {/if}
 
 <form method="post" action="index.php?form=Option&amp;categoryID={@$category->categoryID}">
-       <div class="tabMenuContainer" data-active="{$activeTabMenuItem}" data-store="activeTabMenuItem">
-               <nav>
-                       <ul class="tabMenu">
+       <div data-active="{$activeTabMenuItem}" data-store="activeTabMenuItem" class="tabMenuContainer">
+               <nav class="tabMenu">
+                       <ul>
                                {foreach from=$optionTree item=categoryLevel1}
                                        <li><a href="#{@$categoryLevel1[object]->categoryName}">{*<span>*}{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}{*</span>*}</a></li>
                                {/foreach}
index 2ad827d187c75677d46dcec9227dc99372f659ed..2469e055541f3bf088aac9a623089ed23e473f47 100644 (file)
@@ -56,7 +56,7 @@
        {if $package->packageURL != ''}
                <dl>
                        <dt>{lang}wcf.acp.package.view.url{/lang}</dt>
-                       <dd><a href="{@RELATIVE_WCF_DIR}acp/dereferrer.php?url={$package->packageURL|rawurlencode}" class="externalLink">{$package->packageURL}</a></dd>
+                       <dd><a href="{@RELATIVE_WCF_DIR}acp/dereferrer.php?url={$package->packageURL|rawurlencode}" class="externalURL">{$package->packageURL}</a></dd>
                </dl>
        {/if}
        {if $package->parentPackageID}
@@ -67,7 +67,7 @@
        {/if}
        <dl>
                <dt>{lang}wcf.acp.package.view.author{/lang}</dt>
-               <dd>{if $package->authorURL}<a href="{@RELATIVE_WCF_DIR}acp/dereferrer.php?url={$package->authorURL|rawurlencode}" class="externalLink">{$package->author}</a>{else}{$package->author}{/if}</dd>
+               <dd>{if $package->authorURL}<a href="{@RELATIVE_WCF_DIR}acp/dereferrer.php?url={$package->authorURL|rawurlencode}" class="externalURL">{$package->author}</a>{else}{$package->author}{/if}</dd>
        </dl>
        
        {if $additionalFields|isset}{@$additionalFields}{/if}
index 7646d0843a25a5953d3941fe2a255acc8c4b62ce..9f2e759ce5ffc4601387ecdf961b2846159a7963 100644 (file)
@@ -62,8 +62,8 @@
                
                <!-- ToDo: Something's wrong with the structure of the tab-menu and the enclosed sub-menu! Tab-menus should have the same mark-up as on other pages and allow for an active state -->
                <div class="tabMenuContainer" data-active="{$activeSubTabMenuItem}" data-store="activeTabMenuItem">
-                       <nav>
-                               <ul class="tabMenu">
+                       <nav class="tabMenu">
+                               <ul>
                                        {foreach from=$optionTree item=categoryLevel1}
                                                <li id="{@$categoryLevel1[object]->categoryName}"><a href="#{@$categoryLevel1[object]->categoryName}">{lang}wcf.acp.group.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</a></li>
                                        {/foreach}
@@ -71,9 +71,9 @@
                        </nav>
                        
                        {foreach from=$optionTree item=categoryLevel1}
-                               <div class="tabMenuContainer" id="{@$categoryLevel1[object]->categoryName}" data-active="{$activeTabMenuItem}" data-store="activeSubTabMenuItem">
-                                       <nav>
-                                               <ul class="menu">
+                               <div id="{@$categoryLevel1[object]->categoryName}" data-active="{$activeTabMenuItem}" data-store="activeSubTabMenuItem" class="tabMenuContainer border tabMenuContent ">
+                                       <nav class="menu">
+                                               <ul>
                                                        {foreach from=$categoryLevel1[categories] item=$categoryLevel2}
                                                                <li><a href="#{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}">{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}{/lang}</a></li>
                                                        {/foreach}
@@ -81,7 +81,7 @@
                                        </nav>
        
                                        {foreach from=$categoryLevel1[categories] item=categoryLevel2}
-                                               <div class="border tabMenuContent hidden" id="{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}">
+                                               <div id="{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}" class="hidden">
                                                        <hgroup class="subHeading">
                                                                <h1>{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}{/lang}</h1>
                                                                <h2>{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}.description{/lang}</h2>
diff --git a/wcfsetup/install/files/icon/externalLink.svg b/wcfsetup/install/files/icon/externalLink.svg
deleted file mode 100644 (file)
index 02040db..0000000
+++ /dev/null
@@ -1,41 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>\r
-<!--<?xml-stylesheet type="text/css" href="svg.css"?>-->\r
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" xml:space="preserve">\r
-       \r
-       <title>External Link</title> \r
-       <desc>External Link</desc> \r
-       \r
-       <!--\r
-               @author         Harald Szekely \r
-               @copyright      2011 WoltLab GmbH \r
-               @license        GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> \r
-       --> \r
-       \r
-       <defs>\r
-               \r
-       </defs>\r
-       \r
-       <g id="IconExternalLink">\r
-               <g class="Lower">\r
-                       <path id="LargeSquare1" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" d="M4.4545898,3\r
-                               C4.2045898,3,4,3.2045898,4,3.4545898v9.0913086C4,12.7958984,4.2045898,13,4.4545898,13h9.0913086\r
-                               C13.7958984,13,14,12.7958984,14,12.5458984V3.4545898C14,3.2045898,13.7958984,3,13.5458984,3H4.4545898z M13,11.5146484\r
-                               C13,11.7822266,12.7822266,12,12.5146484,12H5.484375C5.2182617,12,5,11.7822266,5,11.5146484V4.484375\r
-                               C5,4.2182617,5.2182617,4,5.484375,4h7.0302734C12.7822266,4,13,4.2182617,13,4.484375V11.5146484z"/>\r
-                       <path id="SmallSquare1" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" d="M9,13.5\r
-                               C9,13.7753906,8.7749023,14,8.5,14h-5C3.2250977,14,3,13.7753906,3,13.5v-5C3,8.2246094,3.2250977,8,3.5,8V7h-1\r
-                               C2.2250977,7,2,7.2250977,2,7.5v7C2,14.7753906,2.2250977,15,2.5,15h7c0.2753906,0,0.5-0.2246094,0.5-0.5v-1H9z"/>\r
-               </g>\r
-               <g class="Upper">\r
-                       <path id="LargeSquare2" style="fill-rule: evenodd; clip-rule: evenodd; fill: #369;" d="M4.4545898,2\r
-                               C4.2045898,2,4,2.2045898,4,2.4545898v9.0913086C4,11.7958984,4.2045898,12,4.4545898,12h9.0913086\r
-                               C13.7958984,12,14,11.7958984,14,11.5458984V2.4545898C14,2.2045898,13.7958984,2,13.5458984,2H4.4545898z M13,10.5146484\r
-                               C13,10.7822266,12.7822266,11,12.5146484,11H5.484375C5.2182617,11,5,10.7822266,5,10.5146484V3.484375\r
-                               C5,3.2182617,5.2182617,3,5.484375,3h7.0302734C12.7822266,3,13,3.2182617,13,3.484375V10.5146484z"/>\r
-                       <path id="SmallSquare2" style="fill-rule: evenodd; clip-rule: evenodd; fill: #369;" d="M9,12.5C9,12.7753906,8.7749023,13,8.5,13\r
-                               h-5C3.2250977,13,3,12.7753906,3,12.5v-5C3,7.2250977,3.2250977,7,3.5,7V6h-1C2.2250977,6,2,6.2250977,2,6.5v7\r
-                               C2,13.7753906,2.2250977,14,2.5,14h7c0.2753906,0,0.5-0.2246094,0.5-0.5v-1H9z"/>\r
-               </g>\r
-       </g>\r
-</svg>\r
diff --git a/wcfsetup/install/files/icon/externalURL.svg b/wcfsetup/install/files/icon/externalURL.svg
new file mode 100644 (file)
index 0000000..02040db
--- /dev/null
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>\r
+<!--<?xml-stylesheet type="text/css" href="svg.css"?>-->\r
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" xml:space="preserve">\r
+       \r
+       <title>External Link</title> \r
+       <desc>External Link</desc> \r
+       \r
+       <!--\r
+               @author         Harald Szekely \r
+               @copyright      2011 WoltLab GmbH \r
+               @license        GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> \r
+       --> \r
+       \r
+       <defs>\r
+               \r
+       </defs>\r
+       \r
+       <g id="IconExternalLink">\r
+               <g class="Lower">\r
+                       <path id="LargeSquare1" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" d="M4.4545898,3\r
+                               C4.2045898,3,4,3.2045898,4,3.4545898v9.0913086C4,12.7958984,4.2045898,13,4.4545898,13h9.0913086\r
+                               C13.7958984,13,14,12.7958984,14,12.5458984V3.4545898C14,3.2045898,13.7958984,3,13.5458984,3H4.4545898z M13,11.5146484\r
+                               C13,11.7822266,12.7822266,12,12.5146484,12H5.484375C5.2182617,12,5,11.7822266,5,11.5146484V4.484375\r
+                               C5,4.2182617,5.2182617,4,5.484375,4h7.0302734C12.7822266,4,13,4.2182617,13,4.484375V11.5146484z"/>\r
+                       <path id="SmallSquare1" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" d="M9,13.5\r
+                               C9,13.7753906,8.7749023,14,8.5,14h-5C3.2250977,14,3,13.7753906,3,13.5v-5C3,8.2246094,3.2250977,8,3.5,8V7h-1\r
+                               C2.2250977,7,2,7.2250977,2,7.5v7C2,14.7753906,2.2250977,15,2.5,15h7c0.2753906,0,0.5-0.2246094,0.5-0.5v-1H9z"/>\r
+               </g>\r
+               <g class="Upper">\r
+                       <path id="LargeSquare2" style="fill-rule: evenodd; clip-rule: evenodd; fill: #369;" d="M4.4545898,2\r
+                               C4.2045898,2,4,2.2045898,4,2.4545898v9.0913086C4,11.7958984,4.2045898,12,4.4545898,12h9.0913086\r
+                               C13.7958984,12,14,11.7958984,14,11.5458984V2.4545898C14,2.2045898,13.7958984,2,13.5458984,2H4.4545898z M13,10.5146484\r
+                               C13,10.7822266,12.7822266,11,12.5146484,11H5.484375C5.2182617,11,5,10.7822266,5,10.5146484V3.484375\r
+                               C5,3.2182617,5.2182617,3,5.484375,3h7.0302734C12.7822266,3,13,3.2182617,13,3.484375V10.5146484z"/>\r
+                       <path id="SmallSquare2" style="fill-rule: evenodd; clip-rule: evenodd; fill: #369;" d="M9,12.5C9,12.7753906,8.7749023,13,8.5,13\r
+                               h-5C3.2250977,13,3,12.7753906,3,12.5v-5C3,7.2250977,3.2250977,7,3.5,7V6h-1C2.2250977,6,2,6.2250977,2,6.5v7\r
+                               C2,13.7753906,2.2250977,14,2.5,14h7c0.2753906,0,0.5-0.2246094,0.5-0.5v-1H9z"/>\r
+               </g>\r
+       </g>\r
+</svg>\r