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/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});
+      }
+    })
+  }
+}