From 5d4f61ec96d4cf6bb75f4d1e74545b749ea09da3 Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Sun, 27 Mar 2016 11:32:29 -0400 Subject: [PATCH] Tweaked scrollToPostIndex logic The old behaviour would scroll the post anchor to the midline, but this was inferior UX for long posts since the top half of the screen is essentially stuff you didn't want to see. The new logic is as follows: - If the target post is smaller than the browser viewport, it will scroll in such a way that the entire post is vertically centered (post midline matching viewport midline) - If the target post is larger than the browser viewport, it will scroll in such a way that the top of the post is located just under the navbar, maximizing the target post's content. - Updated themes to relocate their anchors to in between posts --- package.json | 4 ++-- public/src/modules/navigator.js | 14 ++++++++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 286e4e712d..016b488605 100644 --- a/package.json +++ b/package.json @@ -53,8 +53,8 @@ "nodebb-plugin-spam-be-gone": "0.4.6", "nodebb-rewards-essentials": "0.0.8", "nodebb-theme-lavender": "3.0.9", - "nodebb-theme-persona": "4.0.112", - "nodebb-theme-vanilla": "5.0.59", + "nodebb-theme-persona": "4.0.113", + "nodebb-theme-vanilla": "5.0.60", "nodebb-widget-essentials": "2.0.8", "nodemailer": "2.0.0", "nodemailer-sendmail-transport": "1.0.0", diff --git a/public/src/modules/navigator.js b/public/src/modules/navigator.js index 3ac5fc16e2..f6ac8c628a 100644 --- a/public/src/modules/navigator.js +++ b/public/src/modules/navigator.js @@ -190,7 +190,12 @@ define('navigator', ['forum/pagination', 'components'], function(pagination, com }; navigator.scrollToPostIndex = function(postIndex, highlight, duration) { - var scrollTo = components.get('post/anchor', postIndex); + var scrollTo = components.get('post/anchor', postIndex), + postEl = components.get('post', 'index', postIndex), + postHeight = postEl.height(), + viewportHeight = $(window).height(), + navbarHeight = components.get('navbar').height(); + if (!scrollTo.length) { navigator.scrollActive = false; @@ -202,7 +207,12 @@ define('navigator', ['forum/pagination', 'components'], function(pagination, com var done = false; function animateScroll() { - var scrollTop = (scrollTo.offset().top - ($(window).height() / 2)) + 'px'; + var scrollTop = 0; + if (postHeight < viewportHeight) { + scrollTop = (scrollTo.offset().top - (viewportHeight / 2) + (postHeight / 2)) + 'px'; + } else { + scrollTop = scrollTo.offset().top - navbarHeight; + } $('html, body').animate({ scrollTop: scrollTop