Topic list styling for mobile
This commit is contained in:
Neil Lalonde
parent
c04613f269
commit
be71dbfd94
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="container list-container">
|
||||
<div class="row">
|
||||
<div class="full-width">
|
||||
<div id='list-area'>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
<td class='main-link clearfix'>
|
||||
|
||||
{{#if controller.rankDetailsVisible}}
|
||||
<div class='rank-details'>
|
||||
<p>{{rank_details.hot_topic_type}}</p>
|
||||
<p>
|
||||
({{float rank_details.random_bias}} * {{float rank_details.random_multiplier}}) + ({{float rank_details.days_ago_bias}} * {{float rank_details.days_ago_multiplier}}) = <b>{{float rank_details.ranking_score}}</b>
|
||||
<i class='icon icon-beaker score' {{action showRankDetails this}} title='{{i18n rank_details.show}}'></i>
|
||||
</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{topicStatus topic=this}}
|
||||
{{{topicLink this}}}
|
||||
{{#if unread}}
|
||||
<a href="{{lastUnreadUrl}}" class='badge unread badge-notification' title='{{i18n topic.unread_posts count="unread"}}'>{{unread}}</a>
|
||||
{{/if}}
|
||||
{{#if displayNewPosts}}
|
||||
<a href="{{lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new_posts count="displayNewPosts"}}'>{{displayNewPosts}}</a>
|
||||
{{/if}}
|
||||
{{#if unseen}}
|
||||
<a href="{{lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'><i class='icon icon-asterisk'></i></a>
|
||||
{{/if}}
|
||||
|
||||
{{#if hasExcerpt}}
|
||||
<div class="topic-excerpt">
|
||||
{{excerpt}}
|
||||
{{#if excerptTruncated}}
|
||||
{{#unless canClearPin}}<a href="{{lastUnreadUrl}}">{{i18n read_more}}</a>{{/unless}}
|
||||
{{/if}}
|
||||
{{#if canClearPin}}
|
||||
<a href="#" {{action clearPin this}} title="{{i18n topic.clear_pin.help}}">{{i18n topic.clear_pin.title}}</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</td>
|
||||
|
||||
<td class='category'>
|
||||
{{categoryLink category}}
|
||||
</td>
|
||||
|
||||
<td class='num posts'><a href="{{lastUnreadUrl}}" class='badge-posts'>{{number posts_count numberKey="posts_long"}}</a></td>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
{{#unless loading}}
|
||||
{{#if loaded}}
|
||||
<div class='contents'>
|
||||
{{#if view.showTable}}
|
||||
|
||||
{{#if canViewRankDetails}}
|
||||
<button class='btn' {{action toggleRankDetails}} style='margin-bottom: 10px'>
|
||||
<i class='icon icon-beaker'></i>
|
||||
{{i18n rank_details.toggle}}
|
||||
</button>
|
||||
{{/if}}
|
||||
|
||||
<table id='topic-list'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class='main-link'>
|
||||
{{i18n topic.title}}
|
||||
</th>
|
||||
<th class='category'>{{i18n category_title}}</th>
|
||||
<th class='num posts'>{{i18n posts}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
{{#if view.topicTrackingState.hasIncoming}}
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<div class='alert alert-info'>
|
||||
{{countI18n new_topics_inserted countBinding="view.topicTrackingState.incomingCount"}}
|
||||
<a href='#' {{action showInserted}}>{{i18n show_new_topics}}</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
{{/if}}
|
||||
|
||||
{{collection contentBinding="topics" tagName="tbody" itemViewClass="Discourse.TopicListItemView"}}
|
||||
|
||||
</table>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<footer id='topic-list-bottom'>
|
||||
{{#if loadingMore}}
|
||||
<div class='topics-loading'>{{i18n topic.loading_more}}</div>
|
||||
{{/if}}
|
||||
|
||||
<h3>
|
||||
{{footerMessage}}
|
||||
{{#if allLoaded}}
|
||||
{{#if latest}}
|
||||
{{#if canCreateTopic}}
|
||||
<a href='#' {{action createTopic}}>{{i18n topic.suggest_create_topic}}</a>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
{{#linkTo 'list.categories'}}{{i18n topic.browse_all_categories}}{{/linkTo}} {{i18n or}} {{#linkTo 'list.latest'}}{{i18n topic.view_latest_topics}}{{/linkTo}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</h3>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
{{/if}}
|
||||
{{/unless}}
|
||||
|
|
@ -56,6 +56,6 @@
|
|||
}
|
||||
|
||||
.nav-pills {
|
||||
margin-left:0px !important;
|
||||
// margin-left:0px !important; this style affects everything, and it has !important! yuck.
|
||||
font: 13px/18px "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
}
|
||||
|
|
@ -9,9 +9,13 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
#list-controls {
|
||||
margin: 5px;
|
||||
.nav {
|
||||
float: left;
|
||||
margin-bottom: 15px;
|
||||
margin-right: 15px;
|
||||
li {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
float: right;
|
||||
|
|
@ -32,6 +36,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.list-container .full-width {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Base list
|
||||
// --------------------------------------------------
|
||||
|
||||
|
|
@ -39,7 +47,8 @@
|
|||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border: 1px solid #ddd;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
tbody tr {
|
||||
background-color: $white;
|
||||
|
|
@ -49,10 +58,6 @@
|
|||
&.archived a {
|
||||
opacity: 0.6;
|
||||
}
|
||||
&.has-excerpt .star {
|
||||
vertical-align: top;
|
||||
margin-top: 2px;
|
||||
}
|
||||
&.category-description {
|
||||
td {
|
||||
color: $nav-pills-border-color-active;
|
||||
|
|
@ -69,10 +74,10 @@
|
|||
text-align: left;
|
||||
vertical-align: middle;
|
||||
&:first-of-type {
|
||||
padding-left: 10px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
&:last-of-type {
|
||||
padding-right: 10px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
th {
|
||||
|
|
@ -91,19 +96,8 @@
|
|||
color: $topic-list-td-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
.star {
|
||||
width: 20px;
|
||||
padding-right: 0;
|
||||
.icon-star {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
+ .main-link {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.main-link {
|
||||
width: 495px;
|
||||
// width: 495px;
|
||||
font-size: 16px;
|
||||
|
||||
i.score {
|
||||
|
|
@ -130,16 +124,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@include medium-width {
|
||||
.main-link {
|
||||
width: 380px;
|
||||
}
|
||||
}
|
||||
@include small-width {
|
||||
.main-link {
|
||||
width: 335px;
|
||||
}
|
||||
}
|
||||
.topic-statuses:empty {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -155,7 +139,13 @@
|
|||
top: -1px;
|
||||
}
|
||||
.category {
|
||||
width: 140px;
|
||||
// width: 100px;
|
||||
}
|
||||
.has-excerpt {
|
||||
td.category, td.posts {
|
||||
vertical-align: top;
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
.posters {
|
||||
width: 150px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue