Updated style list and preview image dimensions
authorAlexander Ebert <ebert@woltlab.com>
Fri, 2 Nov 2012 22:26:37 +0000 (23:26 +0100)
committerAlexander Ebert <ebert@woltlab.com>
Fri, 2 Nov 2012 22:26:37 +0000 (23:26 +0100)
acptemplates/styleList.tpl
files/style/styleEditor.less
language/de.xml

index bb6fd2f6ee82f61e712d1c5235b855354f8fa38c..cbc66b91633941e92bc41210dd0f83cc441d2978 100644 (file)
        <ol class="containerList styleList">
                {foreach from=$objects item=style}
                        <li>
-                               <div class="previewImage framed"><img src="{@$style->getPreviewImage()}" alt="" /></div>
-                               <div class="styleInformation">
-                                       <hgroup class="containerHeadline">
-                                               <h1><a href="{link controller='StyleEdit' id=$style->styleID}{/link}">{$style->styleName}</a></h1>
-                                               {if $style->styleDescription}<h2>{$style->styleDescription}</h2>{/if}
-                                       </hgroup>
-                                       <ul class="buttonList" data-style-id="{@$style->styleID}">
-                                               <li><a href="{link controller='StyleEdit' id=$style->styleID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><img src="{@$__wcf->getPath()}icon/edit.svg" class="icon16" alt="" /></a></li>
-                                               {if !$style->isDefault}
-                                                       <li><img src="{@$__wcf->getPath()}icon/{if $style->disabled}disabled{else}enabled{/if}.svg" title="{lang}wcf.global.button.{if $style->disabled}enable{else}disable{/if}{/lang}" alt="" class="icon16 jsToggleButton jsTooltip" data-object-id="{@$style->styleID}" /></li>
-                                                       <li><a title="{lang}wcf.acp.style.button.setAsDefault{/lang}" class="jsSetAsDefault jsTooltip"><img src="{@$__wcf->getPath()}icon/default.svg" class="icon16 jsTooltip" alt="" /></a></li>
-                                                       <li><a title="{lang}wcf.global.button.delete{/lang}" class="jsDelete jsTooltip" data-confirm-message="{lang}wcf.acp.style.delete.confirmMessage{/lang}"><img src="{@$__wcf->getPath()}icon/delete.svg" class="icon16" alt="" /></a></li>
-                                               {/if}
-                                       </ul>
-                                       <dl class="plain inlineDataList">
-                                               <dt>{lang}wcf.acp.style.users{/lang}</dt>
-                                               <dd>{#$style->users}</dd>
-                                       </dl>
-                                       <dl class="plain inlineDataList">
-                                               <dt>{lang}wcf.acp.style.styleVersion{/lang}</dt>
-                                               <dd>{$style->styleVersion} ({$style->styleDate})</dd>
-                                       </dl>
-                                       <dl class="plain inlineDataList">
-                                               <dt>{lang}wcf.acp.style.authorName{/lang}</dt>
-                                               <dd>{if $style->authorURL}<a href="{@$__wcf->getPath()}acp/dereferrer.php?url={$style->authorURL}">{$style->authorName}</a>{else}{$style->authorName}{/if}</dd>
-                                       </dl>
+                               <div class="box64">
+                                       <span class="framed"><img src="{@$style->getPreviewImage()}" alt="" /></span>
+                                       <div class="details">
+                                               <hgroup class="containerHeadline">
+                                                       <h1><a href="{link controller='StyleEdit' id=$style->styleID}{/link}">{$style->styleName}</a></h1>
+                                                       {if $style->styleDescription}<h2>{$style->styleDescription}</h2>{/if}
+                                               </hgroup>
+                                               <ul class="buttonList" data-style-id="{@$style->styleID}">
+                                                       <li><a href="{link controller='StyleEdit' id=$style->styleID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><img src="{@$__wcf->getPath()}icon/edit.svg" class="icon16" alt="" /></a></li>
+                                                       {if !$style->isDefault}
+                                                               <li><img src="{@$__wcf->getPath()}icon/{if $style->disabled}disabled{else}enabled{/if}.svg" title="{lang}wcf.global.button.{if $style->disabled}enable{else}disable{/if}{/lang}" alt="" class="icon16 jsToggleButton jsTooltip" data-object-id="{@$style->styleID}" /></li>
+                                                               <li><a title="{lang}wcf.acp.style.button.setAsDefault{/lang}" class="jsSetAsDefault jsTooltip"><img src="{@$__wcf->getPath()}icon/default.svg" class="icon16 jsTooltip" alt="" /></a></li>
+                                                               <li><a title="{lang}wcf.global.button.delete{/lang}" class="jsDelete jsTooltip" data-confirm-message="{lang}wcf.acp.style.delete.confirmMessage{/lang}"><img src="{@$__wcf->getPath()}icon/delete.svg" class="icon16" alt="" /></a></li>
+                                                       {/if}
+                                               </ul>
+                                               <dl class="plain inlineDataList">
+                                                       <dt>{lang}wcf.acp.style.users{/lang}</dt>
+                                                       <dd>{#$style->users}</dd>
+                                               </dl>
+                                               <dl class="plain inlineDataList">
+                                                       <dt>{lang}wcf.acp.style.styleVersion{/lang}</dt>
+                                                       <dd>{$style->styleVersion} ({$style->styleDate})</dd>
+                                               </dl>
+                                               <dl class="plain inlineDataList">
+                                                       <dt>{lang}wcf.acp.style.authorName{/lang}</dt>
+                                                       <dd>{if $style->authorURL}<a href="{@$__wcf->getPath()}acp/dereferrer.php?url={$style->authorURL}">{$style->authorName}</a>{else}{$style->authorName}{/if}</dd>
+                                               </dl>
+                                       </div>
                                </div>
                        </li>
                {/foreach}
index 3bfd1decfb36b15094b6abb5de065f3a031cc523..820c8a1b02c1ed03a5345286b62ac1460a366be4 100644 (file)
                display: block;
        }
 }
