subcategory styling

main
psychobunny 10 years ago
parent 202acb61f7
commit 0b72b39955

@ -20,3 +20,10 @@
} }
} }
} }
.subcategory {
> p {
text-transform: uppercase;
color: @gray-light;
}
}

@ -1,11 +1,6 @@
<div class="category"> <div class="category">
<!-- IMPORT partials/breadcrumbs.tpl --> <!-- IMPORT partials/breadcrumbs.tpl -->
<div class="subcategories row">
<!-- BEGIN children -->
<!-- IMPORT partials/category/subcategory.tpl --> <!-- IMPORT partials/category/subcategory.tpl -->
<!-- END children -->
</div>
<!-- IF children.length --><hr /><!-- ENDIF children.length --> <!-- IF children.length --><hr /><!-- ENDIF children.length -->

@ -1,50 +1,59 @@
<div class="{children.class}" data-cid="{children.cid}" data-numRecentReplies="{children.numRecentReplies}"> <div class="subcategory">
<!-- IF children.length --><p>Subcategories</p><!-- ENDIF children.length -->
<ul class="categories" itemscope itemtype="http://www.schema.org/ItemList">
<!-- BEGIN children -->
<li data-cid="{children.cid}" data-numRecentReplies="{children.numRecentReplies}" class="row clearfix">
<meta itemprop="name" content="{children.name}"> <meta itemprop="name" content="{children.name}">
<h4 class="category-title">
<!-- IF !children.link -->
<span class="badge {children.unread-class}">{children.topic_count} </span>
<!-- ENDIF !children.link -->
<div class="col-md-7 col-sm-12 col-xs-12 content">
<div class="icon pull-left" style="{function.generateCategoryBackground}">
<i class="fa fa-fw {children.icon}"></i>
</div>
<h1 class="title pull-left">
<!-- IF children.link --> <!-- IF children.link -->
<a href="{children.link}" itemprop="url" target="_blank"> <a href="{children.link}" itemprop="url" target="_blank">
<!-- ELSE --> <!-- ELSE -->
<a href="{relative_path}/category/{children.slug}" itemprop="url"> <a href="{relative_path}/category/{children.slug}" itemprop="url">
<!-- ENDIF children.link --> <!-- ENDIF children.link -->
{children.name} {children.name}
</a> </a><br />
</h4> <small>{children.description}</small>
</h1>
<!-- IF children.link --> </div>
<a style="color: {children.color};" href="{children.link}" itemprop="url" target="_blank">
<!-- ELSE -->
<a style="color: {children.color};" href="{relative_path}/category/{children.slug}" itemprop="url">
<!-- ENDIF children.link -->
<div
id="category-{children.cid}" class="category-header category-header-image-{children.imageClass}"
title="{children.description}"
style="
<!-- IF children.backgroundImage -->background-image: url({children.backgroundImage});<!-- ENDIF children.backgroundImage -->
<!-- IF children.bgColor -->background-color: {children.bgColor};<!-- ENDIF children.bgColor -->
"
>
<div id="category-{children.cid}" class="category-slider-{children.post_count}">
<!-- IF children.icon -->
<div class="category-box"><i class="fa {children.icon} fa-4x"></i></div>
<!-- ENDIF children.icon -->
<div class="category-box" itemprop="description">{children.description}</div>
<div class="hidden-sm hidden-xs">
<!-- IF !children.link -->
<div class="col-md-1 stats">
<span class="{children.unread-class}">{children.topic_count}</span><br />
<small>Topics</small>
</div>
<div class="col-md-1 stats">
<span class="{children.unread-class}">{children.post_count}</span><br />
<small>Posts</small>
</div>
<div class="col-md-3">
<!-- BEGIN posts --> <!-- BEGIN posts -->
<div class="category-box"> <!-- IF @first -->
<div class="post-preview"> <div class="card" style="border-color: {children.bgColor}">
<img src="{children.posts.user.picture}" class="pull-left" /> <p>
<p class=""><strong>{children.posts.user.username}</strong>: {children.posts.content}</p> <strong>{children.posts.user.username}</strong> <small class="timeago" title="{children.posts.relativeTime}"></small>
</p>
<div class="post-content">
{children.posts.content}
</div> </div>
</div> </div>
<!-- ENDIF @first -->
<!-- END posts --> <!-- END posts -->
<!-- IF children.icon -->
<div class="category-box"><i class="fa {children.icon} fa-4x"></i></div>
<!-- ENDIF children.icon -->
</div> </div>
<!-- ELSE -->
<div class="col-md-4">
</div>
<!-- ENDIF !children.link -->
</div> </div>
</a> </li>
<!-- END children -->
</ul>
</div> </div>
Loading…
Cancel
Save