CSS clean-up and more definition lists
authorLuzifr <szekely@woltlab.com>
Fri, 5 Aug 2011 16:27:04 +0000 (18:27 +0200)
committerLuzifr <szekely@woltlab.com>
Fri, 5 Aug 2011 16:27:11 +0000 (18:27 +0200)
Note: The definition list layout has changed slightly. All files already
changed to definition-lists have to be updated to reflect this changes.

wcfsetup/install/files/acp/style/testing.css
wcfsetup/install/files/acp/templates/optionFieldList.tpl
wcfsetup/install/files/acp/templates/updateServerAdd.tpl

index 37d6b7876c103bbcbe9cec9a84ebd0be480720ff..a3973a060dde8eabbf49765a2e20fea6c3ff2a1c 100644 (file)
@@ -154,7 +154,7 @@ nav.mainMenu ul {
        display: table-row;
 }
 
-nav.mainMenu li {
+nav.mainMenu ul li {
        font-size: 123%;
        font-weight: normal;
        color: #69c;
@@ -177,11 +177,11 @@ nav.mainMenu li {
        transition: all .2s linear;
 }
 
-nav.mainMenu li:hover {
+nav.mainMenu ul li:hover {
        color: #fff;
 }
 
-nav.mainMenu li.activeMenuItem {
+nav.mainMenu ul li.activeMenuItem {
        font-weight: bold;
        color: #369;
        text-shadow: 0 1px 0 #fff;
@@ -391,7 +391,7 @@ footer nav.footerNavigation ul li {
 /* Main Heading */
 
 .mainHeading {
-       margin: 15px 0;
+       margin: 0 0 15px;
        position: relative;
 }
 
@@ -447,7 +447,8 @@ footer nav.footerNavigation ul li {
 fieldset {
        border: 1px solid #ccc;
        border-radius: 7px;
-       margin: 7px 0 7px;
+       background-color: rgba(230, 230, 230, .1);
+       margin: 15px 0;
        padding: 15px;
 }
 
@@ -456,6 +457,10 @@ fieldset legend {
        padding: 0 7px 0;
 }
 
+fieldset legend ~ p {
+       margin-bottom: 14px;
+}
+
 fieldset p.description {
        color: #369;
        font-size: 90%;
@@ -471,39 +476,50 @@ fieldset > ul li {
 
 
 
-/* -- -- -- -- -- Forms -- -- -- -- -- */
-
-/* Globals */
+/* -- -- -- -- -- Tabbed Content -- -- -- -- -- */
 
-label {
-       color: #69c;
+dl {
+       clear: both;
+       margin-bottom: 7px;
 }
 
-/* Structure (deprecated?) */
+dl small {
+       color: #999;
+       font-size: 85%;
+       margin: 3px 0 7px;
+       display: inline-block;
+}
 
-div.formElement {
-       clear: both;
-       margin-bottom: 14px;
+dl.disabled dt {
+       color: #777;
 }
 
-div.formFieldLabel {
+dl dt {
        float: left;
-       padding-top: 5px;
        text-align: right;
        width: 230px;
+       margin-top: 5px; /* not so nice */
 }
 
-div.formField {
+dl dd {
        margin-left: 250px;
 }
 
-div.formFieldDesc {
-       margin: 3px 0 7px 250px;
+
+
+/* -- -- -- -- -- Forms -- -- -- -- -- */
+
+/* Globals */
+
+label {
+       color: #69c;
 }
 
-div.formFieldDesc p {
-       color: #999 !important;
-       font-size: 85%;
+/* Structure (deprecated?) */
+
+div.formElement {
+       clear: both;
+       margin-bottom: 14px;
 }
 
 div.formGroupLabel label {
@@ -590,6 +606,22 @@ select {
        width: 100%;
 }
 
+input.tiny {
+       width: 100px;
+}
+
+input.small {
+       width: 10%;
+}
+
+input.medium {
+       width: 50%;
+}
+
+input.long {
+       width: 95%;
+}
+
 
 
 /* -- -- -- -- -- Large Buttons -- -- -- -- -- */
@@ -1076,47 +1108,6 @@ p.warning {
 }
 
 
-/* -- -- -- -- -- ToDo: Fieldset -- -- -- -- -- */
-
-fieldset {
-       background-color: rgba(230, 230, 230, .1);
-}
-
-fieldset legend ~ p {
-       margin-bottom: 14px;
-}
-
-
-
-/* -- -- -- -- -- Tabbed Content -- -- -- -- -- */
-
-dl {
-       clear: both;
-       margin-bottom: 7px;
-}
-
-dl small {
-       color: #999;
-       font-size: 85%;
-       margin: 3px 0 7px 250px;
-       display: inline-block;
-}
-
-dl.disabled dt {
-       color: #777;
-}
-
-dl dt {
-       float: left;
-       text-align: right;
-       width: 230px;
-       margin-top: 5px; /* not so nice */
-}
-
-dl dd {
-       margin-left: 250px;
-}
-
 
 
 
index 3a415e88f108c68fb70b3e324af0a352ce59bab2..68f865b3c9c0f98cb6e016228f266a955c7a1709 100644 (file)
@@ -7,16 +7,17 @@
        {/if}
        <dl class="{$option->optionName}Input">
                <dt><label for="{$option->optionName}">{lang}{@$langPrefix}{$option->optionName}{/lang}</label></dt>
-               <dd>{@$optionData[html]}</dd>
-               {if $error}
-                       <p class="innerError">
-                               {if $error == 'empty'}
-                                       {lang}wcf.global.error.empty{/lang}
-                               {else}  
-                                       {lang}wcf.user.option.error.{$error}{/lang}
-                               {/if}
-                       </p>
-               {/if}
-               <small>{lang}{@$langPrefix}{$option->optionName}.description{/lang}</small>
+               <dd>{@$optionData[html]}
+                       {if $error}
+                               <small class="innerError">
+                                       {if $error == 'empty'}
+                                               {lang}wcf.global.error.empty{/lang}
+                                       {else}  
+                                               {lang}wcf.user.option.error.{$error}{/lang}
+                                       {/if}
+                               </small>
+                       {/if}
+                       <small>{lang}{@$langPrefix}{$option->optionName}.description{/lang}</small>
+               </dd>
        </dl>   
 {/foreach}
\ No newline at end of file
index 02c923c7ccf633216c1dedba4046ba209b99bed6..d6bf27f91c51aa8aad06ad5c713dd096650f671c 100644 (file)
@@ -24,6 +24,7 @@
                <ul><li><a href="index.php?page=UpdateServerList{@SID_ARG_2ND}" title="{lang}wcf.acp.menu.link.package.server.view{/lang}"><img src="{@RELATIVE_WCF_DIR}icon/updateServerM.png" alt="" /> <span>{lang}wcf.acp.menu.link.package.server.view{/lang}</span></a></li></ul>
        </nav>
 </div>
+
 <form method="post" action="index.php?form=UpdateServer{@$action|ucfirst}{if $packageUpdateServerID|isset}&amp;packageUpdateServerID={@$packageUpdateServerID}{/if}">
        <div class="border content">
                <div class="container-1">
                        <fieldset>
                                <legend>{lang}wcf.acp.updateServer.data{/lang}</legend>
                                
-                               <div id="serverURLDiv" class="formElement{if $errorField == 'serverURL'} formError{/if}">
-                                       <div class="formFieldLabel">
-                                               <label for="serverURL">{lang}wcf.acp.updateServer.serverURL{/lang}</label>
-                                       </div>
-                                       <div class="formField">
-                                               <input type="text" id="serverURL" name="serverURL" value="{$serverURL}" class="inputText" />
+                               <dl id="serverURLDiv"{if $errorField == 'serverURL'} class="formError"{/if}>
+                                       <dt><label for="serverURL">{lang}wcf.acp.updateServer.serverURL{/lang}</label></dt>
+                                       <dd>
+                                               <input type="text" id="serverURL" name="serverURL" value="{$serverURL}" class="long" />
                                                {if $errorField == 'serverURL'}
-                                                       <p class="innerError">
+                                                       <small class="innerError">
                                                                {if $errorType == 'empty'}{lang}wcf.global.error.empty{/lang}{/if}
                                                                {if $errorType == 'notValid'}{lang}wcf.acp.updateServer.serverURL.error.notValid{/lang}{/if}
-                                                       </p>
+                                                       </small>
                                                {/if}
-                                       </div>
-                                       <div id="serverURLHelpMessage" class="formFieldDesc hidden">
-                                               <p>{lang}wcf.acp.updateServer.serverURL.description{/lang}</p>
-                                       </div>
-                               </div>
-                               <script type="text/javascript">//<![CDATA[
-                                       inlineHelp.register('serverURL');
-                               //]]></script>
-                               
-                               <div id="loginUsernameDiv" class="formElement">
-                                       <div class="formFieldLabel">
-                                               <label for="loginUsername">{lang}wcf.acp.updateServer.loginUsername{/lang}</label>
-                                       </div>
-                                       <div class="formField">
-                                               <input type="text" id="loginUsername" name="loginUsername" value="{$loginUsername}" class="inputText" />
-                                       </div>
-                                       <div id="loginUsernameHelpMessage" class="formFieldDesc hidden">
-                                               <p>{lang}wcf.acp.updateServer.loginUsername.description{/lang}</p>
-                                       </div>
-                               </div>
-                               <script type="text/javascript">//<![CDATA[
-                                       inlineHelp.register('loginUsername');
-                               //]]></script>
-                               
-                               <div id="loginPasswordDiv" class="formElement">
-                                       <div class="formFieldLabel">
-                                               <label for="loginPassword">{lang}wcf.acp.updateServer.loginPassword{/lang}</label>
-                                       </div>
-                                       <div class="formField">
-                                               <input type="password" id="loginPassword" name="loginPassword" value="{$loginPassword}" class="inputText" />
-                                       </div>
-                                       <div id="loginPasswordHelpMessage" class="formFieldDesc hidden">
-                                               <p>{lang}wcf.acp.updateServer.loginPassword.description{/lang}</p>
-                                       </div>
-                               </div>
-                               <script type="text/javascript">//<![CDATA[
-                                       inlineHelp.register('loginPassword');
-                               //]]></script>
+                                               <small id="serverURLHelpMessage">{lang}wcf.acp.updateServer.serverURL.description{/lang}</small>
+                                       </dd>
+                               </dl>
+                               <dl id="loginUsernameDiv">
+                                       <dt><label for="loginUsername">{lang}wcf.acp.updateServer.loginUsername{/lang}</label></dt>
+                                       <dd>
+                                               <input type="text" id="loginUsername" name="loginUsername" value="{$loginUsername}" class="long" />
+                                               <small id="loginUsernameHelpMessage">{lang}wcf.acp.updateServer.loginUsername.description{/lang}</small>
+                                       </dd>
+                               </dl>
+                               <dl id="loginPasswordDiv">
+                                       <dt><label for="loginPassword">{lang}wcf.acp.updateServer.loginPassword{/lang}</label></dt>
+                                       <dd>
+                                               <input type="password" id="loginPassword" name="loginPassword" value="{$loginPassword}" class="long" />
+                                               <small id="loginPasswordHelpMessage" class="formFieldDesc hidden"><p>{lang}wcf.acp.updateServer.loginPassword.description{/lang}</p></small>
+                                       </dd>
+                               </dl>
                                
                                {if $additionalFields|isset}{@$additionalFields}{/if}
                        </fieldset>