From 5ab44833ab904cfcea130d488417283bc51f19ba Mon Sep 17 00:00:00 2001 From: Kris Date: Wed, 14 Feb 2018 23:27:06 -0500 Subject: [PATCH 1/2] UX: Make mobile timeline extra short in landscape --- .../javascripts/discourse/widgets/topic-timeline.js.es6 | 3 ++- app/assets/stylesheets/common/topic-timeline.scss | 9 +++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 index 0b4d32661a6..72f52350c76 100644 --- a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 +++ b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 @@ -5,7 +5,8 @@ import { relativeAge } from 'discourse/lib/formatter'; import { iconNode } from 'discourse-common/lib/icon-library'; import RawHtml from 'discourse/widgets/raw-html'; -const SCROLLAREA_HEIGHT = 300; +const windowHeight = $(window).height(); +const SCROLLAREA_HEIGHT = (windowHeight < 425)? 150 : 300; const SCROLLER_HEIGHT = 50; const SCROLLAREA_REMAINING = SCROLLAREA_HEIGHT - SCROLLER_HEIGHT; const LAST_READ_HEIGHT = 20; diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss index b3d84c056ea..6a9899154d7 100644 --- a/app/assets/stylesheets/common/topic-timeline.scss +++ b/app/assets/stylesheets/common/topic-timeline.scss @@ -32,6 +32,9 @@ &.timeline-fullscreen.show { max-height: 700px; transition: max-height 0.4s ease-out; + @media screen and (max-height: 425px) { + max-height: 75vh; + } .topic-timeline { .timeline-footer-controls { display: inherit; @@ -52,6 +55,9 @@ box-shadow: 0px -2px 4px -1px rgba(0,0,0,.25); padding-top: 20px; z-index: z("fullscreen"); + @media screen and (max-height: 425px) { + padding-top: 10px; + } .back-button { display: none; } @@ -77,6 +83,9 @@ display: block; display: -webkit-box; -webkit-line-clamp: 8; + @media screen and (max-height: 425px) { + -webkit-line-clamp: 5; + } -webkit-box-orient: vertical; } .username { From 3faeb4f093e9f3dcbbee15025cd04935c64516cd Mon Sep 17 00:00:00 2001 From: Robin Ward Date: Thu, 15 Feb 2018 14:33:20 -0500 Subject: [PATCH 2/2] Calculate the heights when we need them --- .../discourse/widgets/topic-timeline.js.es6 | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 index 72f52350c76..a82525157f6 100644 --- a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 +++ b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 @@ -5,12 +5,17 @@ import { relativeAge } from 'discourse/lib/formatter'; import { iconNode } from 'discourse-common/lib/icon-library'; import RawHtml from 'discourse/widgets/raw-html'; -const windowHeight = $(window).height(); -const SCROLLAREA_HEIGHT = (windowHeight < 425)? 150 : 300; const SCROLLER_HEIGHT = 50; -const SCROLLAREA_REMAINING = SCROLLAREA_HEIGHT - SCROLLER_HEIGHT; const LAST_READ_HEIGHT = 20; +function scrollareaHeight() { + return ($(window).height() < 425) ? 150 : 300; +} + +function scrollareaRemaining() { + return scrollareaHeight() - SCROLLER_HEIGHT; +} + function clamp(p, min=0.0, max=1.0) { return Math.max(Math.min(p, max), min); } @@ -28,7 +33,7 @@ createWidget('timeline-last-read', { tagName: 'div.timeline-last-read', buildAttributes(attrs) { - const bottom = SCROLLAREA_HEIGHT - (LAST_READ_HEIGHT / 2); + const bottom = scrollareaHeight() - (LAST_READ_HEIGHT / 2); const top = attrs.top > bottom ? bottom : attrs.top; return { style: `height: ${LAST_READ_HEIGHT}px; top: ${top}px` }; }, @@ -116,7 +121,7 @@ createWidget('timeline-scrollarea', { buildKey: () => `timeline-scrollarea`, buildAttributes() { - return { style: `height: ${SCROLLAREA_HEIGHT}px` }; + return { style: `height: ${scrollareaHeight()}px` }; }, defaultState(attrs) { @@ -169,8 +174,8 @@ createWidget('timeline-scrollarea', { const percentage = state.percentage; if (percentage === null) { return; } - const before = SCROLLAREA_REMAINING * percentage; - const after = (SCROLLAREA_HEIGHT - before) - SCROLLER_HEIGHT; + const before = scrollareaRemaining() * percentage; + const after = (scrollareaHeight() - before) - SCROLLER_HEIGHT; let showButton = false; const hasBackPosition = @@ -180,13 +185,13 @@ createWidget('timeline-scrollarea', { (position.lastRead && position.lastRead !== position.total); if (hasBackPosition) { - const lastReadTop = Math.round(position.lastReadPercentage * SCROLLAREA_HEIGHT); + const lastReadTop = Math.round(position.lastReadPercentage * scrollareaHeight()); showButton = ((before + SCROLLER_HEIGHT - 5) < lastReadTop) || (before > (lastReadTop + 25)); // Don't show if at the bottom of the timeline - if (lastReadTop > (SCROLLAREA_HEIGHT - (LAST_READ_HEIGHT / 2))) { + if (lastReadTop > (scrollareaHeight() - (LAST_READ_HEIGHT / 2))) { showButton = false; } } @@ -201,7 +206,7 @@ createWidget('timeline-scrollarea', { ]; if (hasBackPosition) { - const lastReadTop = Math.round(position.lastReadPercentage * SCROLLAREA_HEIGHT); + const lastReadTop = Math.round(position.lastReadPercentage * scrollareaHeight()); result.push(this.attach('timeline-last-read', { top: lastReadTop, lastRead: position.lastRead,