Small redesign on poll options.

static/cranefly/css/cranefly.css

@@ -1008,9 +1008,11 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{color:#333;text-decoration:n
 .forum-threads-list .threads-actions{background-color:#fbfbfb;border-top:1px solid #d5d5d5;border-radius:0 0 2px 2px;overflow:auto;padding:4px;color:#999;font-size:11.9px}.forum-threads-list .threads-actions form{margin-bottom:0}
 .forum-threads-extra{overflow:auto}.forum-threads-extra.extra-top{margin-bottom:20px}
 .forum-threads-extra .threads-signin-message{float:right}.forum-threads-extra .threads-signin-message a:link,.forum-threads-extra .threads-signin-message a:visited{color:#333}
-.thread-poll{background-color:#fff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0 0 0 3px #eee;-moz-box-shadow:0 0 0 3px #eee;box-shadow:0 0 0 3px #eee;margin-bottom:20px;padding:20px}
 .thread-buttons{overflow:auto}.thread-buttons .pull-right{margin-left:14px}
 .thread-buttons .thread-signin-message{float:right}.thread-buttons .thread-signin-message a:link,.thread-buttons .thread-signin-message a:visited{color:#333}
+.thread-poll-body{background-color:#fff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0 0 0 3px #eee;-moz-box-shadow:0 0 0 3px #eee;box-shadow:0 0 0 3px #eee;margin-bottom:20px;padding:10px 20px}.thread-poll-body h2{margin-bottom:20px}
+.thread-poll-body .poll-options dd{padding-top:2px}.thread-poll-body .poll-options dd .progress{background:none;border:1px solid #d5d5d5;border-radius:10px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;height:auto;margin:0;padding:2px}.thread-poll-body .poll-options dd .progress .bar{border-radius:5px;height:10px;min-width:10px}
+.thread-poll-body .poll-options dd .option-details{padding-left:6px;color:#999;font-size:11.9px}
 .thread-body .post-wrapper .post-body{margin-bottom:20px;overflow:auto}.thread-body .post-wrapper .post-body .user-avatar{border-radius:5px;float:left;width:100px;height:100px}
 .thread-body .post-wrapper .post-body .post-content{background-color:#fff;border:1px solid #e7e7e7;border-radius:5px;margin-left:121px;min-height:100px;position:relative}.thread-body .post-wrapper .post-body .post-content:after,.thread-body .post-wrapper .post-body .post-content:before{right:100%;border:solid transparent;content:"";height:0;width:0;position:absolute;pointer-events:none}
 .thread-body .post-wrapper .post-body .post-content:after{border-color:transparent;border-right-color:#fff;border-width:10.5px;top:14px;margin-top:0}

static/cranefly/css/cranefly/thread.less

@@ -1,15 +1,6 @@
 // Thread view
 // -------------------------
 
-.thread-poll {
-  background-color: @categoryBackground;
-  border: 1px solid @categoryBorder;
-  border-radius: @borderRadiusSmall;
-  .box-shadow(0px 0px 0px 3px @categoryShadow);
-  margin-bottom: @baseLineHeight;
-  padding: @baseLineHeight;
-}
-
 .thread-buttons {
   overflow: auto;
 
@@ -26,6 +17,53 @@
   }
 }
 
+.thread-poll-body {
+  background-color: @categoryBackground;
+  border: 1px solid @categoryBorder;
+  border-radius: @borderRadiusSmall;
+  .box-shadow(0px 0px 0px 3px @categoryShadow);
+  margin-bottom: @baseLineHeight;
+  padding: (@baseLineHeight / 2) @baseLineHeight;
+
+  h2 {
+  	margin-bottom: @baseLineHeight;
+  }
+
+	.poll-options {
+		dd {
+			padding-top: 2px;
+
+		  .progress {
+		  	background: none;
+		  	border: 1px solid darken(@bodyBackground, 15%);
+		  	border-radius: 10px;
+		  	.box-shadow(none);
+		  	height: auto;
+		  	margin: 0px;
+		  	padding: 2px;
+
+		  	.bar {
+		  		border-radius: 5px;
+		  		height: 10px;
+
+		  		min-width: 10px;
+		  	}
+		  }
+
+		  .option-details {
+		  	padding-left: 6px;
+
+		  	color: @grayLight;
+		  	font-size: @fontSizeSmall;
+		  }
+		}
+	}
+
+	.poll-footer {
+
+	}
+}
+
 // Thread body styles
 .thread-body {
   .post-wrapper {

templates/cranefly/threads/thread.html

@@ -40,53 +40,39 @@
   {% endif %}
 
   {% if thread.has_poll %}
-  <div id="color_demo" style="background: #FFF; padding: 32px; overflow: auto;">
-    <h1>Random Colors</h1>
-    {% for i in range(12) %}
-    <div style="background-color: #{{ color_spin('049cdb', loop.index0 * 265) }}; margin: 4px; width:24px; height: 24px; border-radius: 3px; float: left;"></div>
-    {% endfor %}
-    <hr style="clear: both; border: none;">
-    {% for i in range(12) %}
-    <div style="background-color: #{{ color_lighten(color_spin('049cdb', loop.index0 * 265), 12, loop.index, 90) }}; margin: 4px; width:24px; height: 24px; border-radius: 3px; float: left;"></div>
-    {% endfor %}
-    <h1>Desaturate Colors</h1>
-    {% for i in range(32) %}
-    <div style="background-color: #{{ color_desaturate('049cdb', 32, loop.index) }}; margin: 4px; width:24px; height: 24px; border-radius: 3px; float: left;"></div>
-    {% endfor %}
-    <h1>Lighten Colors</h1>
-    {% for i in range(32) %}
-    <div style="background-color: #{{ color_lighten('049cdb', 32, loop.index) }}; margin: 4px; width:24px; height: 24px; border-radius: 3px; float: left;"></div>
-    {% endfor %}
-    <hr style="clear: both; border: none;">
-    {% for i in range(32) %}
-    <div style="background-color: #{{ color_desaturate(color_lighten('049cdb', 32, loop.index), 32, loop.index) }}; margin: 4px; width:24px; height: 24px; border-radius: 3px; float: left;"></div>
-    {% endfor %}
-    <h1>Darken Colors</h1>
-    {% for i in range(32) %}
-    <div style="background-color: #{{ color_darken('049cdb', 32, loop.index) }}; margin: 4px; width:24px; height: 24px; border-radius: 3px; float: left;"></div>
-    {% endfor %}
-    <hr style="clear: both; border: none;">
-    {% for i in range(32) %}
-    <div style="background-color: #{{ color_desaturate(color_darken('049cdb', 32, loop.index), 32, loop.index) }}; margin: 4px; width:24px; height: 24px; border-radius: 3px; float: left;"></div>
-    {% endfor %}
-  </div>
-  <div class="thread-poll">
-    <h2>{{ thread.poll.question }}</h2>
-      {% for choice in thread.poll.option_set.all() %}
-      <li><span style="background-color: #{{ color_desaturate(color_lighten('cf402e', loop.length, loop.index, 80), loop.length, loop.index, 20) }}; font-weight: bold; display: inline-block; width:18px; height: 18px; border-radius: 3px;"></span> {{ choice.name }}</li>
-      {% endfor %}
+  <div class="thread-poll-body" id="poll">
+    <h2 class="text-center">{{ thread.poll.question }}</h2>
     {% if poll_form %}
     <form action="" method="post">
-      {{ form_theme.field(poll_form.options) }}
+    {% endif %}
+    <div class="poll-options">
+      <dl class="dl-horizontal">
+        {% for choice in thread.poll.option_set.all() %}
+        <dt>{{ choice.name }}</dt>
+        <dd>
+          <div class="progress">
+            <div class="bar" style="width: {% if poll.votes %}1{% else %}{{ (5 * loop.index0) }}{% endif %}%; background: #{{ color_desaturate(color_spin('049cdb', loop.index0 * 265), loop.length, loop.index/3, 20) }};"></div>
+          </div>
+          <p class="option-details">321 votes, {{ 5 * loop.index0 }}% of all</p>
+        </dd>
+        {% endfor %}
+      </dl>
+    </div>
+    {% if poll_form %}
+    {#{{ form_theme.field(poll_form.options) }}#}
     </form>
-    {% else %}
-    <ul>
-      {% for choice in thread.poll.option_set.all() %}
-      <li><div style="background: #{{ spin_color('FF0000', 240 * loop.index0) }}">{{ choice.name }}</div></li>
-      {% endfor %}
-    </ul>
     {% endif %}
-    <div id="thread-poll-graph"></div>
+    <div class="pool-footer">
+      {% if thread.closed or thread.deleted %}
+      <p class="poll-footer">{% trans %}Poll has been closed.{% endtrans %}</p>
+      {% elif thread.poll.over %}
+      <p class="poll-footer">{% trans end=thread.poll.end_date|date %}Poll ended on {{ end }}{% endtrans %}</p>
+      {% elif thread.poll.length %}
+      <p class="poll-footer">{% trans end=thread.poll.end_date|date %}Poll ends on {{ end }}{% endtrans %}</p>
+      {% else %}
+      <p class="poll-footer">{% trans %}Poll by{% endtrans %}</p>
+      {% endif %}
+    </div>
   </div>
   {% endif %}
 
@@ -540,27 +526,6 @@
   {% if user.is_authenticated() and acl.threads.can_reply(forum, thread) %}
   {{ editor.js() }}
   {% endif %}
-  {% if thread.has_poll %}
-  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
-  <script type="text/javascript">
-    google.load("visualization", "1", {packages:["corechart"]});
-    google.setOnLoadCallback(drawChart);
-    function drawChart() {
-      var data = google.visualization.arrayToDataTable([
-        ["{{ thread.poll.question }}", "{% trans %}Votes{% endtrans %}"]
-        {% for option in thread.poll.option_set.all() %}
-        , ["{{ option.name }}", {{ option.votes}}]
-        {% endfor %}
-      ]);
-
-      var options = {
-      };
-
-      var chart = new google.visualization.PieChart(document.getElementById('thread-poll-graph'));
-      chart.draw(data, options);
-    }
-  </script>
-  {% endif %}
 {%- endblock %}