UX: Show Back button above mobile progress widget

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

@@ -37,6 +37,13 @@ export default Ember.Component.extend({
     }
   },
 
+  @computed('progressPosition', 'topic.last_read_post_id')
+  showBackButton(position, lastReadId) {
+    if (!this.site.mobileView || !lastReadId) { return; }
+    const readPos = this.get('postStream.stream').indexOf(lastReadId) || 0;
+    return readPos > position;
+  },
+
   @observes('postStream.stream.[]')
   _updateBar() {
     Ember.run.scheduleOnce('afterRender', this, this._updateProgressBar);
@@ -140,6 +147,10 @@ export default Ember.Component.extend({
   actions: {
     toggleExpansion() {
       this.toggleProperty('expanded');
+    },
+
+    goBack() {
+      this.attrs.jumpToPost(this.get('topic.last_read_post_number'));
     }
   },
 

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

@@ -1,3 +1,9 @@
+{{#if showBackButton}}
+  <div class='progress-back-container'>
+    {{d-button label="topic.timeline.back" class="btn-primary progress-back" action="goBack"}}
+  </div>
+{{/if}}
+
 <nav id='topic-progress' title="{{i18n 'topic.progress.title'}}" class="{{if hideProgress 'hidden'}}">
   <div class='nums'>
     <h4>{{progressPosition}}</h4><span class="{{if hugeNumberOfPosts 'hidden'}}">

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

@@ -115,7 +115,8 @@
           {{topic-progress
             prevEvent=info.prevEvent
             topic=model
-            expanded=info.topicProgressExpanded}}
+            expanded=info.topicProgressExpanded
+            jumpToPost=(action "jumpToPost")}}
         {{/if}}
       {{/topic-navigation}}
 

app/assets/javascripts/discourse/widgets/topic-timeline.js.es6

@@ -175,7 +175,7 @@ createWidget('timeline-scrollarea', {
     const result = [
       this.attach('timeline-padding', { height: before }),
       this.attach('timeline-scroller', _.merge(position, {
-        showDockedButton: hasBackPosition && !showButton,
+        showDockedButton: !attrs.mobileView && hasBackPosition && !showButton,
         fullScreen: attrs.fullScreen
       })),
       this.attach('timeline-padding', { height: after })

app/assets/stylesheets/mobile/topic.scss

@@ -61,6 +61,19 @@
   margin-right: 148px;
 }
 
+.progress-back-container {
+  position: fixed;
+  width: 0;
+  right: 0;
+  bottom: 40px;
+  z-index: 950;
+  margin-right: 105px;
+
+  .btn {
+    margin: 0;
+  }
+}
+
 #topic-progress-expanded {
   border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   padding: 5px;
@@ -194,4 +207,4 @@ sup sup, sub sup, sup sub, sub sub { top: 0; }
 .topic-timeline { 
   .start-date { font-size: 120%; padding: 5px; }
   .now-date { font-size: 120%; padding: 5px; }
-}
+}