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; text-overflow: ellipsis;
width: 85%; width: 85%;
} }
@media (max-width: @screen-lg-min) {
h1 {
width: 95%;
margin-left: 0;
}
}
} }
.card { .card {

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

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

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

Loading…
Cancel
Save