Layout (rudimentary) for editing categories.

include/admin/tpl/category.inc.tpl

@@ -50,69 +50,75 @@
     {/if}
         <form id="serendipity_category" method="POST" name="serendipityCategory">
             {$formToken}
-            <div class="form_field">
+
-                <label for="category_name">{$CONST.NAME}</label>
+            <div class="clearfix">
-                <input id="category_name" name="serendipity[cat][name]" type="text" value="{$this_cat.category_name|default:""|escape:"html"}">
+                <div class="form_field">
+                    <label for="category_name">{$CONST.NAME}</label>
+                    <input id="category_name" name="serendipity[cat][name]" type="text" value="{$this_cat.category_name|default:""|escape:"html"}">
+                </div>
+
+                <div class="form_field">
+                    <label for="category_description">{$CONST.DESCRIPTION}</label>
+                    <input id="category_description" name="serendipity[cat][description]" type="text" value="{$this_cat.category_description|default:""|escape:"html"}">
+                </div>
+
+                <div class="form_select">
+                    <label for="parent_cat">{$CONST.PARENT_CATEGORY}</label>
+                    <select id="parent_cat" name="serendipity[cat][parent_cat]">
+                        <option value="0"{if $cid == 0} selected{/if}>{$CONST.NO_CATEGORY}</option>
+                    {foreach $categories as $cat}
+                        {if $cat.categoryid == $cid}{continue}{/if}
+                        <option value="{$cat.categoryid}"{if $this_cat.parentid == $cat.categoryid} selected{/if}>{for $i=1 to $cat.depth}&nbsp{/for} {$cat.category_name}</option>
+                    {/foreach}
+                    </select>
+                </div>
             </div>
 
-            <div class="form_field">
+            <div class="clearfix">
-                <label for="category_description">{$CONST.DESCRIPTION}</label>
+                <div class="form_field">
-                <input id="category_description" name="serendipity[cat][description]" type="text" value="{$this_cat.category_description|default:""|escape:"html"}">
+                    <label for="category_icon">{$CONST.IMAGE}</label>
-            </div>
+                    {* TODO: this should probably become/fallback to input[type=file] *}
+                    <input id="category_icon" name="serendipity[cat][icon]" type="text" value="{$this_cat.category_icon|default:""|escape:"html"}" onchange="document.getElementById('imagepreview').src = this.value; document.getElementById('imagepreview').style.display = '';">
+                    <script>
+                        var category_icon = document.getElementById('category_icon');
+                        var imgBtn        = document.createElement('div');
+                        imgBtn.id         = "insert_image";
+                        imgBtn.innerHTML  = '<input type="button" name="insImage" value="{$CONST.IMAGE}" onclick="window.open(\'serendipity_admin_image_selector.php?serendipity[htmltarget]=category_icon&amp;serendipity[filename_only]=true\', \'ImageSel\', \'width=800,height=600,toolbar=no,scrollbars=1,scrollbars,resize=1,resizable=1\');">';
+                        category_icon.parentNode.insertBefore(imgBtn, category_icon.nextSibling);
+                    </script>
+                    <!-- noscript>FIXXME: Emit a warning if JS is disabled</noscript -->
+                    <figure id="preview">
+                        <figcaption>{$CONST.PREVIEW}</figcaption>
+                        <img id="imagepreview" src="{$this_cat.category_icon|default:""|escape:"html"}" alt="">
+                    </figure>
+                </div>
 
-            <div class="form_field">
+                <div class="form_multiselect">
-                <label for="category_icon">{$CONST.IMAGE}</label>
+                    <label for="read_authors">{$CONST.PERM_READ}</label>
-                {* TODO: this should probably become/fallback to input[type=file] *}
+                    <select id="read_authors" size="6" multiple name="serendipity[cat][read_authors][]">
-                <input id="category_icon" name="serendipity[cat][icon]" type="text" value="{$this_cat.category_icon|default:""|escape:"html"}" onchange="document.getElementById('imagepreview').src = this.value; document.getElementById('imagepreview').style.display = '';">
+                        <option value="0"{if $selectAllReadAuthors} selected{/if}>{$CONST.ALL_AUTHORS}</option>
-                <script>
+                    {foreach $groups as $group}
-                    var category_icon = document.getElementById('category_icon');
+                        <option value="{$group.confkey}"{if isset($read_groups.{$group.confkey})} selected{/if} >{$group.confvalue|escape:"html"}</option>
-                    var imgBtn        = document.createElement('div');
+                    {/foreach}
-                    imgBtn.id         = "insert_image";
+                    </select>
-                    imgBtn.innerHTML  = '<input type="button" name="insImage" value="{$CONST.IMAGE}" onclick="window.open(\'serendipity_admin_image_selector.php?serendipity[htmltarget]=category_icon&amp;serendipity[filename_only]=true\', \'ImageSel\', \'width=800,height=600,toolbar=no,scrollbars=1,scrollbars,resize=1,resizable=1\');">';
+                </div>
-                    category_icon.parentNode.insertBefore(imgBtn, category_icon.nextSibling);
-                </script>
-                <!-- noscript>FIXXME: Emit a warning if JS is disabled</noscript -->
-            </div>
 
