Permalink
Browse files

Remove the right sidebar. Everything on the left.

Previously, there was two sidebars. The language radio buttons were in the left
and the graphics were in the right. Everything is in the left one now.
  • Loading branch information...
1 parent d3b2e09 commit 9107b578683e67bda231ac40cbd51f9ede889afa @hdemers committed Feb 11, 2014
Showing with 68 additions and 74 deletions.
  1. +13 −26 birdwtch/static/css/app.less
  2. +2 −4 birdwtch/static/js/app.js
  3. +17 −17 birdwtch/static/js/stackedbar.js
  4. +36 −27 birdwtch/templates/index.html
@@ -25,8 +25,8 @@
@forest: #077500;
@white: white;
-@menuwidth: 280px;
-@graphwidth: 280px;
+@menuwidth: 680px;
+@graphwidth: 20px;
body {
background-color: @background;
@@ -37,32 +37,35 @@ a {
color: @blue;
}
-.sidebar {
+.js-sidebar {
position: absolute;
height: 100%;
overflow: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
- background-color: @dot;
z-index: 10;
opacity: 0.8;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
+ left: -(@menuwidth - 10px);
+ /*left: 0;*/
}
::-webkit-scrollbar {
display: none;
}
.menu {
- left: -(@menuwidth - 20px);
width: @menuwidth;
padding: 20px;
+ margin-right: 10px;
+ height: 100%;
+ background-color: @dot;
}
-.menu:hover {
+.js-sidebar:hover {
left: 0px;
}
@@ -205,29 +208,13 @@ footer {
// Graph related style
-.graph-container {
- right: -(@graphwidth - 20px);
- width: @graphwidth;
- background-color: transparent;
- padding-left: 10px;
-}
-
-.graphs {
- background-color: @dot;
- height: 100%;
-}
-
-.graph-container:hover {
- right: 0px;
-}
.language-graph {
+ float: right;
height: 100%;
-}
-
-text {
- font: 12px sans-serif;
- fill: @fontcolor;
+ width: @graphwidth;
+ margin-right: 10px;
+ background-color: transparent;
}
.axis path,
@@ -80,11 +80,9 @@ function ($, _, ko, viewmodel, websocket, worldmap, moment, pseudort, barchart)
}, 1000);
setTimeout(function () {
- $(".menu").css("left", "-100px");
- $(".graph-container").css("right", "-100px");
+ $(".js-sidebar").css("left", "-100px");
setTimeout(function () {
- $(".menu").css("left", "");
- $(".graph-container").css("right", "");
+ $(".js-sidebar").css("left", "");
}, 400);
}, 4000);
@@ -16,7 +16,7 @@ function ($, _, d3) {
that.init = function () {
barWidth = 20;
- margin = {top: 0, right: 320, bottom: 0, left: 0};
+ margin = {top: 0, right: 0, bottom: 0, left: 0};
width = barWidth + margin.left + margin.right;
height = $(selector).height() - margin.top - margin.bottom;
y = d3.scale.linear().rangeRound([height, 0]);
@@ -52,38 +52,38 @@ function ($, _, d3) {
.attr("width", barWidth)
.attr("height", function (d) { return y(d.y0) - y(d.y1); });
- texts = svg.selectAll("text")
- .data(data, function (d) {return d.name; });
+ //texts = svg.selectAll("text")
+ //.data(data, function (d) {return d.name; });
- texts.enter()
- .append("text")
- .attr("dy", "1em")
- .attr("x", 30)
- .attr("y", y_text)
- .text(function (d) { return d.name; });
+ //texts.enter()
+ //.append("text")
+ //.attr("dy", "1em")
+ //.attr("x", 30)
+ //.attr("y", y_text)
+ //.text(function (d) { return d.name; });
bars.transition()
.duration(700)
.attr("y", function (d) { return y(d.y1); })
.attr("height", function (d) { return y(d.y0) - y(d.y1); });
- texts.transition()
- .duration(700)
- .attr("y", y_text);
+ //texts.transition()
+ //.duration(700)
+ //.attr("y", y_text);
};
that.redraw = function () {
- if ($(selector).width() !== width) {
+ if ($(selector).height() !== height) {
// Remove everything under `selector`.
$(selector).children().remove();
that.init();
}
};
- y_text = function (d, i) {
- //var height = y(d.y0) - y(d.y1);
- return y(d.y1);
- };
+ //y_text = function (d, i) {
+ ////var height = y(d.y0) - y(d.y1);
+ //return y(d.y1);
+ //};
that.init();
return that;
@@ -13,39 +13,48 @@
{% endblock headscripts %}
{% block content %}
-<div class="sidebar menu hidden-xs">
- <h4> Showing tweets having geographic coordinates </h4>
-
- <p>Sometime tweets come with geographic coordinates attached as metadata.
- Showing this position on a map along with the language used to write the
- tweet, give us the opportunity to build interesting visualizations depicting
- the languages of this world. </p>
-
- Explore each language:
- <div data-bind="foreach: languageLayers">
- <div class="radio">
- <label>
- <input type="radio" name="layerGroup"
- data-bind="value: code, checked: $root.layerShown" />
- <span data-bind="text:name"></span>
- </label>
- </div>
- </div>
+<div class="js-sidebar hidden-xs">
- <footer>
- <p>Built by hdemers</p>
- Source <a href="https://github.com/hdemers/birdwtch"> code</a> on
- GitHub
- </footer>
+ <div class="container-fluid menu">
-</div>
+ <div class="row">
+ <div class="col-md-4">
+ <h4> Showing tweets having geographic coordinates </h4>
+
+ <p>Sometime tweets come with geographic coordinates attached as metadata.
+ Showing this position on a map along with the language used to write the
+ tweet, give us the opportunity to build interesting visualizations depicting
+ the languages of this world. </p>
+
+ Explore each language:
+ <div data-bind="foreach: languageLayers">
+ <div class="radio">
+ <label>
+ <input type="radio" name="layerGroup"
+ data-bind="value: code, checked: $root.layerShown" />
+ <span data-bind="text:name"></span>
+ </label>
+ </div>
+ </div>
+
+ <footer>
+ <p>Built by hdemers</p>
+ Source <a href="https://github.com/hdemers/birdwtch"> code</a> on
+ GitHub
+ </footer>
+ </div>
+
+ <div class="col-md-4">
+ </div>
+
+ </div>
-<div class="sidebar graph-container hidden-xs">
- <div class="graphs">
- <div class="language-graph"></div>
</div>
+
+ <div class="language-graph"></div>
</div>
+
<div class="container-fluid">
<div id="worldmap"></div>

0 comments on commit 9107b57

Please sign in to comment.