Properly nested, zebra-striped categories list. (Almost. Best possible solution.)

This commit is contained in:
Matthias Mees 2013-02-08 03:06:08 +01:00
parent f48ef1c9c6
commit f65fe67d86
2 changed files with 29 additions and 20 deletions

View File

@ -139,7 +139,7 @@
{if $view}
<h2>{$CONST.CATEGORY_INDEX}:</h2>
{if is_array($viewCats)}
<ul id="categories" class="plainList zebra_list">
<ul id="categories">
{foreach $viewCategories as $category}
{if ! $category@first}
{if $category.depth > $priorDepth}
@ -160,22 +160,24 @@
{$priorDepth=$category.depth}
<li class="clearfix">
<details class="category_data">
<summary class="category_name{if $category.category_icon} category_hasicon{/if}"><span class="icon-folder-open"></span> {$category.category_name|escape:"html"}</summary>
<li>
<div class="clearfix {cycle values="odd,even"}">
<details class="category_data">
<summary class="category_name{if $category.category_icon} category_hasicon{/if}"><span class="icon-folder-open"></span> {$category.category_name|escape:"html"}</summary>
<div class="category_info clearfix">
{if $category.category_description != ''}
<span class="category_desc">{$category.category_description|escape:"html"}</span>
{/if}
(<span class="category_author">{if $category.authorid == 0}{$CONST.ALL_AUTHORS}{else}{$category.realname|escape:"html"}{/if}</span>)
</div>
</details>
<div class="category_info clearfix">
{if $category.category_description != ''}
<span class="category_desc">{$category.category_description|escape:"html"}</span>
{/if}
(<span class="category_author">{if $category.authorid == 0}{$CONST.ALL_AUTHORS}{else}{$category.realname|escape:"html"}{/if}</span>)
</div>
</details>
<ul class="plainList clearfix edit_actions">
<li><a class="button_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="button_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>
</ul>
<ul class="plainList clearfix edit_actions">
<li><a class="button_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="button_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>
</ul>
</div>
{/foreach}
</li>
{for $i=1 to $priorDepth}
@ -185,5 +187,5 @@
{else}
<span class="msg_notice"><span class="icon-info-circle"></span> {$CONST.NO_CATEGORIES}</span>
{/if}
<a class="button_link icon_link" href="?serendipity[adminModule]=category&serendipity[adminAction]=new">{$CONST.CREATE_NEW_CAT}</a>
<a class="button_link state_submit icon_link" href="?serendipity[adminModule]=category&serendipity[adminAction]=new">{$CONST.CREATE_NEW_CAT}</a>
{/if}

View File

@ -464,6 +464,8 @@ form > a {
margin-bottom: 1.5em;
}
#categories,
#categories ul,
#serendipity_admin_groups ul,
.imageMessage ul {
list-style: none;
@ -1187,11 +1189,15 @@ form > .button_link:first-of-type { margin-top: 0; }
width: 100px;
}
.zebra_list { border-top: 1px solid #aaa; }
.zebra_list,
#categories .odd,
#categories .even { border-top: 1px solid #aaa; }
.zebra_list>li { border-bottom: 1px solid #aaa; }
.zebra_list>li,
#categories { border-bottom: 1px solid #aaa; }
.zebra_list>.odd { background: #eee; }
.zebra_list>.odd,
#categories .odd { background: #eee; }
#entries_list h3,
#serendipity_comments_list h4 {
@ -1200,10 +1206,11 @@ form > .button_link:first-of-type { margin-top: 0; }
}
#entries_list>li,
#categories li,
#serendipity_image_folders li,
#serendipity_comments_list>li { padding: 0 0 0 .4em; }
#categories li > ul { padding: 0 0 0 1em; }
#categories .edit_actions li,
#serendipity_image_folders .edit_actions li { padding: 0; }