github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-19 06:52:44 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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
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 { iconNode } from 'discourse-common/lib/icon-library';
import RawHtml from 'discourse/widgets/raw-html'; import RawHtml from 'discourse/widgets/raw-html';
const SCROLLAREA_HEIGHT = 300;
const SCROLLER_HEIGHT = 50; const SCROLLER_HEIGHT = 50;
const SCROLLAREA_REMAINING = SCROLLAREA_HEIGHT - SCROLLER_HEIGHT;
const LAST_READ_HEIGHT = 20; 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) { function clamp(p, min=0.0, max=1.0) {
return Math.max(Math.min(p, max), min); return Math.max(Math.min(p, max), min);
} }
@ -27,7 +33,7 @@ createWidget('timeline-last-read', {
tagName: 'div.timeline-last-read', tagName: 'div.timeline-last-read',
buildAttributes(attrs) { 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; const top = attrs.top > bottom ? bottom : attrs.top;
return { style: `height: ${LAST_READ_HEIGHT}px; top: ${top}px` }; return { style: `height: ${LAST_READ_HEIGHT}px; top: ${top}px` };
}, },
@ -115,7 +121,7 @@ createWidget('timeline-scrollarea', {
buildKey: () => `timeline-scrollarea`, buildKey: () => `timeline-scrollarea`,
buildAttributes() { buildAttributes() {
return { style: `height: ${SCROLLAREA_HEIGHT}px` }; return { style: `height: ${scrollareaHeight()}px` };
}, },
defaultState(attrs) { defaultState(attrs) {
@ -168,8 +174,8 @@ createWidget('timeline-scrollarea', {
const percentage = state.percentage; const percentage = state.percentage;
if (percentage === null) { return; } if (percentage === null) { return; }
const before = SCROLLAREA_REMAINING * percentage; const before = scrollareaRemaining() * percentage;
const after = (SCROLLAREA_HEIGHT - before) - SCROLLER_HEIGHT; const after = (scrollareaHeight() - before) - SCROLLER_HEIGHT;
let showButton = false; let showButton = false;
const hasBackPosition = const hasBackPosition =
@ -179,13 +185,13 @@ createWidget('timeline-scrollarea', {
(position.lastRead && position.lastRead !== position.total); (position.lastRead && position.lastRead !== position.total);
if (hasBackPosition) { if (hasBackPosition) {
const lastReadTop = Math.round(position.lastReadPercentage * SCROLLAREA_HEIGHT); const lastReadTop = Math.round(position.lastReadPercentage * scrollareaHeight());
showButton = ((before + SCROLLER_HEIGHT - 5) < lastReadTop) || showButton = ((before + SCROLLER_HEIGHT - 5) < lastReadTop) ||
(before > (lastReadTop + 25)); (before > (lastReadTop + 25));
// Don't show if at the bottom of the timeline // 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; showButton = false;
} }
} }
@ -200,7 +206,7 @@ createWidget('timeline-scrollarea', {
]; ];
if (hasBackPosition) { if (hasBackPosition) {
const lastReadTop = Math.round(position.lastReadPercentage * SCROLLAREA_HEIGHT); const lastReadTop = Math.round(position.lastReadPercentage * scrollareaHeight());
result.push(this.attach('timeline-last-read', { result.push(this.attach('timeline-last-read', {
top: lastReadTop, top: lastReadTop,
lastRead: position.lastRead, lastRead: position.lastRead,

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

@ -32,6 +32,9 @@
&.timeline-fullscreen.show { &.timeline-fullscreen.show {
max-height: 700px; max-height: 700px;
transition: max-height 0.4s ease-out; transition: max-height 0.4s ease-out;
@media screen and (max-height: 425px) {
max-height: 75vh;
}
.topic-timeline { .topic-timeline {
.timeline-footer-controls { .timeline-footer-controls {
display: inherit; display: inherit;
@ -52,6 +55,9 @@
box-shadow: 0px -2px 4px -1px rgba(0,0,0,.25); box-shadow: 0px -2px 4px -1px rgba(0,0,0,.25);
padding-top: 20px; padding-top: 20px;
z-index: z("fullscreen"); z-index: z("fullscreen");
@media screen and (max-height: 425px) {
padding-top: 10px;
}
.back-button { .back-button {
display: none; display: none;
} }
@ -77,6 +83,9 @@
display: block; display: block;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 8; -webkit-line-clamp: 8;
@media screen and (max-height: 425px) {
-webkit-line-clamp: 5;
}
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.username { .username {