From 5728b2f1e91f5f381e9ebdc58344f94ae71349de Mon Sep 17 00:00:00 2001 From: Isaac Chansky Date: Tue, 17 Mar 2015 21:23:23 -0400 Subject: [PATCH 1/7] add mobile sidebar --- index.html | 15 ++++++- src/script.js | 1 + src/ui/map.js | 32 +++++++------- src/ui/sidebar.js | 52 +++++++++++++++++++++++ styles/style.css | 106 +++++++++++++++++++++++++++++++++++++++++++++- 5 files changed, 186 insertions(+), 20 deletions(-) create mode 100644 src/ui/sidebar.js diff --git a/index.html b/index.html index a9f0968..78904f7 100644 --- a/index.html +++ b/index.html @@ -48,8 +48,19 @@
-
-
+
+ +
+
diff --git a/src/script.js b/src/script.js index b14d90e..af139a8 100644 --- a/src/script.js +++ b/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); diff --git a/src/ui/map.js b/src/ui/map.js index e1619f4..80c18f3 100644 --- a/src/ui/map.js +++ b/src/ui/map.js @@ -37,22 +37,22 @@ 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; - } - if (config.list) { - addition += 300; - } - - if (addition > 0) { - window.setTimeout(function() { - if (this.map) { - this.$node.css('left', '+=' + addition); - this.map.invalidateSize(); - } - }.bind(this), 50); - } + // var addition = 0; + // if (config.facets) { + // addition += 300; + // } + // if (config.list) { + // addition += 300; + // } + + // if (addition > 0) { + // window.setTimeout(function() { + // if (this.map) { + // this.$node.css('left', '+=' + addition); + // this.map.invalidateSize(); + // } + // }.bind(this), 50); + // } var mapConfig = config.map; diff --git a/src/ui/sidebar.js b/src/ui/sidebar.js new file mode 100644 index 0000000..f86be37 --- /dev/null +++ b/src/ui/sidebar.js @@ -0,0 +1,52 @@ +define(function(require, exports, module) { + 'use strict'; + var flight = require('flight'); + var $ = require('jquery'); + var _ = require('lodash'); + + + module.exports = flight.component(function sidebar() { + + this.defaultAttrs({ + listButton: '.select-list', + facetButton: '.select-facet', + list: '#list', + facet: '#facets' + }); + + + this.showList = function(e){ + e.preventDefault(); + this.select('list').show(); + this.select('facet').hide(); + this.select('listButton').addClass('active'); + this.select('facetButton').removeClass('active'); + } + + this.showFacet = function(e){ + e.preventDefault(); + this.select('facet').show(); + this.select('list').hide(); + this.select('facetButton').addClass('active'); + this.select('listButton').removeClass('active'); + } + + this.toggleSidebar = function(e) { + e.preventDefault(); + this.$node.toggleClass('open'); + } + + this.after('initialize', function() { + console.log('sidebar init'); + this.on('click', { + listButton: this.showList, + facetButton: this.showFacet, + }); + + // This is outside of the component, but it controls it.. perhaps refactor to include within root element? + $(document).on('click', '.sidebar-toggle', this.toggleSidebar.bind(this) ); + + + }); + }); +}); diff --git a/styles/style.css b/styles/style.css index 296aa98..13ccd03 100644 --- a/styles/style.css +++ b/styles/style.css @@ -100,7 +100,7 @@ body > div.container { top: 50px; bottom: 0; right:0; - z-index: 1; + z-index: -1; } .control { @@ -179,12 +179,114 @@ body > div.container { overflow-y: auto; } + +/* ==================== + SIDEBAR + ==================== */ + +.sidebar-toggle { + position: fixed; + right: 20px; + bottom: 20px; + border-radius: 50px; + width: 50px; + height: 50px; + background: #666; + cursor: pointer; +} + +.sidebar-toggle a { + text-align: center; + display: block; + position: relative; + top: 50%; + width: 25px; + height: 3px; + background: #fff; + margin: -2px auto; + border-radius: 6px; +} +.sidebar-toggle a:before, .sidebar-toggle a:after { + content: ""; + width: 25px; + height: 3px; + display: block; + position: relative; + background: inherit; + border-radius: 8px; +} +.sidebar-toggle a:before { + top: -8px; +} +.sidebar-toggle a:after { + bottom: -5px; + +} + +.sidebar { + width: 30%; + height: 100%; + position: relative; + padding-top: 50px; + background: #f3f3f3; + margin-left: -30%; + transition: all 0.2s; +} +.sidebar.open { + margin-left: 0; +} + +@media (max-width: 768px) { + .sidebar { + width: 70%; + margin-left: -70%; + } + .sidebar.open{ + margin-left: 0%; + } +} + +.sidebar-nav { + height: 50px; + width: 100%; + position: absolute; + top: 0; +} + +.sidebar-nav .items{ + overflow: auto; + zoom: 1; + list-style: none; + padding: 0; +} + +.sidebar-nav .items li{ + width: 50%; + float: left; +} + /*buttons*/ +.sidebar-nav a{ + text-decoration: none; + padding: 10px; + display: block; + text-align: center; +} +.sidebar-nav a.active{ + background: #666; + color: #fff; +} + +.sidebar .control { + height: 100%; + overflow-y: scroll; + overflow-x: hidden; +} + #facets .checkbox.selected label { font-weight: bold; } #list ul { - margin: -14px -14px 20px; padding-bottom: 20px; padding-left: 0; } From 96529694ffe5c41091a305da969d801230989b22 Mon Sep 17 00:00:00 2001 From: Isaac Chansky Date: Tue, 31 Mar 2015 23:30:19 -0400 Subject: [PATCH 2/7] fix up some style issues, degrade down from fully shown sidebar to toggleable slide-out from full to mobile, add some comments and clean up css --- index.html | 2 +- src/ui/sidebar.js | 1 + styles/style.css | 101 +++++++++++++++++++++++++++++++++++----------- 3 files changed, 79 insertions(+), 25 deletions(-) diff --git a/index.html b/index.html index 78904f7..df0684b 100644 --- a/index.html +++ b/index.html @@ -54,7 +54,7 @@