mobile optimizations for home, category, and topic list views

main
psychobunny 10 years ago
parent a4a9895102
commit b147323d04

@ -36,6 +36,13 @@
text-overflow: ellipsis;
width: 85%;
}
@media (max-width: @screen-lg-min) {
h1 {
width: 95%;
margin-left: 0;
}
}
}
.card {

@ -5,8 +5,8 @@
<li data-cid="{categories.cid}" data-numRecentReplies="{categories.numRecentReplies}" class="row clearfix">
<meta itemprop="name" content="{categories.name}">
<div class="col-md-7 col-sm-12 col-xs-12 content">
<div class="icon pull-left" style="{function.generateCategoryBackground}">
<div class="col-md-7 col-sm-9 col-xs-11 content">
<div class="icon hidden-sm hidden-xs pull-left" style="{function.generateCategoryBackground}">
<i class="fa fa-fw {categories.icon}"></i>
</div>
@ -16,25 +16,23 @@
</h1>
</div>
<div class="hidden-sm hidden-xs">
<!-- IF !categories.link -->
<div class="col-md-1 stats">
<span class="{categories.unread-class}">{categories.post_count}</span><br />
<small>Posts</small>
</div>
<div class="col-md-1 stats">
<span class="{categories.unread-class}">{categories.topic_count}</span><br />
<small>Topics</small>
</div>
<div class="col-md-3">
<!-- IMPORT partials/categories/lastpost.tpl -->
</div>
<!-- ELSE -->
<div class="col-md-4">
</div>
<!-- ENDIF !categories.link -->
<!-- IF !categories.link -->
<div class="col-md-1 hidden-sm hidden-xs stats">
<span class="{categories.unread-class}">{categories.post_count}</span><br />
<small>Posts</small>
</div>
<div class="col-md-1 hidden-sm hidden-xs stats">
<span class="{categories.unread-class}">{categories.topic_count}</span><br />
<small>Topics</small>
</div>
<div class="col-md-3 col-sm-3 col-xs-1">
<!-- IMPORT partials/categories/lastpost.tpl -->
</div>
<!-- ELSE -->
<div class="col-md-3 col-sm-3 col-xs-1">
<div class="card" style="border-color: {categories.bgColor}"></div>
</div>
<!-- ENDIF !categories.link -->
</li>
<!-- END categories -->
</ul>

@ -6,8 +6,8 @@
<li data-cid="{children.cid}" data-numRecentReplies="{children.numRecentReplies}" class="row clearfix">
<meta itemprop="name" content="{children.name}">
<div class="col-md-7 col-sm-12 col-xs-12 content">
<div class="icon pull-left" style="{function.generateCategoryBackground}">
<div class="col-md-7 col-sm-9 col-xs-11 content">
<div class="icon hidden-sm hidden-xs pull-left" style="{function.generateCategoryBackground}">
<i class="fa fa-fw {children.icon}"></i>
</div>
@ -23,36 +23,34 @@
</h1>
</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 -->
<!-- IF @first -->
<div class="card" style="border-color: {children.bgColor}">
<p>
<strong>{children.posts.user.username}</strong> <small class="timeago" title="{children.posts.relativeTime}"></small>
</p>
<div class="post-content">
{children.posts.content}
</div>
<!-- IF !children.link -->
<div class="col-md-1 hidden-sm hidden-xs stats">
<span class="{children.unread-class}">{children.topic_count}</span><br />
<small>Topics</small>
</div>
<div class="col-md-1 hidden-sm hidden-xs stats">
<span class="{children.unread-class}">{children.post_count}</span><br />
<small>Posts</small>
</div>
<div class="col-md-3 col-sm-3 col-xs-1">
<!-- BEGIN posts -->
<!-- IF @first -->
<div class="card" style="border-color: {children.bgColor}">
<p>
<strong>{children.posts.user.username}</strong> <small class="timeago" title="{children.posts.relativeTime}"></small>
</p>
<div class="post-content">
{children.posts.content}
</div>
<!-- ENDIF @first -->
<!-- END posts -->
</div>
<!-- ELSE -->
<div class="col-md-4">
<!-- ENDIF @first -->
<!-- END posts -->
</div>
<!-- ELSE -->
<div class="col-md-4">
</div>
<!-- ENDIF !children.link -->
</div>
<!-- ENDIF !children.link -->
</li>
<!-- END children -->
</ul>

@ -5,7 +5,7 @@
<meta itemprop="name" content="{topics.title}">
<div class="col-md-7 col-sm-9 col-xs-11 content">
<div class="avatar pull-left">
<div class="avatar hidden-sm hidden-xs pull-left">
<!-- IF showSelect -->
<div class="select fa-square-o">
<img src="{topics.user.picture}" class="img-circle user-img" />

Loading…
Cancel
Save