mirror of
https://github.com/flarum/core.git
synced 2025-10-12 07:24:27 +02:00
Significantly improve mobile UX
Most of #137 done. - Use FastClick to make everything feel more responsive - Use transforms for animations to make them silky smooth - Style the drawer the same as the header to keep things simple - Revert to fixed composer, but allow it to be minimised - Add a separate notifications page for mobile so it’s easy to go back - Add indicator to the menu button when there are unread notifications - Close the drawer when navigating away - Make dropdowns/modals scrollable - Many other mobile tweaks and bug fixes Didn’t take much care to keep CSS clean, due to #103
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import ScrollListener from 'flarum/utils/scroll-listener';
|
||||
import History from 'flarum/utils/history';
|
||||
import Pane from 'flarum/utils/pane';
|
||||
import Drawer from 'flarum/utils/drawer';
|
||||
import mapRoutes from 'flarum/utils/map-routes';
|
||||
|
||||
import BackButton from 'flarum/components/back-button';
|
||||
@@ -19,6 +20,7 @@ export default function(app) {
|
||||
app.history = new History();
|
||||
app.pane = new Pane(id('page'));
|
||||
app.search = new SearchBox();
|
||||
app.drawer = new Drawer();
|
||||
app.cache = {};
|
||||
|
||||
m.startComputation();
|
||||
@@ -49,5 +51,9 @@ export default function(app) {
|
||||
|
||||
new ScrollListener(top => $('body').toggleClass('scrolled', top > 0)).start();
|
||||
|
||||
$(function() {
|
||||
FastClick.attach(document.body);
|
||||
});
|
||||
|
||||
app.booted = true;
|
||||
}
|
||||
|
@@ -2,6 +2,7 @@ import IndexPage from 'flarum/components/index-page';
|
||||
import DiscussionPage from 'flarum/components/discussion-page';
|
||||
import ActivityPage from 'flarum/components/activity-page';
|
||||
import SettingsPage from 'flarum/components/settings-page';
|
||||
import NotificationsPage from 'flarum/components/notifications-page';
|
||||
|
||||
export default function(app) {
|
||||
app.routes = {
|
||||
@@ -16,7 +17,8 @@ export default function(app) {
|
||||
'user.discussions': ['/u/:username/discussions', ActivityPage.component({filter: 'startedDiscussion'})],
|
||||
'user.posts': ['/u/:username/posts', ActivityPage.component({filter: 'posted'})],
|
||||
|
||||
'settings': ['/settings', SettingsPage.component()]
|
||||
'settings': ['/settings', SettingsPage.component()],
|
||||
'notifications': ['/notifications', NotificationsPage.component()]
|
||||
};
|
||||
|
||||
app.route.discussion = function(discussion, near) {
|
||||
|
Reference in New Issue
Block a user