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

less/forum/user.less

@@ -1,5 +1,5 @@
 .user-card {
-  .drawer-components();
+  .inverted-components();
   background-size: 100% 100%;
 
   &, & .container {
@@ -44,6 +44,11 @@
   padding-left: 130px;
   max-width: 800px;
 
+  @media @phone {
+    padding-left: 0;
+    text-align: center;
+  }
+
   & .user-identity {
     display: inline;
     vertical-align: middle;
@@ -51,16 +56,30 @@
   & .user-avatar {
     float: left;
     margin-left: -130px;
+
+    @media @phone {
+      float: none;
+      margin: 0 auto 20px;
+      width: 64px + 8px;
+    }
   }
   & .avatar-editor .dropdown-toggle {
     margin: 4px;
     line-height: 96px;
     font-size: 26px;
+
+    @media @phone {
+      line-height: 64px;
+    }
   }
   & .avatar {
     .avatar-size(96px);
     border: 4px solid @fl-body-bg;
     .box-shadow(0 2px 6px @fl-shadow-color);
+
+    @media @phone {
+      .avatar-size(64px);
+    }
   }
   & .badges {
     margin-left: 10px;
@@ -126,6 +145,10 @@
   & > li {
     margin-bottom: 30px;
     padding-left: 32px;
+
+    @media @phone {
+      padding-left: 24px;
+    }
   }
   & .activity-icon {
     .avatar-size(32px);
@@ -133,6 +156,10 @@
     margin-left: -50px;
     .box-shadow(0 0 0 3px #fff);
     margin-top: -5px;
+
+    @media @phone {
+      margin-left: -42px;
+    }
   }
 }
 .activity-info {
@@ -213,8 +240,10 @@
     right: 0;
     bottom: 0;
   }
-  & .dropdown-menu {
-    left: 35%;
-    top: 65%;
+  @media @tablet, @desktop, @desktop-hd {
+    & .dropdown-menu {
+      left: 35%;
+      top: 65%;
+    }
   }
 }