Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5596 from discourse/mobile-landscape-timeline 

UX: Make mobile timeline extra short in landscape
This commit is contained in:
Robin Ward 2018-02-15 11:34:03 -08:00 committed by GitHub
parent 7af9ed6674 3faeb4f093
commit 32e8cef0ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,11 +5,17 @@ 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 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);
}
@ -27,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` };
},
@ -115,7 +121,7 @@ createWidget('timeline-scrollarea', {
buildKey: () => `timeline-scrollarea`,
buildAttributes() {
return { style: `height: ${SCROLLAREA_HEIGHT}px` };
return { style: `height: ${scrollareaHeight()}px` };
},
defaultState(attrs) {
@ -168,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 =
@ -179,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;
}
}
@ -200,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,

9
app/assets/stylesheets/common/topic-timeline.scss
View File

@ -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 {