diff --git a/less/categories.less b/less/categories.less
index 0134b87..da467c0 100644
--- a/less/categories.less
+++ b/less/categories.less
@@ -4,11 +4,20 @@
> li {
- margin-bottom: 20px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+
+ @media (max-width: @screen-xs-max) {
+ border-top: 1px solid #eee;
+ &:last-child {
+ border-bottom: 1px solid #eee;
+ };
+ }
+
min-height: 53px;
.content {
- margin-top: 7px;
+ padding-right: 0px;
.icon {
font-size: 17px;
@@ -28,7 +37,7 @@
}
h2 {
- font-size: 20px;
+ font-size: 18px;
line-height: 22px;
margin: 0;
margin-left: 62px;
@@ -57,6 +66,10 @@
}
}
+ .mobile-stat {
+ padding-left: 0px;
+ }
+
.card {
border-left: 4px solid #ccc;
text-align: left;
@@ -70,8 +83,8 @@
img {
border-radius: 50%;
- width: 30px;
- height: 30px;
+ width: 24px;
+ height: 24px;
}
p {
diff --git a/less/category.less b/less/category.less
index 9a50a09..ce0b8c3 100644
--- a/less/category.less
+++ b/less/category.less
@@ -1,4 +1,9 @@
.category {
+
+ .topic-list {
+ margin-top: 10px;
+ }
+
> ul {
> li {
list-style: none;
@@ -88,8 +93,6 @@
font-weight: bold;
}
}
-
-
}
.category, .categories, .subcategory {
diff --git a/less/topic.less b/less/topic.less
index 45af3c1..b30222e 100644
--- a/less/topic.less
+++ b/less/topic.less
@@ -89,10 +89,6 @@
margin-top: -5px;
}
- .topic-main-buttons a.btn {
- margin-left: 20px;
- }
-
.title {
p {
margin-bottom: 4px;
diff --git a/templates/category.tpl b/templates/category.tpl
index c861836..9c103c7 100644
--- a/templates/category.tpl
+++ b/templates/category.tpl
@@ -2,7 +2,7 @@
<!-- IMPORT partials/breadcrumbs.tpl -->
<!-- IMPORT partials/category/subcategory.tpl -->
- <!-- IF children.length --><hr /><!-- ENDIF children.length -->
+ <!-- IF children.length --><hr class="hidden-xs"/><!-- ENDIF children.length -->
<div class="clearfix">
<!-- IF privileges.topics:create -->
@@ -20,9 +20,9 @@
</span>
</div>
- <hr />
+ <hr class="hidden-xs" />
- <p>{name}</p>
+ <p class="hidden-xs">{name}</p>
<!-- IF !topics.length -->
<div class="alert alert-warning" id="category-no-topics">
diff --git a/templates/partials/post_bar.tpl b/templates/partials/post_bar.tpl
index 6f7df54..ade430d 100644
--- a/templates/partials/post_bar.tpl
+++ b/templates/partials/post_bar.tpl
@@ -1,11 +1,11 @@
<div class="clearfix">
- <span class="tags">
+ <div class="tags pull-left">
<!-- BEGIN tags -->
<a href="{config.relative_path}/tags/{tags.value}">
<span class="tag-item" data-tag="{tags.value}" style="<!-- IF tags.color -->color: {tags.color};<!-- ENDIF tags.color --><!-- IF tags.bgColor -->background-color: {tags.bgColor};<!-- ENDIF tags.bgColor -->">{tags.value}</span>
<span class="tag-topic-count human-readable-number" title="{tags.score}">{tags.score}</span></a>
<!-- END tags -->
- </span>
+ </div>
<div class="topic-main-buttons pull-right">
<span class="loading-indicator btn pull-left hidden" done="0">
@@ -14,8 +14,6 @@
<!-- IMPORT partials/topic/stats.tpl -->
- <br class="visible-xs"/>
-
<!-- IMPORT partials/topic/reply-button.tpl -->
<!-- IMPORT partials/topic/watch.tpl -->
diff --git a/templates/partials/topic/post.tpl b/templates/partials/topic/post.tpl
index c8efe5a..2f3453f 100644
--- a/templates/partials/topic/post.tpl
+++ b/templates/partials/topic/post.tpl
@@ -24,7 +24,7 @@
<a component="post/reply" href="#" class="no-select <!-- IF !privileges.topics:reply -->hidden<!--ENDIF !privileges.topics:reply -->">[[topic:reply]]</a>
<a component="post/quote" href="#" class="no-select <!-- IF !privileges.topics:reply -->hidden<!--ENDIF !privileges.topics:reply -->">[[topic:quote]]</a>
<!-- IF posts.toPid -->
- <button component="post/parent" class="btn btn-xs btn-default" data-topid="{posts.toPid}"><i class="fa fa-reply"></i> @{posts.parent.username} <i class="fa fa-caret-down"></i></button>
+ <button component="post/parent" class="btn btn-xs btn-default" data-topid="{posts.toPid}"><i class="fa fa-reply"></i> @{posts.parent.username}</button>
<!-- ENDIF posts.toPid -->
</span>
<span>
@@ -64,5 +64,4 @@
<div component="post/signature" data-uid="{posts.user.uid}" class="post-signature">{posts.user.signature}</div>
<!-- ENDIF posts.user.signature -->
-
<hr />
diff --git a/templates/partials/topics_list.tpl b/templates/partials/topics_list.tpl
index 38c36b5..6cc4b5c 100644
--- a/templates/partials/topics_list.tpl
+++ b/templates/partials/topics_list.tpl
@@ -1,10 +1,10 @@
-<ul component="category" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}">
+<ul component="category" class="topic-list" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}">
<meta itemprop="itemListOrder" content="descending">
<!-- BEGIN topics -->
<li component="category/topic" class="row clearfix {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
<meta itemprop="name" content="{function.stripTags, title}">
- <div class="col-md-7 col-sm-9 col-xs-12 content">
+ <div class="col-md-7 col-sm-9 col-xs-10 content">
<div class="avatar pull-left">
<!-- IF showSelect -->
<div class="select fa-square-o">
@@ -33,39 +33,49 @@
</small>
<!-- ENDIF !template.category -->
- <span class="tag-list">
+ <span class="tag-list hidden-xs">
<!-- BEGIN tags -->
<a href="{config.relative_path}/tags/{topics.tags.value}"><span class="tag" style="<!-- IF topics.tags.color -->color: {topics.tags.color};<!-- ENDIF topics.tags.color --><!-- IF topics.tags.bgColor -->background-color: {topics.tags.bgColor};<!-- ENDIF topics.tags.bgColor -->">{topics.tags.value}</span></a>
<!-- END tags -->
<!-- IF topics.tags.length --><small>•</small><!-- ENDIF topics.tags.length -->
</span>
- <small>[[global:posted_ago, <span class="timeago" title="{topics.relativeTime}"></span>]]</small>
-
- <small class="clearfix"><span class="visible-xs"><span class="pull-right"><i class="fa fa-pencil"></i> {topics.postcount} • <a href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}"><i class="fa fa-arrow-circle-right"></i></a></span>
- </span></small>
+ <small class="hidden-xs"><span class="timeago" title="{topics.relativeTime}"></span></small>
+ <small class="visible-xs-inline">
+ <!-- IF topics.teaser.timestamp -->
+ <span class="timeago" title="{topics.teaser.timestamp}"></span>
+ <!-- ELSE -->
+ <span class="timeago" title="{topics.relativeTime}"></span>
+ <!-- ENDIF topics.teaser.timestamp -->
+ </small>
</h2>
</div>
+ <div class="mobile-stat col-xs-2 visible-xs text-right">
+ <span class="human-readable-number">{topics.postcount}</span> <a href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}"><i class="fa fa-arrow-circle-right"></i></a>
+ </div>
+
<div class="col-md-1 hidden-sm hidden-xs stats">
<span class="human-readable-number" title="{topics.postcount}">{topics.postcount}</span><br />
<small>[[global:posts]]</small>
</div>
+
<div class="col-md-1 hidden-sm hidden-xs stats">
<span class="human-readable-number" title="{topics.viewcount}">{topics.viewcount}</span><br />
<small>[[global:views]]</small>
</div>
+
<div class="col-md-3 col-sm-3 teaser hidden-xs">
<div class="card" style="border-color: {topics.category.bgColor}">
<!-- IF topics.unreplied -->
- <p class="hidden-xs">
+ <p>
[[category:no_replies]]
</p>
<!-- ELSE -->
- <p class="hidden-xs">
- <strong>{topics.teaser.user.username}</strong>
+ <p>
+ <a href="{config.relative_path}/user/{topics.teaser.user.userslug}"><img title="{topics.teaser.user.username}" class="user-img" src="{topics.teaser.user.picture}" /></a>
<a class="permalink" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}">
- <small class="timeago" title="{topics.teaser.timestamp}"></small>
+ <span class="timeago" title="{topics.teaser.timestamp}"></span>
</a>
</p>
<div class="post-content">
diff --git a/templates/recent.tpl b/templates/recent.tpl
index 9452275..b5a82be 100644
--- a/templates/recent.tpl
+++ b/templates/recent.tpl
@@ -13,7 +13,7 @@
</div>
</div>
- <hr />
+ <hr class="hidden-xs"/>
<div class="category">
<!-- IF !topics.length -->
diff --git a/templates/topic.tpl b/templates/topic.tpl
index 0c95544..c035c01 100644
--- a/templates/topic.tpl
+++ b/templates/topic.tpl
@@ -1,7 +1,7 @@
<div class="topic">
<!-- IMPORT partials/breadcrumbs.tpl -->
- <h1 component="post/header" itemprop="name">
+ <h1 component="post/header" class="hidden-xs" itemprop="name">
<i class="fa fa-thumb-tack <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->"></i> <i class="fa fa-lock <!-- IF !locked -->hidden<!-- ENDIF !locked -->"></i> <span class="topic-title" component="topic/title">{title}</span>
@@ -17,6 +17,8 @@
<div component="topic/deleted/message" class="alert alert-warning<!-- IF !deleted --> hidden<!-- ENDIF !deleted -->">[[topic:deleted_message]]</div>
+ <hr class="visible-xs" />
+
<ul component="topic" class="posts" data-tid="{tid}">
<!-- BEGIN posts -->
<li component="post" class="<!-- IF posts.deleted -->deleted<!-- ENDIF posts.deleted -->" <!-- IMPORT partials/data/topic.tpl -->>
diff --git a/templates/unread.tpl b/templates/unread.tpl
index 5ac1f99..4d7d285 100644
--- a/templates/unread.tpl
+++ b/templates/unread.tpl
@@ -45,7 +45,7 @@
</div>
</div>
- <hr />
+ <hr class="hidden-xs"/>
<div class="category">
<div id="category-no-topics" class="alert alert-warning <!-- IF topics.length -->hidden<!-- ENDIF topics.length -->">[[unread:no_unread_topics]]</div>