UX: align timeline to the right in mobile and add jump to button

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

@@ -49,7 +49,7 @@ export default Ember.Component.extend({
     if (this.get('info.topicProgressExpanded')) {
       $(window).on('click.hide-fullscreen', (e) => {
         if ( $(e.target).is('.topic-timeline') ||
-             !$(e.target).parents().is('.timeline-container, #topic-progress-wrapper')) {
+             !$(e.target).parents().is('#topic-progress-wrapper')) {
           this._collapseFullscreen();
         }
       });

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

@@ -43,6 +43,7 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
     'convertToPrivateMessage',
     'jumpTop',
     'jumpToPost',
+    'jumpToPostPrompt',
     'jumpToIndex',
     'jumpBottom',
     'replyToPost',
@@ -425,6 +426,14 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
       this._jumpToPostId(this.get('model.postStream.stream')[index-1]);
     },
 
+    jumpToPostPrompt() {
+      const postText = prompt(I18n.t('topic.progress.jump_prompt_long'));
+      if (postText === null) { return; }
+      const postNumber = parseInt(postText, 10);
+      if (postNumber === 0) { return; }
+      this._jumpToPostId(this.get('model.postStream').findPostIdForPostNumber(postNumber));
+    },
+
     jumpToPost(postNumber) {
       this._jumpToPostId(this.get('model.postStream').findPostIdForPostNumber(postNumber));
     },

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

@@ -59,7 +59,13 @@ createWidget('timeline-scroller', {
       contents.push(h('div.timeline-ago', timelineDate(date)));
     }
 
-    return [ h('div.timeline-handle'), h('div.timeline-scroller-content', contents) ];
+    let result = [ h('div.timeline-handle'), h('div.timeline-scroller-content', contents) ];
+
+    if (attrs.fullScreen) {
+      result = [result[1], result[0]];
+    }
+
+    return result;
   },
 
   drag(e) {
@@ -140,7 +146,7 @@ createWidget('timeline-scrollarea', {
 
     const result = [
       this.attach('timeline-padding', { height: before }),
-      this.attach('timeline-scroller', position),
+      this.attach('timeline-scroller', _.merge(position, {fullScreen: attrs.fullScreen})),
       this.attach('timeline-padding', { height: after })
     ];
 
@@ -221,8 +227,11 @@ export default createWidget('topic-timeline', {
 
     let result = [];
 
-    if (attrs.mobileView) {
+    if (attrs.fullScreen) {
-      const titleHTML = new RawHtml({ html: `<span>${topic.get('fancyTitle')}</span>` });
+      let titleHTML = "";
+      if (attrs.mobileView) {
+        titleHTML = new RawHtml({ html: `<span>${topic.get('fancyTitle')}</span>` });
+      }
       result.push(h('h3.title', titleHTML));
     }
 
@@ -236,21 +245,23 @@ export default createWidget('topic-timeline', {
     }
 
     const bottomAge = relativeAge(new Date(topic.last_posted_at), { addAgo: true, defaultFormat: timelineDate });
-    result = result.concat([this.attach('link', {
+    let scroller = [h('div.timeline-date-wrapper', this.attach('link', {
                               className: 'start-date',
                               rawLabel: timelineDate(createdAt),
                               action: 'jumpTop'
-                            }),
+                            })),
                             this.attach('timeline-scrollarea', attrs),
-                            this.attach('link', {
+                            h('div.timeline-date-wrapper', this.attach('link', {
                               className: 'now-date',
                               rawLabel: bottomAge,
                               action: 'jumpBottom'
-                            })]);
+                            }))];
 
-    if (currentUser) {
+    result = result.concat([h('div.timeline-scrollarea-wrapper', scroller)]);
-      const controls = [];
+
-      if (!attrs.fullScreen && attrs.topic.get('details.can_create_post')) {
+    const controls = [];
+    if (currentUser && !attrs.fullScreen) {
+      if (attrs.topic.get('details.can_create_post')) {
         controls.push(this.attach('button', {
           className: 'btn create',
           icon: 'reply',
@@ -259,9 +270,21 @@ export default createWidget('topic-timeline', {
         }));
       }
 
-      if (currentUser && !attrs.fullScreen) {
+      if (currentUser) {
         controls.push(this.attach('topic-notifications-button', { topic }));
       }
+    }
+
+    if (attrs.fullScreen) {
+      controls.push(this.attach('button', {
+        className: 'btn jump-to-post',
+        title: 'topic.progress.jump_prompt_long',
+        label: 'topic.progress.jump_prompt',
+        action: 'jumpToPostPrompt'
+      }));
+    }
+
+    if (controls.length > 0) {
       result.push(h('div.timeline-footer-controls', controls));
     }
 

app/assets/stylesheets/common/topic-timeline.scss

@@ -32,6 +32,11 @@
   &.timeline-fullscreen.show {
     max-height: 700px;
     transition: max-height 0.4s ease-out;
+    .topic-timeline {
+      .timeline-footer-controls {
+        display: inherit;
+      }
+    }
   }
 
   &.timeline-fullscreen {
@@ -44,15 +49,83 @@
     left: 0;
     right: 0;
     border-top: 1px solid dark-light-choose(scale-color($primary, $lightness: 90%), scale-color($secondary, $lightness: 90%));
-    padding-top: 15px;
+    padding-top: 20px;
     z-index: 100000;
-    .timeline-scrollarea {
-      max-width: 200px;
-    }
     .topic-timeline {
-      width: auto;
+      width: 100%;
-      margin-left: 1.5em;
+      margin-left: 0;
-      margin-right: 1.5em;
+      margin-right: 0;
+      display: table;
+      .timeline-date-wrapper {
+        float: right;
+        text-align: right;
+        font-size: 1.1em;
+      }
+      .title {
+        margin-top: 0;
+        padding-left: 1em;
+        display: table-cell;
+        vertical-align: top;
+        line-height: 1.3em;
+      }
+      .timeline-last-read {
+        right: 0px;
+        margin-left: 0;
+        i.progress {
+          margin-right: -3px;
+          margin-left: 1em;
+        }
+      }
+      .timeline-footer-controls {
+        display: none;
+        position: absolute;
+        bottom: 10px;
+        left: 10px;
+
+        button {
+          float: none;
+          display: block;
+          margin-bottom: 10px;
+        }
+      }
+      .timeline-scrollarea-wrapper {
+        display: table-cell;
+        padding-bottom: 20px;
+        padding-right: 1.5em;
+        width: 100px;
+      }
+      .timeline-scrollarea {
+        border-left: 0;
+        border-right-style: solid;
+        border-right-width: 1px;
+        max-width: 120px;
+        float: right;
+
+        .timeline-scroller {
+          position: relative;
+          margin-right: -1.5em;
+          padding-right: 1.5em;
+          justify-content: flex-end;
+          .timeline-scroller-content {
+            text-align: right;
+            padding-left: 0;
+            padding-right: 1em;
+          }
+          .timeline-handle {
+            float: none;
+            width: 11px;
+            position: relative;
+            right: -6px;
+          }
+        }
+      }
+    }
+
+
+    .timeline-scrollarea-wrapper::after {
+      content: "";
+      display: table;
+      clear: both;
     }
 
   }