More mobile UX improvements

- Reposition the composer when shown
- Make preview button scroll the parent frame down
- Fix iframe infinite height loop
This commit is contained in:
Toby Zerner 2015-11-23 10:10:26 +10:30
parent c9401ce150
commit 675412f181
2 changed files with 18 additions and 2 deletions

View File

@ -1,6 +1,7 @@
import { override, extend } from 'flarum/extend';
import app from 'flarum/app';
import Composer from 'flarum/components/Composer';
import PostStream from 'flarum/components/PostStream';
import ModalManager from 'flarum/components/ModalManager';
import AlertManager from 'flarum/components/AlertManager';
import PostMeta from 'flarum/components/PostMeta';
@ -37,10 +38,13 @@ app.initializers.replace('boot', () => {
app.pageInfo = m.prop();
extend(ModalManager.prototype, 'show', function() {
const reposition = function() {
const info = app.pageInfo();
this.$().css('top', Math.max(0, info.scrollTop - info.offsetTop));
});
};
extend(ModalManager.prototype, 'show', reposition);
extend(Composer.prototype, 'show', reposition);
window.iFrameResizer = {
readyCallback: function() {
@ -48,6 +52,13 @@ app.initializers.replace('boot', () => {
}
};
extend(PostStream.prototype, 'goToNumber', function(promise, number) {
if (number === 'reply' && 'parentIFrame' in window && app.composer.$().css('position') === 'absolute') {
const itemTop = this.$('.PostStream-item:last').offset().top;
window.parentIFrame.scrollToOffset(0, itemTop);
}
});
app.pane = new Pane(document.getElementById('app'));
app.drawer = new Drawer();
app.composer = m.mount(document.getElementById('composer'), Composer.component());

View File

@ -9,6 +9,7 @@
.App {
padding-top: 0;
min-height: 0;
overflow: hidden;
&:before {
display: none;
@ -16,6 +17,7 @@
}
.App-content {
border-top: 0;
min-height: 0;
}
.DiscussionPage-nav--embed {
@media @tablet-up {
@ -80,4 +82,7 @@
right: 0 !important;
}
}
.Composer:not(.minimized) {
height: 400px !important;
}
}