-            <figure id="preview">
+                <div class="form_multiselect">
-                <figcaption>{$CONST.PREVIEW}</figcaption>
+                    <label for="write_authors">{$CONST.PERM_WRITE}</label>
-                <img id="imagepreview" src="{$this_cat.category_icon|default:""|escape:"html"}" alt="">
+                    <select id="write_authors"size="6" multiple name="serendipity[cat][write_authors][]">
-            </figure>
+                        <option value="0"{if $selectAllReadAuthors} selected{/if}>{$CONST.ALL_AUTHORS}</option>
-
+                    {foreach $groups as $group}
-            <div class="form_multiselect">
+                        <option value="{$group.confkey}"{if isset($read_groups.{$group.confkey})} selected{/if}>{$group.confvalue|escape:"html"}</option>
-                <label for="read_authors">{$CONST.PERM_READ}</label>
+                    {/foreach}
-                <select id="read_authors" size="6" multiple name="serendipity[cat][read_authors][]">
+                    </select>
-                    <option value="0"{if $selectAllReadAuthors} selected{/if}>{$CONST.ALL_AUTHORS}</option>
+                </div>
-                {foreach $groups as $group}
-                    <option value="{$group.confkey}"{if isset($read_groups.{$group.confkey})} selected{/if} >{$group.confvalue|escape:"html"}</option>
-                {/foreach}
-                </select>
-            </div>
-
-            <div class="form_multiselect">
-                <label for="write_authors">{$CONST.PERM_WRITE}</label>
-                <select id="write_authors"size="6" multiple name="serendipity[cat][write_authors][]">
-                    <option value="0"{if $selectAllReadAuthors} selected{/if}>{$CONST.ALL_AUTHORS}</option>
-                {foreach $groups as $group}
-                    <option value="{$group.confkey}"{if isset($read_groups.{$group.confkey})} selected{/if}>{$group.confvalue|escape:"html"}</option>
-                {/foreach}
-                </select>
-            </div>
-
-            <div class="form_select">
-                <label for="parent_cat">{$CONST.PARENT_CATEGORY}</label>
-                <select id="parent_cat" name="serendipity[cat][parent_cat]">
-                    <option value="0"{if $cid == 0} selected{/if}>{$CONST.NO_CATEGORY}</option>
-                {foreach $categories as $cat}
-                    {if $cat.categoryid == $cid}{continue}{/if}
-                    <option value="{$cat.categoryid}"{if $this_cat.parentid == $cat.categoryid} selected{/if}>{for $i=1 to $cat.depth}&nbsp{/for} {$cat.category_name}</option>
-                {/foreach}
-                </select>
             </div>
 
             <fieldset>
                 <legend><span>{$CONST.CATEGORY_HIDE_SUB}</span></legend>
-                <p>{$CONST.CATEGORY_HIDE_SUB_DESC}</p>
+
+                <span class="block_level">{$CONST.CATEGORY_HIDE_SUB_DESC}</span>
+
                 <div class="clearfix">
                     <div class="form_radio">
                         <input id="hide_sub_yes" name="serendipity[cat][hide_sub]" type="radio" value="1"{if $this_cat.hide_sub== 1} checked="checked"{/if}>
@@ -125,7 +131,8 @@
                     </div>
                 </div>
             </fieldset>
-            <input name="SAVE" type="submit" value="{$save}">
+
+            <input class="standalone" name="SAVE" type="submit" value="{$save}">
         </form>
         <script src="serendipity_editor.js"></script>
 {/if}
@@ -146,7 +153,7 @@
                         <span class="category_author">{if $category.authorid == 0}{$CONST.ALL_AUTHORS}{else}{$category.realname|escape:"html"}{/if}</span>
                     </div>
                 </details>
-                
+
                 <ul class="plainList edit_actions">
                     <li><a class="icon_link" href="?serendipity[adminModule]=category&amp;serendipity[adminAction]=edit&amp;serendipity[cid]={$category.categoryid}" title="{$CONST.EDIT}"><span class="icon-edit"></span><span class="visuallyhidden"> {$CONST.EDIT}</span></a></li>
                     <li><a class="icon_link" href="?serendipity[adminModule]=category&amp;serendipity[adminAction]=delete&amp;serendipity[cid]={$category.categoryid}" title="{$CONST.DELETE}"><span class="icon-trash"></span><span class="visuallyhidden"> {$CONST.DELETE}</span></a></li>

templates/2k11/admin/style.css

@@ -885,11 +885,17 @@ summary { cursor: pointer; }
 
 #sort_entries .form_select label,
 #filter_entries .form_select label,
-#filter_entries .form_field label {
+#filter_entries .form_field label,
+#serendipity_category label {
     display: inline-block;
     width: 20%;
 }
 
+#serendipity_category .form_multiselect label {
+    display: block;
+    width: auto;
+}
+
 #sort_entries .form_select select,
 #filter_entries .form_select select,
 #filter_entries .form_field input { width: 79%; }
@@ -1038,14 +1044,16 @@ summary { cursor: pointer; }
     #sort_entries .form_select label,
     #filter_entries .form_select label,
     #filter_entries .form_field label,
-    #filter_comments label {
+    #filter_comments label,
+    #serendipity_category label {
         display: block;
         width: auto;
     }
 
     #edit_entry_metadata>div,
     #sort_entries .form_select,
-    #filter_comments .clearfix>div {
+    #filter_comments .clearfix>div,
+    #serendipity_category>.clearfix>div {
         float: left;
         width: 33% ;
     }