On mobile, keep topic map collapsed by default. Also, when collapsed don't show as many

data turds.

app/assets/javascripts/discourse/components/topic_map_component.js

@@ -19,7 +19,7 @@ Discourse.TopicMapComponent = Ember.Component.extend({
     this._super();
 
     // If the topic has a summary, expand the map by default
-    this.set('mapCollapsed', !this.get('topic.has_summary'));
+    this.set('mapCollapsed', Discourse.Mobile.mobileView || (!this.get('topic.has_summary')));
   },
 
   toggleMapClass: function() {

app/assets/javascripts/discourse/templates/components/topic-map.js.handlebars

@@ -4,7 +4,7 @@
   </button>
 </nav>
 
-<section class='map collapsed'>
+<section {{bindAttr class=":map mapCollapsed"}}>
   <ul class="clearfix">
     <li>
       <a href='{{unbound topic.url}}'>
@@ -24,22 +24,22 @@
       <h4>{{i18n posts}}</h4>
       {{number topic.posts_count}}
     </li>
-    <li>
+    <li class='secondary'>
       <h4>{{i18n views}}</h4>
       {{number topic.views}}
     </li>
-    <li>
+    <li class='secondary'>
       <h4>{{i18n users}}</h4>
       {{number topic.participant_count}}
     </li>
     {{#if topic.like_count}}
-      <li>
+      <li class='secondary'>
         <h4>{{i18n likes}}</h4>
         <i class='icon icon-heart'></i> {{number topic.like_count}}
       </li>
     {{/if}}
     {{#if details.links.length}}
-    <li>
+    <li class='secondary'>
       <h4>{{i18n links}}</h4>
       {{number details.links.length}}
     </li>

app/assets/stylesheets/desktop/topic-post.scss

@@ -268,8 +268,6 @@ a.star {
   }
 
   .map {
-    &.collapsed {
-    }
     li {
       float: left;
       padding: 7px 11px;
@@ -277,9 +275,7 @@ a.star {
         border-right: 0;
       }
     }
-    a,
-
-    .number {
+    a, .number {
       font-weight: bold;
       line-height: 20px;
     }

app/assets/stylesheets/mobile/topic-post.scss

@@ -186,9 +186,13 @@ a.star {
     margin-right: 4px;
   }
 
-  .map {
-    &.collapsed {
+  .map-collapsed {
+    .secondary {
+      display: none;
     }
+  }
+
+  .map {
     li {
       float: left;
       padding: 7px 11px;
@@ -196,9 +200,7 @@ a.star {
         border-right: 0;
       }
     }
-    a,
-
-    .number {
+    a, .number {
       font-weight: bold;
       line-height: 20px;
     }