Major CSS revamp

- Get rid of Bootstrap (except we still rely on some JS)
- Use BEM class names
- Rework variables/theme config
- Fix various bugs, including some on mobile

The CSS is still not ideal – it needs to be cleaned up some more. But
that can be a focus for after beta.

js/forum/src/utils/DiscussionControls.js

@@ -25,7 +25,7 @@ export default {
     ['user', 'moderation', 'destructive'].forEach(section => {
       const controls = this[section + 'Controls'](discussion, context).toArray();
       if (controls.length) {
-        items.add(section, controls);
+        controls.forEach(item => items.add(item.itemName, item));
         items.add(section + 'Separator', Separator.component());
       }
     });

js/forum/src/utils/Drawer.js

@@ -7,7 +7,7 @@ export default class Drawer {
   constructor() {
     // Set up an event handler so that whenever the content area is tapped,
     // the drawer will close.
-    $('.global-content').click(e => {
+    $('#content').click(e => {
       if (this.isOpen()) {
         e.preventDefault();
         this.hide();
@@ -22,7 +22,7 @@ export default class Drawer {
    * @public
    */
   isOpen() {
-    return $('body').hasClass('drawer-open');
+    return $('#app').hasClass('drawerOpen');
   }
 
   /**
@@ -31,7 +31,9 @@ export default class Drawer {
    * @public
    */
   hide() {
-    $('body').removeClass('drawer-open');
+    $('#app').removeClass('drawerOpen');
+
+    if (this.$backdrop) this.$backdrop.remove();
   }
 
   /**
@@ -40,15 +42,13 @@ export default class Drawer {
    * @public
    */
   show() {
-    $('body').addClass('drawer-open');
-  }
+    $('#app').addClass('drawerOpen');
 
-  /**
-   * Toggle the drawer.
-   *
-   * @public
-   */
-  toggle() {
-    $('body').toggleClass('drawer-open');
+    this.$backdrop = $('<div/>')
+      .addClass('drawer-backdrop fade')
+      .appendTo('body')
+      .click(() => this.hide());
+
+    setTimeout(() => this.$backdrop.addClass('in'));
   }
 }

js/forum/src/utils/History.js

@@ -93,6 +93,6 @@ export default class History {
   home() {
     this.stack.splice(1);
 
-    m.route(this.stack[0].url);
+    m.route('/');
   }
 }

js/forum/src/utils/Pane.js

@@ -122,8 +122,8 @@ export default class Pane {
    */
   render() {
     this.$element
-      .toggleClass('pane-pinned', this.pinned)
-      .toggleClass('has-pane', this.active)
-      .toggleClass('pane-showing', this.showing);
+      .toggleClass('panePinned', this.pinned)
+      .toggleClass('hasPane', this.active)
+      .toggleClass('paneShowing', this.showing);
   }
 }

js/forum/src/utils/PostControls.js

@@ -23,7 +23,7 @@ export default {
     ['user', 'moderation', 'destructive'].forEach(section => {
       const controls = this[section + 'Controls'](post, context).toArray();
       if (controls.length) {
-        items.add(section, controls);
+        controls.forEach(item => items.add(item.itemName, item));
         items.add(section + 'Separator', Separator.component());
       }
     });

js/forum/src/utils/UserControls.js

@@ -22,7 +22,7 @@ export default {
     ['user', 'moderation', 'destructive'].forEach(section => {
       const controls = this[section + 'Controls'](discussion, context).toArray();
       if (controls.length) {
-        items.add(section, controls);
+        controls.forEach(item => items.add(item.itemName, item));
         items.add(section + 'Separator', Separator.component());
       }
     });

js/forum/src/utils/affixSidebar.js

@@ -9,8 +9,8 @@ export default function affixSidebar(element, isInitialized) {
   if (isInitialized) return;
 
   const $sidebar = $(element);
-  const $header = $('.global-header');
-  const $footer = $('.global-footer');
+  const $header = $('#header');
+  const $footer = $('#footer');
 
   // Don't affix the sidebar if it is taller than the viewport (otherwise
   // there would be no way to scroll through its content).

js/forum/src/utils/slidable.js

@@ -40,7 +40,7 @@ export default function slidable(element) {
       $(this).css('transform', 'translate(' + x + 'px, 0)');
     };
 
-    $element.find('.slidable-slider').animate({'background-position-x': newPos}, options);
+    $element.find('.Slidable-content').animate({'background-position-x': newPos}, options);
   };
 
   /**
@@ -57,12 +57,12 @@ export default function slidable(element) {
     });
   };
 
-  $element.find('.slidable-slider')
+  $element.find('.Slidable-content')
     .on('touchstart', function(e) {
       // Update the references to the elements underneath the slider, provided
       // they're not disabled.
-      $underneathLeft = $element.find('.slidable-underneath-left:not(.disabled)');
-      $underneathRight = $element.find('.slidable-underneath-right:not(.disabled)');
+      $underneathLeft = $element.find('.Slidable-underneath--left:not(.disabled)');
+      $underneathRight = $element.find('.Slidable-underneath--right:not(.disabled)');
 
       startX = e.originalEvent.targetTouches[0].clientX;
       startY = e.originalEvent.targetTouches[0].clientY;
@@ -89,8 +89,10 @@ export default function slidable(element) {
         // If there are controls underneath the either side, then we'll show/hide
         // them depending on the slider's position. We also make the controls
         // icon get a bit bigger the further they slide.
-        const toggle = ($underneath, active) => {
+        const toggle = ($underneath, side) => {
           if ($underneath.length) {
+            const active = side === 'left' ? pos > 0 : pos < 0;
+
             if (active && $underneath.hasClass('elastic')) {
               pos -= pos * 0.5;
             }
@@ -99,12 +101,12 @@ export default function slidable(element) {
             const scale = Math.max(0, Math.min(1, (Math.abs(pos) - 25) / threshold));
             $underneath.find('.icon').css('transform', 'scale(' + scale + ')');
           } else {
-            pos = Math.min(0, pos);
+            pos = Math[side === 'left' ? 'min' : 'max'](0, pos);
           }
         };
 
-        toggle($underneathLeft, pos > 0);
-        toggle($underneathRight, pos < 0);
+        toggle($underneathLeft, 'left');
+        toggle($underneathRight, 'right');
 
         $(this).css('transform', 'translate(' + pos + 'px, 0)');
         $(this).css('background-position-x', pos + 'px');