-
-.styleList > li {
-       min-height: 150px;
-       
-       &:hover > .styleInformation > .buttonList {
-               opacity: 1;
-       }
-       
-       > .previewImage {
-               float: left;
-               text-align: center;
-               width: 230px;
-       }
-       
-       > .styleInformation {
-               margin-left: 250px;
-               position: relative;
-               
-               > .buttonList {
-                       opacity: 0;
-                       position: absolute;
-                       right: 0;
-                       top: 0;
-                       
-                       .transition(opacity, .1s);
-                       
-                       > li:not(:last-child) {
-                               margin-right: 7px;
-                       }
-               }
-       }
-} 
\ No newline at end of file
index 8184842144974a2254b65b5892cc01b191c905f0..eacfc00bfa7b5c67fae9f07fa2d9cc139acb60ba 100644 (file)
@@ -72,7 +72,7 @@
                <item name="wcf.acp.style.iconPath"><![CDATA[Icon-Pfad]]></item>
                <item name="wcf.acp.style.iconPath.description"><![CDATA[Wenn Ihr Stil eigene Icons benötigt, sollten diese in einem Unterordner des Ordners &bdquo;icons&ldquo; ablegen. Geben Sie hier den Pfad zu diesem Ordner an.]]></item>
                <item name="wcf.acp.style.image"><![CDATA[Vorschaubild]]></item>
-               <item name="wcf.acp.style.image.description"><![CDATA[Laden Sie hier ein Vorschaubild dieses Stiles hoch, als Bildformate sind JPG und PNG zulässig. Es wird empfohlen Vorschaubilder immer mit der Größe 225px x 140px anzulegen, größere Grafiken werden automatisch skaliert.]]></item>
+               <item name="wcf.acp.style.image.description"><![CDATA[Laden Sie hier ein Vorschaubild dieses Stiles hoch, als Bildformate sind JPG und PNG zulässig. Es wird empfohlen Vorschaubilder immer mit der Größe 102px × 64px anzulegen, größere Grafiken werden automatisch skaliert.]]></item>
                <item name="wcf.acp.style.imagePath"><![CDATA[Bilder-Pfad]]></item>
                <item name="wcf.acp.style.imagePath.description"><![CDATA[Wenn Ihr Stil eigene Grafiken benötigt, sollten diese in einem Unterordner des Ordners &bdquo;images&ldquo; ablegen. Geben Sie hier den Pfad zu diesem Ordner an.]]></item>
                <item name="wcf.acp.style.license"><![CDATA[Lizenz]]></item>