github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-27 03:55:42 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Make mobile timeline extra short in landscape

Browse Source
This commit is contained in:
Kris 2018-02-14 23:27:06 -05:00
parent a03e7cee63
commit 5ab44833ab
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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 {