styled category view

main
psychobunny 10 years ago
parent b55f5c46bd
commit 9bf5f096ee

@ -1,4 +1,4 @@
.categories {
.categories, .category > ul {
list-style-type: none;
padding: 0;
@ -19,9 +19,22 @@
margin-top: 2px;
}
img {
margin-right: 15px;
width: 46px;
height: 46px;
}
h1 {
font-size: 22px;
margin: 0;
position: absolute;
margin-left: 62px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 42px;
width: 85%;
}
}
@ -79,3 +92,66 @@
}
}
}
.category-header {
width: 100%;
height: 110px;
text-align: center;
margin: 0;
padding-top:25px;
.pointer;
margin-bottom: 10px;
overflow:hidden;
&:hover {
filter: brightness(115%);
-webkit-filter: brightness(115%);
}
.category-box {
height:90px;
.post-preview {
padding-left:10px;
padding-right:10px;
text-align:left;
img {
width:60px;
height:60px;
padding-right:5px;
}
p {
overflow: hidden;
text-overflow:ellipsis;
height:60px;
}
}
}
}
.category-header-image-auto {
-webkit-background-size: auto!important;
-moz-background-size: auto!important;
-o-background-size: auto!important;
background-size: auto!important;
background-position: 0% 0% !important;
}
.category-header-image-cover {
-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
background-size: cover!important;
background-position: center!important;
}
.category-header-image-contain {
-webkit-background-size: contain!important;
-moz-background-size: contain!important;
-o-background-size: contain!important;
background-size: contain!important;
background-position: center!important;
}

