Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Colored bars!

  • Loading branch information...
commit 2ef021103620389f67f21a6287cf79aa3ceda45a 1 parent 6745679
Jonas Galvez authored
Showing with 72 additions and 6 deletions.
  1. +1 −4 client/index.html
  2. +24 −2 static/css/index.css
  3. +47 −0 static/js/index.js
View
5 client/index.html
@@ -11,10 +11,7 @@
<form id="voting-room-form" style="display: none;" action="/voting-room" method="post">
</form>
<div id="column-b">
- <div class="bar" style="height: 50px; background-color: #545454;"></div>
- <div class="bar" style="height: 30px; background-color: #c2c2c2;"></div>
- <div class="bar" style="height: 80px; background-color: #545454;"></div>
- <div class="bar" style="height: 120px; background-color: #c2c2c2;"></div>
+ <div id="add-bar" class="bar" style="height: 20px; background-color: #ccc;"></div>
</div>
<div id="column-a">
<div id="column-a-container">
View
26 static/css/index.css
@@ -110,12 +110,34 @@ body:after {
padding-top: 30px;
border-left: 2px solid #fc781a;
width: 60%;
- height: 800px;
+ min-height: 390px;
float: right;
overflow-x: hidden;
z-index: 1;
}
-.bar{
+.bar {
width: 100%;
}
+.bar input {
+ margin-top: 10px;
+ margin-left: 10px;
+ font-family: 'Lobster', sans-serif;
+ font-size: 30px;
+ width: 80%;
+ border: none;
+ background: none;
+}
+.bar input:focus {
+ border: none;
+ background-color: none;
+}
+#add-bar {
+ cursor: pointer;
+}
+#add-bar:hover {
+ background-color: #808080 !important;
+}
+#add-bar:active {
+ background-color: #808080 !important;
+}
View
47 static/js/index.js
@@ -5,6 +5,53 @@ nodevote.ui.handlers['create'] = {
$('#voting-room-form').submit();
}
}
+nodevote.ui.handlers['add-bar'] = {
+ 'click': function() {
+ var color = nodevote.ui.next_random_color();
+ var bar = nodevote.ui.create_bar(60, color.back);
+ $('#add-bar').before(bar);
+ bar.find('input').css('color', '#' + color.fore);
+ }
+};
+nodevote.ui.colors = [
+ ['295ced', '082065'],
+ ['64d004', '142901'],
+ ['b55922', '261307'],
+ ['feeda7', 'f8c803'],
+ ['aba1ec', '3b26bd'],
+ ['44b4ff', '005c99'],
+ ['31764f', '000'],
+ ['68e37f', '19882e'],
+ ['cbfcfb', '2bf2ef'],
+ ['aaf36c', '55a80e'],
+ ['373c41', '000']
+];
+(function() {
+ var _colors = nodevote.ui.colors;
+ nodevote.ui.colors = [];
+ for(var i = 0, len = _colors.length; i < len; i++) {
+ nodevote.ui.colors[i] = {'back': _colors[i][0], 'fore': _colors[i][1]};
+ }
+})();
+nodevote.ui.selected_colors = {};
+nodevote.ui.next_random_color = function() {
+ var len = nodevote.ui.colors.length;
+ var i = Math.floor(Math.random()*len);
+ while(nodevote.ui.selected_colors[nodevote.ui.colors[i].back]) {
+ i = Math.floor(Math.random()*len);
+ }
+ var selected_color = nodevote.ui.colors[i];
+ nodevote.ui.selected_colors[selected_color.back] = selected_color;
+ return selected_color;
+}
+nodevote.ui.create_bar = function(height, color) {
+ return $(
+ '<div class="bar" style="height: ' + height + 'px; background-color: #' + color + ';">' +
+ '<input type="input"></input>' +
+ '</div>'
+ );
+}
$(document).ready(function() {
+ $('#add-bar').click(nodevote.ui.handlers['add-bar'].click);
$('#create').click(nodevote.ui.handlers['create'].click);
});
Please sign in to comment.
Something went wrong with that request. Please try again.