styled the categories (home) page
parent
0fceba09a5
commit
6622a827d4
@ -1,26 +1,66 @@
|
|||||||
.categories {
|
.categories {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
}
|
> li {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
.motd {
|
.icon {
|
||||||
margin-bottom: 1em;
|
font-size: 17px;
|
||||||
|
padding: 14px;
|
||||||
|
border-radius: 50%;
|
||||||
|
line-height: 20px;
|
||||||
|
margin-right: 15px;
|
||||||
|
min-width: 46px;
|
||||||
|
min-height: 46px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
&.default {
|
h1 {
|
||||||
|
font-size: 22px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
padding: 2em;
|
.stats {
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
h1 {
|
li {
|
||||||
margin-top: 0;
|
font-size: 20px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
small {
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: @gray-light;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
.card {
|
||||||
margin-top: 1em;
|
border-left: 4px solid #ccc;
|
||||||
}
|
padding-left: 20px;
|
||||||
|
text-align: left;
|
||||||
|
height: 53px;
|
||||||
|
margin-top: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
.maintenance {
|
p {
|
||||||
.well {
|
font-size: 12px;
|
||||||
white-space: pre-line;
|
margin: 0;
|
||||||
|
|
||||||
|
.emoji {
|
||||||
|
max-width: 12px;
|
||||||
|
max-height: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -1,56 +1,40 @@
|
|||||||
<div class="row categories" itemscope itemtype="http://www.schema.org/ItemList">
|
<ul class="categories" itemscope itemtype="http://www.schema.org/ItemList">
|
||||||
<div class="col-sm-12">
|
<!-- BEGIN categories -->
|
||||||
<!-- BEGIN categories -->
|
<li data-cid="{categories.cid}" data-numRecentReplies="{categories.numRecentReplies}" class="row">
|
||||||
<div class="{categories.class}" data-cid="{categories.cid}" data-numRecentReplies="{categories.numRecentReplies}">
|
<meta itemprop="name" content="{categories.name}">
|
||||||
<meta itemprop="name" content="{categories.name}">
|
|
||||||
<h4 class="category-title">
|
|
||||||
<!-- IF !categories.link -->
|
|
||||||
<span class="badge {categories.unread-class}">{categories.topic_count} </span>
|
|
||||||
<!-- ENDIF !categories.link -->
|
|
||||||
|
|
||||||
<!-- IF categories.link -->
|
<div class="col-xs-7">
|
||||||
<a href="{categories.link}" itemprop="url" target="_blank">
|
<div class="icon pull-left" style="{function.generateCategoryBackground}">
|
||||||
<!-- ELSE -->
|
<i class="fa {categories.icon}"></i>
|
||||||
<a href="{relative_path}/category/{categories.slug}" itemprop="url">
|
</div>
|
||||||
<!-- ENDIF categories.link -->
|
|
||||||
{categories.name}
|
|
||||||
</a>
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<!-- IF categories.link -->
|
<h1 class="title pull-left">
|
||||||
<a style="color: {categories.color};" href="{categories.link}" itemprop="url" target="_blank">
|
<!-- IMPORT partials/categories/link.tpl --><br />
|
||||||
<!-- ELSE -->
|
<small>{categories.description}</small>
|
||||||
<a style="color: {categories.color};" href="{relative_path}/category/{categories.slug}" itemprop="url">
|
</h1>
|
||||||
<!-- ENDIF categories.link -->
|
</div>
|
||||||
<div
|
|
||||||
id="category-{categories.cid}" class="category-header category-header-image-{categories.imageClass}"
|
<!-- IF !categories.link -->
|
||||||
title="{categories.description}"
|
<ul class="stats">
|
||||||
style="
|
<li class="col-xs-1">
|
||||||
<!-- IF categories.backgroundImage -->background-image: url({categories.backgroundImage});<!-- ENDIF categories.backgroundImage -->
|
<span class="{categories.unread-class}">{categories.topic_count}</span><br />
|
||||||
<!-- IF categories.bgColor -->background-color: {categories.bgColor};<!-- ENDIF categories.bgColor -->
|
<small>Topics</small>
|
||||||
"
|
</li>
|
||||||
>
|
<li class="col-xs-1">
|
||||||
<div id="category-{categories.cid}" class="category-slider-{categories.post_count}">
|
<span class="{categories.unread-class}">{categories.post_count}</span><br />
|
||||||
<!-- IF categories.icon -->
|
<small>Posts</small>
|
||||||
<div class="category-box"><i class="fa {categories.icon} fa-4x"></i></div>
|
</li>
|
||||||
<!-- ENDIF categories.icon -->
|
<li class="col-xs-3">
|
||||||
<div class="category-box" itemprop="description">{categories.description}</div>
|
<!-- IMPORT partials/categories/lastpost.tpl -->
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!-- ELSE -->
|
||||||
|
<div class="col-xs-3">
|
||||||
|
|
||||||
<!-- BEGIN posts -->
|
|
||||||
<div class="category-box">
|
|
||||||
<div class="post-preview">
|
|
||||||
<img src="{categories.posts.user.picture}" class="pull-left" />
|
|
||||||
<p class=""><strong>{categories.posts.user.username}</strong>: {categories.posts.content}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- END posts -->
|
|
||||||
<!-- IF categories.icon -->
|
|
||||||
<div class="category-box"><i class="fa {categories.icon} fa-4x"></i></div>
|
|
||||||
<!-- ENDIF categories.icon -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- END categories -->
|
<!-- ENDIF !categories.link -->
|
||||||
</div>
|
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
</li>
|
||||||
|
<!-- END categories -->
|
||||||
</div>
|
</div>
|
@ -0,0 +1,7 @@
|
|||||||
|
<!-- BEGIN posts -->
|
||||||
|
<!-- IF @first -->
|
||||||
|
<div class="card" style="border-color: {categories.bgColor}">
|
||||||
|
<p class=""><strong>{categories.posts.user.username}</strong>: {categories.posts.content}</p>
|
||||||
|
</div>
|
||||||
|
<!-- ENDIF @first -->
|
||||||
|
<!-- END posts -->
|
@ -0,0 +1,7 @@
|
|||||||
|
<!-- IF categories.link -->
|
||||||
|
<a href="{categories.link}" itemprop="url" target="_blank">
|
||||||
|
<!-- ELSE -->
|
||||||
|
<a href="{relative_path}/category/{categories.slug}" itemprop="url">
|
||||||
|
<!-- ENDIF categories.link -->
|
||||||
|
{categories.name}
|
||||||
|
</a>
|
Loading…
Reference in New Issue