Feature/mobile layout

index.html

@@ -48,12 +48,25 @@
     </nav>
 
     <div class="container">
-      <div id="list" class="control control-sidebar"></div>
-      <div id="facets" class="control control-sidebar"></div>
+
+      <aside id="sidebar" class="sidebar">
+        <div class="sidebar-toggle"><a href="#"></a></div>
+        <nav class="sidebar-nav">
+          <ul class="items">
+            <li><a data-select="list" class="sidebar-action active" href="#">List</a></li>
+            <li><a data-select="facets" class="sidebar-action" href="#">Filter</a></li>
+          </ul>
+        </nav>
+        <div id="list" class="control sidebar-item"></div>
+        <div id="facets" class="control sidebar-item"></div>
+      </aside>
+
       <div id="map"></div>
+
       <div id="info" class="control">
         <button type="button" class="close">&times;</button>
       </div>
+
     </div>
 
     <div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="aboutLabel" aria-hidden="true">

src/script.js

@@ -41,6 +41,7 @@ define(function(require) {
   require('ui/list').attachTo('#list');
   require('ui/facet').attachTo('#facets');
   require('ui/loading').attachTo('#loading');
+  require('ui/sidebar').attachTo('#sidebar');
   require('ui/project').attachTo(document);
   require('data/facet').attachTo(document);
   require('data/analytics').attachTo(document);

src/ui/map.js

@@ -2,6 +2,7 @@ define(function(require, exports, module) {
   'use strict';
   var flight = require('flight');
   var L = require('leaflet');
+  var $ = require('jquery');
   var _ = require('lodash');
   var timedWithObject = require('timed_with_object');
 
@@ -37,22 +38,13 @@ define(function(require, exports, module) {
     this.configureMap = function(ev, config) {
       this.trigger('mapStarted', {});
       // if list or facets are emabled, give the map less space
-      var addition = 0;
       if (config.facets) {
-        addition += 300;
+        $('body').addClass('has-facets');
       }
       if (config.list) {
-        addition += 300;
+        $('body').addClass('has-list');
       }
 
-      if (addition > 0) {
-        window.setTimeout(function() {
-          if (this.map) {
-            this.$node.css('left', '+=' + addition);
-            this.map.invalidateSize();
-          }
-        }.bind(this), 50);
-      }
 
       var mapConfig = config.map;
 

src/ui/sidebar.js

@@ -0,0 +1,80 @@
+define(function(require, exports, module) {
+  'use strict';
+  var flight = require('flight');
+  var $ = require('jquery');
+  var _ = require('lodash');
+
+
+  module.exports = flight.component(function sidebar() {
+
+    var potentialSidebarItems = ['facets', 'list'];
+    var presentItems = [];
+
+    this.defaultAttrs({
+      toggleButtons:  '.sidebar-action',
+      sidebarItems:   '.sidebar-item',
+      sidebarToggle:  '.sidebar-toggle'
+    });
+
+    this.configureSidebar = function(e, config){
+      var configAttr = _.keys(config);
+      presentItems = _.intersection(potentialSidebarItems, configAttr);
+
+      var $sidebar = this.$node;
+
+      // add class .sidebar-items-X based on active sidebar items
+      $sidebar.addClass('sidebar-items-'+presentItems.length);
+      // activate configured sidebar items
+      _.each(presentItems, function(item){
+        $sidebar.find(item).show();
+        $sidebar.find('[data-select="'+item+'"]').parent().show();
+      });
+
+      if( presentItems.length === 1) {
+        $sidebar.find('.sidebar-nav').hide();
+        $sidebar.addClass('no-tabs');
+      }
+    };
+
+    this.showItem = function(e, elemObj) {
+      // generic toggle fn for sidebar tabs
+      e.preventDefault();
+      var $el = $(elemObj.el);
+      var itemTitle = $el.data('select');
+      this.select('sidebarItems').hide();
+      this.$node.find('#'+itemTitle).show();
+      this.select('toggleButtons').removeClass('active');
+      $el.addClass('active');
+    };
+
+    this.showFullSidebar = function() {
+      var $sidebar = this.$node;
+      _.each(presentItems, function(item){
+        $sidebar.find(item).show();
+      });
+    };
+
+    this.toggleHiddenSidebar = function(e) {
+      e.preventDefault();
+      this.$node.toggleClass('open');
+      $('.sidebar-toggle').toggleClass('active');
+    };
+
+    this.after('initialize', function() {
+      this.on(document, 'config', this.configureSidebar);
+
+      this.on('click', {
+        toggleButtons: this.showItem,
+        sidebarToggle: this.toggleHiddenSidebar
+      });
+
+
+      $(window).on('resize', function(){
+        if( document.body.clientWidth > 955 ) {
+          this.showFullSidebar();
+        }
+      }.bind(this));
+
+    });
+  });
+});