UX: Don't display the timeline on thinner browser widths

app/assets/javascripts/discourse/components/topic-navigation.js.es6

@@ -0,0 +1,26 @@
+export default Ember.Component.extend({
+  showTimeline: null,
+
+  _checkSize() {
+    const width = $(window).width();
+    this.set('showTimeline', width > 1012);
+  },
+
+  didInsertElement() {
+    this._super();
+
+    if (!this.site.mobileView) {
+      $(window).on('resize.discourse-topic-navigation', () => this._checkSize());
+      this._checkSize();
+    } else {
+      this.set('showTimeline', false);
+    }
+  },
+
+  willDestroyElement() {
+    this._super();
+    if (!this.site.mobileView) {
+      $(window).off('resize.discourse-topic-navigation');
+    }
+  }
+});

app/assets/javascripts/discourse/components/topic-progress.js.es6

@@ -15,9 +15,9 @@ export default Ember.Component.extend({
     (this.get('delegated') || []).forEach(m => this.set(m, m));
   },
 
-  @computed('userWantsToJump')
+  @computed('userWantsToJump', 'showTimeline')
-  hidden(userWantsToJump) {
+  hidden(userWantsToJump, showTimeline) {
-    return !userWantsToJump && !this.site.mobileView;
+    return !userWantsToJump && showTimeline;
   },
 
   keyboardTrigger(kbdEvent) {

app/assets/javascripts/discourse/controllers/topic.js.es6

@@ -42,16 +42,6 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
     'replyToPost'
   ],
 
-  @computed
-  showTimeline() {
-    return !this.site.mobileView;
-  },
-
-  @computed('showTimeline')
-  loadingClass(showTimeline) {
-    return showTimeline ? 'timeline-loading' : undefined;
-  },
-
   _titleChanged: function() {
     const title = this.get('model.title');
     if (!Ember.isEmpty(title)) {

app/assets/javascripts/discourse/mixins/delegate-actions.js.es6

@@ -0,0 +1,6 @@
+export default Ember.Mixin.create({
+  init() {
+    this._super();
+    (this.get('delegated') || []).forEach(m => this.set(m, m));
+  },
+});

app/assets/javascripts/discourse/templates/components/topic-navigation.hbs

@@ -0,0 +1 @@
+{{yield showTimeline}}

app/assets/javascripts/discourse/templates/topic.hbs

@@ -71,16 +71,18 @@
       <section class="topic-area" id="topic" data-topic-id="{{unbound model.id}}">
         <div class="posts-wrapper">
 
-          {{#if showTimeline}}
+          {{#topic-navigation as |showTimeline|}}
-            {{topic-timeline topic=model
+            {{#if showTimeline}}
-                             enteredIndex=enteredIndex
+              {{topic-timeline topic=model
-                             loading=model.postStream.loading
+                               enteredIndex=enteredIndex
-                             delegated=topicDelegated}}
+                               loading=model.postStream.loading
-          {{else}}
+                               delegated=topicDelegated}}
-            {{topic-admin-menu-button topic=model fixed="true" delegated=topicDelegated}}
+            {{else}}
-          {{/if}}
+              {{topic-admin-menu-button topic=model fixed="true" delegated=topicDelegated}}
+            {{/if}}
 
-          {{topic-progress topic=model delegated=topicDelegated}}
+            {{topic-progress topic=model delegated=topicDelegated showTimeline=showTimeline}}
+          {{/topic-navigation}}
 
           {{conditional-loading-spinner condition=model.postStream.loadingAbove}}