Skip to content
This repository was archived by the owner on May 28, 2021. It is now read-only.

Commit eae9119

Browse files
author
Jens Krumsieck
committed
improve catlist
1 parent 94d9385 commit eae9119

File tree

3 files changed

+128
-107
lines changed

3 files changed

+128
-107
lines changed

‎files/lib/page/CategoryListPage.class.php‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ public function readData() {
3737
parent::readData();
3838
$categoryTree = new LinklistCategoryNodeTree($this->objectTypeName);
3939
$this->categoryList = $categoryTree->getIterator();
40-
$this->categoryList->setMaxDepth(0);
4140
$this->stats = array_merge(LinklistStatsCacheBuilder::getInstance()->getData(),
4241
UserStatsCacheBuilder::getInstance()->getData());
4342

‎files/style/linklist.less‎

Lines changed: 91 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,97 @@
1+
/* ### board list ### */
12
.linklistCategoryList {
2-
margin-top: 14px;
3-
}
4-
.linklistCategoryList > li.tabularBox{
5-
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
6-
}
7-
.linklistCategoryList .linklistNodeTop {
8-
margin-top: 14px;
9-
}
10-
.linklistCategoryList .linklistCategoryContainer {
11-
position: relative;
12-
}
13-
.linklistCategoryList .linklistCategoryNode1 {
14-
background-color: @wcfContainerBackgroundColor;
15-
}
16-
.linklistCategoryList .linklistCategoryNode2 {
17-
background-color: @wcfContainerAccentBackgroundColor;
18-
}
19-
.linklistCategoryList .linklistCategory {
20-
padding: 7px 51% 7px 7px;
21-
}
22-
.linklistCategoryList .linklistCategory:hover {
23-
background-color: @wcfContainerHoverBackgroundColor;
24-
}
3+
.categoryDepth2 {
4+
&.linklistCategoryContainer > .linklistCategory {
5+
padding-left: 43px;
6+
}
7+
8+
header {
9+
padding-left: 43px;
10+
}
11+
}
12+
13+
.categoryDepth3 {
14+
&.linklistCategoryContainer > .linklistCategory {
15+
padding-left: 79px;
16+
}
17+
18+
header {
19+
padding-left: 79px;
20+
}
21+
}
22+
23+
.linklistCategory {
24+
.categoryDepth2{
25+
&.linklistCategoryContainer > .linklistCategory {
26+
padding-left: 7px;
27+
}
28+
}
29+
30+
.categoryDepth3 {
31+
&.linklistCategoryContainer > .linklistCategory {
32+
padding-left: 43px;
33+
}
34+
}
35+
}
36+
37+
.tabularBox:not(.categoryDepth1) {
38+
border-width: 1px 0 0;
39+
}
40+
41+
.linkStats {
42+
left: 49%;
43+
margin-top: 0;
44+
position: absolute;
45+
top: @wcfGapMedium;
46+
width: 16%;
47+
48+
> dl {
49+
> dt {
50+
line-height: @wcfBaseLineHeight;
51+
width: 48%;
52+
}
53+
54+
> dd {
55+
font-weight: normal;
56+
font-size: @wcfSmallFontSize;
57+
width: 50%;
58+
}
59+
}
60+
}
61+
2562

63+
.linklistCategoryContainer {
64+
position: relative;
65+
}
2666

27-
.linklistCategoryList li:last-child > div {
28-
border-bottom-left-radius: @wcfContainerBorderRadius;
29-
border-bottom-right-radius: @wcfContainerBorderRadius;
30-
}
31-
.linklistCategoryList .subCategory {
32-
margin-top: 7px;
33-
}
34-
.linklistCategoryList .subCategory li {
35-
display:inline-block;
36-
}
37-
.linklistCategoryList .linklistCategoryDescription {
38-
font-size: 90%;
67+
.categoryDepth1 {
68+
margin-top: @wcfGapMedium;
69+
}
70+
71+
.linklistCategory {
72+
min-height: 44px;
73+
padding: @wcfGapSmall;
74+
padding-right: 51%;
75+
76+
.transition(background, .1s);
77+
78+
&:hover {
79+
background-color: @wcfContainerHoverBackgroundColor;
80+
}
81+
}
82+
83+
.linklistCategoryNode1 {
84+
background-color: @wcfContainerBackgroundColor;
85+
}
86+
87+
.linklistCategoryNode2 {
88+
background-color: @wcfContainerAccentBackgroundColor;
89+
}
90+
91+
92+
.icon {
93+
color: @wcfLinkColor;
94+
}
3995
}
4096

4197

‎templates/categoryList.tpl‎

Lines changed: 37 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,52 @@
1-
<div>
2-
<ul class="linklistCategoryList">
3-
{foreach from=$categoryList item=categoryItem}
4-
{if $categoryItem->isMainCategory()}
5-
<li class="linklistCategoryContainer tabularBox tabularBoxTitle marginTop">
6-
<header>
7-
<h2>
8-
<a href="{link application='linklist' controller='Category' id=$categoryItem->categoryID title=$categoryItem->getTitle()|language}{/link}">{$categoryItem->getTitle()}</a>
9-
</h2>
10-
</header>
11-
{if $categoryItem->hasChildren()}
12-
<ul>
13-
{foreach from=$categoryItem->getChildCategories() item=subCategoryItem}
14-
<li class="linklistCategoryContainer" data-category-id="{@$subCategoryItem->categoryID}">
15-
<div class="linklistCategoryNode1 linklistCategory box32">
16-
<span class="icon icon32 icon-globe"></span>
17-
<div>
18-
<div class="containerHeadline">
19-
<h3>
20-
<a href="{link application='linklist' controller='Category' id=$subCategoryItem->categoryID title=$subCategoryItem->getTitle()|language}{/link}">{$subCategoryItem->getTitle()}</a>
21-
</h3>
22-
{hascontent}
23-
<span class="linklistCategoryDescription">
24-
{content}{$subCategoryItem->description|language}{/content}
25-
</span>
26-
{/hascontent}
1+
<ul class="linklistCategoryList" data-object-id="0">
272

28-
29-
</div>
30-
<div class="linkStats">
31-
<dl class="statsDataList plain">
32-
<dt>{lang}linklist.links.list{/lang}</dt>
33-
<dd>{$subCategoryItem->getLinks()}</dd>
34-
<dt>{lang}linklist.links.visits{/lang}</dt>
35-
<dd>{$subCategoryItem->getVisits()}</dd>
36-
</dl>
37-
</div>
38-
</div>
39-
</div>
40-
</li>
41-
{/foreach}
42-
</ul>
43-
{/if}
44-
</li>
3+
{assign var=oldDepth value=0}
4+
{foreach from=$categoryList item=category}
5+
{section name=i loop=$oldDepth-$categoryList->getDepth()}</ul></li>{/section}
6+
<li data-object-id="{$category->categoryID}" class="linklistCategoryContainer {if $category->isMainCategory}tabularBox tabularBoxTitle {else}linklistCategoryContainer {if $categoryList->getDepth() == 0}container{/if}{/if} categoryDepth{$categoryList->getDepth()+1}">
7+
{if $category->isMainCategory}
8+
<header>
9+
<h2>
10+
<a href="{link application='linklist' controller='Category' id=$category->categoryID title=$category->getTitle()|language}{/link}">{$category->getTitle()}</a>
11+
</h2>
12+
</header>
4513
{else}
46-
<li class="linklistCategoryContainer container linklistNodeTop" data-category-id="{@$categoryItem->categoryID}">
47-
<div class="linklistCategoryNode1 linklistCategory box32">
14+
{cycle assign=alternate name=alternate values='linklistCategoryNode1,linklistCategoryNode2' print=false}
15+
{if $categoryList->getDepth()+1 == 1}
16+
{cycle assign=alternate name=alternate reset=true print=false}
17+
{/if}
18+
<div class="linklistCategory box32 {@$alternate}">
4819
<span class="icon icon32 icon-globe"></span>
4920
<div>
5021
<div class="containerHeadline">
5122
<h3>
52-
<a href="{link application='linklist' controller='Category' id=$categoryItem->categoryID title=$categoryItem->getTitle()|language}{/link}">{$categoryItem->getTitle()}</a>
23+
<a href="{link application='linklist' controller='Category' id=$category->categoryID title=$category->getTitle()|language}{/link}">{$category->getTitle()}</a>
5324
</h3>
5425
{hascontent}
5526
<span class="linklistCategoryDescription">
56-
{content}{$categoryItem->description|language}{/content}
27+
{content}{$category->description|language}{/content}
5728
</span>
5829
{/hascontent}
59-
60-
{if $categoryItem->hasChildren()}
61-
<ul class="subCategory">
62-
{foreach from=$categoryItem->getChildCategories() item=subCategoryItem}
63-
<li data-category-id="{@$subCategoryItem->categoryID}">
64-
<span class="icon icon16 icon-globe"></span>
65-
<a href="{link application='linklist' controller='Category' id=$subCategoryItem->categoryID title=$subCategoryItem->title|language}{/link}">{$subCategoryItem->title|language}</a>
66-
67-
</li>
68-
{/foreach}
69-
</ul>
70-
{/if}
7130
</div>
72-
<div class="linkStats">
73-
<dl class="statsDataList plain">
74-
<dt>{lang}linklist.links.list{/lang}</dt>
75-
<dd>{$categoryItem->getLinks()}</dd>
76-
<dt>{lang}linklist.links.visits{/lang}</dt>
77-
<dd>{$categoryItem->getVisits()}</dd>
78-
</dl>
79-
</div>
31+
<div class="linkStats">
32+
<dl class="statsDataList plain">
33+
<dt>{lang}linklist.links.list{/lang}</dt>
34+
<dd>{$category->getLinks()}</dd>
35+
<dt>{lang}linklist.links.visits{/lang}</dt>
36+
<dd>{$category->getVisits()}</dd>
37+
</dl>
38+
</div>
8039
</div>
8140
</div>
82-
</li>
8341
{/if}
84-
{/foreach}
85-
</ul>
86-
</div>
42+
<!--children-->
43+
<ul data-object-id="{@$category->categoryID}">
44+
{if !$categoryList->current()->hasChildren()}
45+
</ul>
46+
</li>
47+
{/if}
48+
{assign var=oldDepth value=$categoryList->getDepth()}
49+
{/foreach}
50+
51+
{section name=i loop=$oldDepth}</ul></li>{/section}
52+
</ul>

0 commit comments

Comments
 (0)