Topic list styling for mobile

app/assets/javascripts/discourse/templates/list.js.handlebars

@@ -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'>

app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.js.handlebars

@@ -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>

app/assets/javascripts/discourse/templates/mobile/list/topics.js.handlebars

@@ -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}}

app/assets/stylesheets/mobile/faqs.css.scss

@@ -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;
 }

app/assets/stylesheets/mobile/topic-list.css.scss

@@ -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;