@ -1,12 +1,4 @@
.category {
.span9 {
margin-bottom: 50px;
}
.header {
margin-bottom:20px;
}
ul {
li {
list-style: none;
@ -22,173 +14,9 @@
}
}
ul {
padding-left: 0px;
}
.meta {
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.unread {
.topic-title {
font-weight: bold;
}
}
.topic-row {
border-radius: 5px;
padding: 5px 10px 5px 10px;
small {
vertical-align: 2px;
font-size: 14px;
}
h3 {
padding: 0;
margin: 0;
margin-top: 4px;
line-height: 25px;
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden;
a {
width:100%;
display:inline-block;
}
.topic-title {
width: 100%;
font-size: 20px;
}
}
.teaser-pic {
width:20px;
height:20px;
}
.user-img {
width: 50px;
height: 50px;
margin-right:10px;
}
}
.latest-post {
float: right;
padding-top: 2px;
margin-right: 0px;
width: 40%;
.pull-right {
width: 100%;
height: 50px;
line-height: 16px;
margin-left: 1px;
padding: 2px 5px 5px 20px;
border-left: 1px solid #bbb;
img {
display: block;
float: left;
}
p {
display: block;
float: left;
width: 70%;
margin-left: 10px;
overflow: hidden;
max-height: 33px;
margin-bottom: 0px;
}
}
}
}
.category-item {
.select {
line-height: 50px;
font-size: 20px;
}
}
h4.category-title {
width: 100%;
font-weight: 700;
line-height: 21px;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
margin: 0;
}
.category-header {
width: 100%;
height: 110px;
text-align: center;
margin: 0;
padding-top:25px;
.pointer;
margin-bottom: 10px;
overflow:hidden;
&:hover {
filter: brightness(115%);
-webkit-filter: brightness(115%);
}
.category-box {
height:90px;
.post-preview {
padding-left:10px;
padding-right:10px;
text-align:left;
img {
width:60px;
height:60px;
padding-right:5px;
}
p {
overflow: hidden;
text-overflow:ellipsis;
height:60px;
}
}
}
}
.category-header-image-auto {
-webkit-background-size: auto!important;
-moz-background-size: auto!important;
-o-background-size: auto!important;
background-size: auto!important;
background-position: 0% 0% !important;
}
.category-header-image-cover {
-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
background-size: cover!important;
background-position: center!important;
}
.category-header-image-contain {
-webkit-background-size: contain!important;
-moz-background-size: contain!important;
-o-background-size: contain!important;
background-size: contain!important;
background-position: center!important;
}

@ -85,9 +85,9 @@ a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus {
transition: opacity 100ms linear;
&.ajaxifying {
-moz-opacity: 0.00;
opacity: 0.00;
-ms-filter:~"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0.15;
opacity: 0.15;
-ms-filter:~"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
}
}

@ -21,7 +21,6 @@
<!-- IMPORT partials/category/tools.tpl -->
<!-- IMPORT partials/category/sort.tpl -->
</span>
</div>
<!-- IF !topics.length -->
@ -30,65 +29,70 @@
</div>
<!-- ENDIF !topics.length -->
<ul component="category" id="topics-container" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}">
<ul component="category" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}">
<meta itemprop="itemListOrder" content="descending">
<!-- BEGIN topics -->
<li component="category/topic" class="category-item {function.generateTopicClass}" data-tid="{topics.tid}" data-index="{topics.index}" data-cid="{topics.cid}" itemprop="itemListElement">
<li component="category/topic" class="row clearfix {function.generateTopicClass}" data-tid="{topics.tid}" data-index="{topics.index}" data-cid="{topics.cid}" itemprop="itemListElement">
<meta itemprop="name" content="{topics.title}">
<div class="topic-row">
<div class="col-md-7 col-sm-12 col-xs-12 content">
<div class="pull-left">
<!-- IF privileges.editable -->
<i class="fa fa-fw fa-square-o pull-left select pointer"></i>
<i class="fa fa-fw fa-square-o pull-left select pointer hide"></i>
<!-- ENDIF privileges.editable -->
<a href="{relative_path}/user/{topics.user.userslug}" class="pull-left">
<img src="{topics.user.picture}" class="img-circle user-img" title="{topics.user.username}"/>
</a>
</div>
<h3>
<a href="{relative_path}/topic/{topics.slug}" itemprop="url">
<meta itemprop="name" content="{topics.title}">
<strong>
<h1 class="title pull-left">
<i component="topic/pinned" class="fa fa-thumb-tack <!-- IF !topics.pinned -->hide<!-- ENDIF !topics.pinned -->"></i>
<i component="topic/locked" class="fa fa-lock <!-- IF !topics.locked -->hide<!-- ENDIF !topics.locked -->"></i>
</strong>
<span class="topic-title">{topics.title}</span>
</a>
</h3>
<small>
<span class="topic-stats">
[[global:posts]]
<strong class="human-readable-number" title="{topics.postcount}">{topics.postcount}</strong>
</span>
|
<span class="topic-stats">
[[global:views]]
<strong class="human-readable-number" title="{topics.viewcount}">{topics.viewcount}</strong>
</span>
|
<span>
[[global:posted_ago, <span class="timeago" title="{topics.relativeTime}"></span>]]
</span>
<a href="{relative_path}/topic/{topics.slug}" itemprop="url">{topics.title}</a><br />
<small>[[global:posted_ago, <span class="timeago" title="{topics.relativeTime}"></span>]]</small>
</h1>
</div>
<span class="pull-right">
<div class="hidden-sm hidden-xs">
<!-- IF !categories.link -->
<div class="col-md-1 stats">
<span class="human-readable-number" title="{topics.viewcount}">{topics.viewcount}</span><br />
<small>[[global:views]]</small>
</div>
<div class="col-md-1 stats">
<span class="human-readable-number" title="{topics.postcount}">{topics.postcount}</span><br />
<small>[[global:posts]]</small>
</div>
<div class="col-md-3">
<div class="card" style="border-color: {bgColor}">
<!-- IF topics.unreplied -->
<p>
[[category:no_replies]]
</p>
<!-- ELSE -->
<p>
<a href="<!-- IF topics.teaser.user.userslug -->{relative_path}/user/{topics.teaser.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.teaser.user.userslug -->">
<img class="teaser-pic img-circle" src="{topics.teaser.user.picture}" title="{topics.teaser.user.username}"/>
</a>
<a href="{relative_path}/topic/{topics.slug}/{topics.teaser.index}">
[[global:replied_ago, <span class="timeago" title="{topics.teaser.timestamp}"></span>]]
<strong>{topics.teaser.user.username}</strong>
</a>
<small class="timeago" title="{topics.teaser.timestamp}"></small>
</p>
<p>
Would be nice to have content here.
</p>
<!-- ENDIF topics.unreplied -->
</span>
</div>
</div>
<!-- ELSE -->
<div class="col-md-4">
<!-- IMPORT partials/category/tags.tpl -->
</small>
</div>
<!-- ENDIF !categories.link -->
</div>
</li>
<!-- END topics -->
</ul>
<!-- IF config.usePagination -->
<!-- IMPORT partials/paginator.tpl -->
<!-- ENDIF config.usePagination -->

Loading…
Cancel
Save