Topic list styling for mobile

2013-09-17 16:07:02 -04:00
parent c04613f269
commit be71dbfd94
5 changed files with 130 additions and 33 deletions
@@ -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}}