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

js/bower.json

@@ -8,6 +8,7 @@
     "moment": "~2.8.4",
     "color-thief": "v2.0",
     "mithril": "lhorie/mithril.js#next",
-    "loader.js": "~3.2.1"
+    "loader.js": "~3.2.1",
+    "fastclick": "~1.0.6"
   }
 }

js/forum/Gulpfile.js

@@ -11,7 +11,8 @@ gulp({
     '../bower_components/moment/moment.js',
     '../bower_components/bootstrap/dist/js/bootstrap.js',
     '../bower_components/spin.js/spin.js',
-    '../bower_components/spin.js/jquery.spin.js'
+    '../bower_components/spin.js/jquery.spin.js',
+    '../bower_components/fastclick/lib/fastclick.js'
   ],
   moduleFiles: [
     'src/**/*.js',

js/forum/src/components/composer-body.js

@@ -25,10 +25,12 @@ export default class ComposerBody extends Component {
   view(className) {
     this.editor.props.disabled = this.loading() || !this.ready();
 
+    var headerItems = this.headerItems().toArray();
+
     return m('div', {className, config: this.onload.bind(this)}, [
       avatar(this.props.user, {className: 'composer-avatar'}),
       m('div.composer-body', [
-        m('ul.composer-header', listItems(this.headerItems().toArray())),
+        headerItems.length ? m('ul.composer-header', listItems(headerItems)) : '',
         m('div.composer-editor', this.editor.view())
       ]),
       LoadingIndicator.component({className: 'composer-loading'+(this.loading() ? ' active' : '')})

js/forum/src/components/composer.js

@@ -273,7 +273,7 @@ class Composer extends Component {
       items.add('exitFullScreen', this.control({ icon: 'compress', title: 'Exit Full Screen', onclick: this.exitFullScreen.bind(this) }));
     } else {
       if (this.position() !== Composer.PositionEnum.MINIMIZED) {
-        items.add('minimize', this.control({ icon: 'minus minimize', title: 'Minimize', onclick: this.minimize.bind(this) }));
+        items.add('minimize', this.control({ icon: 'minus minimize', title: 'Minimize', onclick: this.minimize.bind(this), wrapperClass: 'back-control' }));
         items.add('fullScreen', this.control({ icon: 'expand', title: 'Full Screen', onclick: this.fullScreen.bind(this) }));
       }
       items.add('close', this.control({ icon: 'times', title: 'Close', onclick: this.close.bind(this) }));

js/forum/src/components/discussion-page.js

@@ -208,16 +208,16 @@ export default class DiscussionPage extends mixin(Component, evented) {
     items.add('controls',
       DropdownSplit.component({
         items: this.discussion().controls(this).toArray(),
-        icon: 'reply',
-        buttonClass: 'btn btn-primary',
-        wrapperClass: 'primary-control'
+        icon: 'ellipsis-v',
+        className: 'primary-control',
+        buttonClass: 'btn btn-primary'
       })
     );
 
     items.add('scrubber',
       PostScrubber.component({
         stream: this.stream,
-        wrapperClass: 'title-control'
+        className: 'title-control'
       })
     );
 

js/forum/src/components/form-modal.js

@@ -19,7 +19,7 @@ export default class FormModal extends Component {
 
     return m('div.modal-dialog', {className: options.className, config: this.element}, [
       m('div.modal-content', [
-        m('a[href=javascript:;].btn.btn-icon.btn-link.close.back-control', {onclick: this.hide.bind(this)}, icon('times')),
+        m('div.back-control.close', m('a[href=javascript:;].btn.btn-icon.btn-link', {onclick: this.hide.bind(this)}, icon('times icon'))),
         m('form', {onsubmit: this.onsubmit.bind(this)}, [
           m('div.modal-header', m('h3.title-control', options.title)),
           alert ? m('div.modal-alert', alert) : '',

js/forum/src/components/notification-list.js

@@ -0,0 +1,89 @@
+import Component from 'flarum/component';
+import avatar from 'flarum/helpers/avatar';
+import icon from 'flarum/helpers/icon';
+import username from 'flarum/helpers/username';
+import DropdownButton from 'flarum/components/dropdown-button';
+import ActionButton from 'flarum/components/action-button';
+import ItemList from 'flarum/utils/item-list';
+import Separator from 'flarum/components/separator';
+import LoadingIndicator from 'flarum/components/loading-indicator';
+import Discussion from 'flarum/models/discussion';
+
+export default class NotificationList extends Component {
+  constructor(props) {
+    super(props);
+
+    this.loading = m.prop(false);
+    this.load();
+  }
+
+  view() {
+    var user = this.props.user;
+
+    var groups = [];
+    if (app.cache.notifications) {
+      var groupsObject = {};
+      app.cache.notifications.forEach(notification => {
+        var subject = notification.subject();
+        var discussion = subject instanceof Discussion ? subject : (subject.discussion && subject.discussion());
+        var key = discussion ? discussion.id() : 0;
+        groupsObject[key] = groupsObject[key] || {discussion: discussion, notifications: []};
+        groupsObject[key].notifications.push(notification);
+        if (groups.indexOf(groupsObject[key]) === -1) {
+          groups.push(groupsObject[key]);
+        }
+      });
+    }
+
+    return m('div.notification-list', [
+      m('div.notifications-header', [
+        m('div.primary-control',
+          ActionButton.component({
+            className: 'btn btn-icon btn-link btn-sm',
+            icon: 'check',
+            title: 'Mark All as Read',
+            onclick: this.markAllAsRead.bind(this)
+          })
+        ),
+        m('h4.title-control', 'Notifications')
+      ]),
+      m('div.notifications-content', groups.length
+        ? groups.map(group => {
+          return m('div.notification-group', [
+            group.discussion ? m('a.notification-group-header', {
+              href: app.route.discussion(group.discussion),
+              config: m.route
+            }, group.discussion.title()) : m('div.notification-group-header', app.config['forum_title']),
+            m('ul.notification-group-list', group.notifications.map(notification => {
+              var NotificationComponent = app.notificationComponentRegistry[notification.contentType()];
+              return NotificationComponent ? m('li', NotificationComponent.component({notification})) : '';
+            }))
+          ])
+        })
+        : (!this.loading() ? m('div.no-notifications', 'No Notifications') : '')),
+      this.loading() ? LoadingIndicator.component() : ''
+    ]);
+  }
+
+  load() {
+    if (!app.cache.notifications || app.session.user().unreadNotificationsCount()) {
+      var component = this;
+      this.loading(true);
+      m.redraw();
+      app.store.find('notifications').then(notifications => {
+        app.session.user().pushData({unreadNotificationsCount: 0});
+        this.loading(false);
+        app.cache.notifications = notifications.sort((a, b) => b.time() - a.time());
+        m.redraw();
+      });
+    }
+  }
+
+  markAllAsRead() {
+    app.cache.notifications.forEach(function(notification) {
+      if (!notification.isRead()) {
+        notification.save({isRead: true});
+      }
+    })
+  }
+}

js/forum/src/components/notifications-page.js

@@ -0,0 +1,16 @@
+import Component from 'flarum/component';
+import NotificationList from 'flarum/components/notification-list';
+
+export default class NotificationsPage extends Component {
+  constructor(props) {
+    super(props);
+
+    app.current = this;
+    app.history.push('notifications');
+    app.drawer.hide();
+  }
+
+  view() {
+    return m('div', NotificationList.component());
+  }
+}

js/forum/src/components/post-loading.js

@@ -4,7 +4,7 @@ import avatar from 'flarum/helpers/avatar';
 export default class PostLoadingComponent extends Component {
   view() {
     return m('div.post.comment-post.loading-post.fake-post',
-      m('header.post-header', avatar(), m('div.fake-text')),
+      m('header.post-header', avatar(), ' ', m('div.fake-text')),
       m('div.post-body', m('div.fake-text'), m('div.fake-text'), m('div.fake-text'))
     );
   }

js/forum/src/components/post-scrubber.js

@@ -65,7 +65,7 @@ export default class PostScrubber extends Component {
     var unreadPercent = unreadCount / this.count();
 
     // @todo clean up duplication
-    return m('div.stream-scrubber.dropdown'+(this.disabled() ? '.disabled' : ''), {config: this.onload.bind(this)}, [
+    return m('div.stream-scrubber.dropdown'+(this.disabled() ? '.disabled' : ''), {config: this.onload.bind(this), className: this.props.className}, [
       m('a.btn.btn-default.dropdown-toggle[href=javascript:;][data-toggle=dropdown]', [
         m('span.index', retain || formatNumber(this.visibleIndex())), ' of ', m('span.count', formatNumber(this.count())), ' posts ',
         icon('sort icon-glyph')

js/forum/src/components/reply-placeholder.js

@@ -3,8 +3,14 @@ import avatar from 'flarum/helpers/avatar';
 
 export default class ReplyPlaceholder extends Component {
   view() {
-    return m('article.post.reply-post', {onmousedown: () => this.props.discussion.replyAction(true)}, [
-      m('header.post-header', avatar(app.session.user()), 'Write a Reply...'),
+    return m('article.post.reply-post', {
+      onclick: () => this.props.discussion.replyAction(true),
+      onmousedown: (e) => {
+        $(e.target).trigger('click');
+        e.preventDefault();
+      }
+    }, [
+      m('header.post-header', avatar(app.session.user()), ' Write a Reply...'),
     ]);
   }
 }

js/forum/src/components/search-box.js

@@ -111,6 +111,7 @@ export default class SearchBox extends Component {
           case 13: // Return
             this.$('input').blur();
             m.route(this.getItem(this.index()).find('a').attr('href'));
+            app.drawer.hide();
             break;
 
           case 27: // Escape

js/forum/src/components/settings-page.js

@@ -19,6 +19,7 @@ export default class SettingsPage extends UserPage {
 
     this.setupUser(app.session.user());
     app.setTitle('Settings');
+    app.drawer.hide();
   }
 
   content() {

js/forum/src/components/user-notifications.js

@@ -1,39 +1,18 @@
 import Component from 'flarum/component';
-import avatar from 'flarum/helpers/avatar';
 import icon from 'flarum/helpers/icon';
-import username from 'flarum/helpers/username';
 import DropdownButton from 'flarum/components/dropdown-button';
-import ActionButton from 'flarum/components/action-button';
-import ItemList from 'flarum/utils/item-list';
-import Separator from 'flarum/components/separator';
-import LoadingIndicator from 'flarum/components/loading-indicator';
-import Discussion from 'flarum/models/discussion';
+import NotificationList from 'flarum/components/notification-list';
 
 export default class UserNotifications extends Component {
   constructor(props) {
     super(props);
 
-    this.loading = m.prop(false);
+    this.showing = m.prop(false);
   }
 
   view() {
     var user = this.props.user;
 
-    var groups = [];
-    if (app.cache.notifications) {
-      var groupsObject = {};
-      app.cache.notifications.forEach(notification => {
-        var subject = notification.subject();
-        var discussion = subject instanceof Discussion ? subject : (subject.discussion && subject.discussion());
-        var key = discussion ? discussion.id() : 0;
-        groupsObject[key] = groupsObject[key] || {discussion: discussion, notifications: []};
-        groupsObject[key].notifications.push(notification);
-        if (groups.indexOf(groupsObject[key]) === -1) {
-          groups.push(groupsObject[key]);
-        }
-      });
-    }
-
     return DropdownButton.component({
       className: 'notifications',
       buttonClass: 'btn btn-default btn-rounded btn-naked btn-icon'+(user.unreadNotificationsCount() ? ' unread' : ''),
@@ -42,55 +21,14 @@ export default class UserNotifications extends Component {
         m('span.notifications-icon', user.unreadNotificationsCount() || icon('bell icon-glyph')),
         m('span.label', 'Notifications')
       ],
-      buttonClick: this.load.bind(this),
-      menuContent: [
-        m('div.notifications-header', [
-          ActionButton.component({
-            className: 'btn btn-icon btn-link btn-sm',
-            icon: 'check',
-            title: 'Mark All as Read',
-            onclick: this.markAllAsRead.bind(this)
-          }),
-          m('h4', 'Notifications')
-        ]),
-        m('div.notifications-content', groups.length
-          ? groups.map(group => {
-            return m('div.notification-group', [
-              group.discussion ? m('a.notification-group-header', {
-                href: app.route.discussion(group.discussion),
-                config: m.route
-              }, group.discussion.title()) : m('div.notification-group-header', app.config['forum_title']),
-              m('ul.notifications-list', group.notifications.map(notification => {
-                var NotificationComponent = app.notificationComponentRegistry[notification.contentType()];
-                return NotificationComponent ? m('li', NotificationComponent.component({notification})) : '';
-              }))
-            ])
-          })
-          : (!this.loading() ? m('div.no-notifications', 'No Notifications') : '')),
-        this.loading() ? LoadingIndicator.component() : ''
-      ]
+      buttonClick: (e) => {
+        if ($('body').hasClass('drawer-open')) {
+          m.route(app.route('notifications'));
+        } else {
+          this.showing(true);
+        }
+      },
+      menuContent: this.showing() ? NotificationList.component() : []
     });
   }
-
-  load() {
-    if (!app.cache.notifications || this.props.user.unreadNotificationsCount()) {
-      var component = this;
-      this.loading(true);
-      m.redraw();
-      app.store.find('notifications').then(notifications => {
-        this.props.user.pushData({unreadNotificationsCount: 0});
-        this.loading(false);
-        app.cache.notifications = notifications.sort((a, b) => b.time() - a.time());
-        m.redraw();
-      })
-    }
-  }
-
-  markAllAsRead() {
-    app.cache.notifications.forEach(function(notification) {
-      if (!notification.isRead()) {
-        notification.save({isRead: true});
-      }
-    })
-  }
 }

js/forum/src/components/user-page.js

@@ -23,6 +23,7 @@ export default class UserPage extends Component {
 
     app.history.push('user');
     app.current = this;
+    app.drawer.hide();
   }
 
   /*

js/forum/src/initializers/boot.js

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

js/forum/src/initializers/routes.js

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

js/forum/src/utils/drawer.js

@@ -0,0 +1,13 @@
+export default class Drawer {
+  hide() {
+    $('body').removeClass('drawer-open');
+  }
+
+  show() {
+    $('body').addClass('drawer-open');
+  }
+
+  toggle() {
+    $('body').toggleClass('drawer-open');
+  }
+}

js/lib/components/back-button.js

@@ -18,15 +18,14 @@ export default class BackButton extends Component {
       m('button.btn.btn-default.btn-icon.back', {onclick: history.back.bind(history)}, icon('chevron-left icon')),
       pane && pane.active ? m('button.btn.btn-default.btn-icon.pin'+(pane.pinned ? '.active' : ''), {onclick: pane.togglePinned.bind(pane)}, icon('thumb-tack icon')) : '',
     ]) : (this.props.drawer ? [
-      m('button.btn.btn-default.btn-icon.drawer-toggle', {onclick: this.toggleDrawer.bind(this)}, icon('reorder icon'))
+      m('button.btn.btn-default.btn-icon.drawer-toggle', {
+        onclick: app.drawer.toggle.bind(app.drawer),
+        className: app.session.user() && app.session.user().unreadNotificationsCount() ? 'unread-notifications' : ''
+      }, icon('reorder icon'))
     ] : ''));
   }
 
   onload(element, isInitialized, context) {
     context.retain = true;
   }
-
-  toggleDrawer() {
-    $('body').toggleClass('drawer-open');
-  }
 }

js/lib/components/dropdown-split.js

@@ -21,7 +21,7 @@ export default class DropdownSplit extends Component {
 
     return m('div', {className: 'dropdown dropdown-split btn-group item-count-'+(items.length)+' '+this.props.className}, [
       ActionButton.component(buttonProps),
-      m('a[href=javascript:;]', {className: 'dropdown-toggle '+this.props.buttonClass, 'data-toggle': 'dropdown'}, [
+      m('a[href=javascript:;]', {className: 'dropdown-toggle btn-icon '+this.props.buttonClass, 'data-toggle': 'dropdown'}, [
         icon('caret-down icon-caret'),
         icon((this.props.icon || 'ellipsis-v')+' icon'),
       ]),

js/lib/components/nav-item.js

@@ -4,7 +4,7 @@ import icon from 'flarum/helpers/icon'
 export default class NavItem extends Component {
   view() {
     var active = this.constructor.active(this.props);
-    return m('li'+(active ? '.active' : ''), m('a', {
+    return m('li'+(active ? '.active' : ''), m('a.has-icon', {
       href: this.props.href,
       onclick: this.props.onclick,
       config: m.route