Make poll to be compatible with bootstrap

app/assets/javascripts/app/models/poll_participation.js

@@ -1,5 +1,5 @@
 app.models.PollParticipation = Backbone.Model.extend({
   urlRoot: function(){
-    return 'posts/' + this.get('post_id') + "/poll_participations";
+    return '/posts/' + this.get('post_id') + "/poll_participations";
   }
 });

app/assets/javascripts/app/views/poll_blueprint_view.js

@@ -0,0 +1,17 @@
+//= require ./poll_view
+app.views.PollBlueprint = app.views.Poll.extend({
+  templateName: 'poll_blueprint',
+  
+  initialize: function(options) {
+    this.constructor.__super__.initialize.apply(this, options);
+    this.progressBarFactor = 3;
+  },
+  setProgressBarData: function(progressBar, percent) {
+    progressBar.css('width', percent * this.progressBarFactor + 'px');
+    progressBar.parent().next().html(" - " + percent + "%");
+  },
+  toggleElements: function() {
+    this.$('.poll_progress_bar_wrapper').toggle();
+    this.$('.percentage').toggle();
+  }
+});

app/assets/javascripts/app/views/poll_view.js

@@ -12,7 +12,6 @@ app.views.Poll = app.views.Base.extend({
 
   postRenderTemplate: function() {
     this.poll = this.model.attributes.poll;
-    this.progressBarFactor = 3;
     this.setProgressBar();
   },
 
@@ -30,19 +29,20 @@ app.views.Poll = app.views.Base.extend({
       }
 
       var progressBar = _this.$(".poll_progress_bar[data-answerid="+answer.id+"]");
-      var width = percent * _this.progressBarFactor;
 
-      progressBar.parent().next().html(" - " + percent + "%");
-      progressBar.css("width", width + "px");
+      _this.setProgressBarData(progressBar, percent);
     });
   },
 
-  toggleResult: function(e) {
-    if(e)
-      e.preventDefault();
+  setProgressBarData: function(progressBar, percent) {
+    progressBar.css("width", percent + "%");
+    progressBar.parents('.result-row').find('.percentage').text(percent + "%");
+  },
 
-    this.$('.poll_progress_bar_wrapper').toggle();
-    this.$('.percentage').toggle();
+  toggleResult: function(evt) {
+    if(evt) evt.preventDefault();
+
+    this.toggleElements();
 
     var toggle_result = this.$('.toggle_result');
 
@@ -56,6 +56,11 @@ app.views.Poll = app.views.Base.extend({
     }
   },
 
+  toggleElements: function() {
+    this.$('.percentage').toggle();
+    this.$('.progress').toggle();
+  },
+
   clickSubmit: function(evt) {
     evt.preventDefault();
 

app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js

@@ -7,7 +7,8 @@ app.views.SinglePostContent = app.views.Base.extend({
     '#real-post-content' : 'postContentView',
     ".oembed" : "oEmbedView",
     ".opengraph" : "openGraphView",
-    ".status-message-location" : "postLocationStreamView"
+    ".status-message-location" : "postLocationStreamView",
+    '.poll': 'pollView',
   },
 
   initialize : function() {
@@ -15,6 +16,7 @@ app.views.SinglePostContent = app.views.Base.extend({
     this.oEmbedView = new app.views.OEmbed({model : this.model});
     this.openGraphView = new app.views.OpenGraph({model : this.model});
     this.postContentView = new app.views.ExpandedStatusMessage({model: this.model});
+    this.pollView = new app.views.Poll({ model: this.model });
   },
 
   postLocationStreamView : function(){

app/assets/javascripts/app/views/stream_post_views.js

@@ -32,7 +32,7 @@ app.views.StreamPost = app.views.Post.extend({
     this.commentStreamView = new app.views.CommentStream({model : this.model});
     this.oEmbedView = new app.views.OEmbed({model : this.model});
     this.openGraphView = new app.views.OpenGraph({model : this.model});
-    this.pollView = new app.views.Poll({model : this.model});
+    this.pollView = new app.views.PollBlueprint({model : this.model});
   },
 
 

app/assets/stylesheets/new-templates.css.scss

@@ -27,6 +27,7 @@
 @import 'bootstrap-headerfix';
 @import 'opengraph';
 @import 'single-post-view';
+@import 'new_styles/poll';
 
 /* conversations */
 @import 'conversations';

app/assets/stylesheets/new_styles/_poll.scss

@@ -0,0 +1,35 @@
+@import '../colors';
+@import '../mixins';
+@import 'new_mixins';
+
+.poll_form {
+  border-top: 1px solid $border-grey;
+  border-bottom: 1px solid $border-grey;
+  margin: 10px 0px 10px 0px;
+  padding: 10px 0px 5px 0px;
+
+  .poll_content {
+    margin-top: 5px;
+  }
+  .toggle_result_wrapper {
+    display: inline-block;
+    margin-top: 10px;
+  }
+  form {
+    margin-bottom: 0px;
+  }
+
+  .progress {
+    background-image: none;
+    @include box-shadow(0, 0, 0);
+    margin-bottom: 5px;
+    height: 10px !important;
+
+    .bar {
+      background-image: none;
+      background-color: $border-dark-grey;
+      color: $text-dark-grey;
+      text-align: left;
+    }
+  }
+}

app/assets/templates/poll_blueprint_tpl.jst.hbs

@@ -0,0 +1,32 @@
+{{#if poll}}
+  <div class="poll_form">
+    <p class="poll_statistic">{{t "poll.count" count=poll.participation_count}}</p>
+    <strong>{{poll.question}}</strong><br/>
+    {{#unless already_participated_in_poll}}
+      <form action="/posts/{{poll.post_id}}/poll_participations" method="POST">
+        {{#poll.poll_answers}}
+          <input type="radio" name="vote" value="{{id}}"/>
+          <div class="poll_progress_bar_wrapper" style="display:none;">
+            <div class="poll_progress_bar" data-answerid="{{id}}"></div>
+          </div>
+          {{answer}}
+          <p class="percentage" style="display:none;"></p>
+          <br/>
+        {{/poll.poll_answers}}
+        <input type="submit" class="button submit" style="float:right;" value="{{t "poll.vote"}}"/>
+      </form>
+      <p class="toggle_result_wrapper">
+        <br/><a href="#" class="toggle_result">{{t "poll.show_result"}}</a><br/>
+      </p>
+    {{else}}
+      {{#poll.poll_answers}}
+        <div class="poll_progress_bar_wrapper">
+          <div class="poll_progress_bar" data-answerid="{{id}}"></div>
+        </div>
+        {{answer}}
+        <p class="percentage"></p>
+        <br/>
+      {{/poll.poll_answers}}
+    {{/unless}}
+  </div>
+{{/if}}

app/assets/templates/poll_tpl.jst.hbs

@@ -1,32 +1,42 @@
 {{#if poll}}
   <div class="poll_form">
-    <p class="poll_statistic">{{t "poll.count" count=poll.participation_count}}</p>
-    <strong>{{poll.question}}</strong><br/>
-    {{#unless already_participated_in_poll}}
-      <form action="/posts/{{poll.post_id}}/poll_participations" method="POST">
-        {{#poll.poll_answers}}
-          <input type="radio" name="vote" value="{{id}}"/>
-          <div class="poll_progress_bar_wrapper" style="display:none;">
-            <div class="poll_progress_bar" data-answerid="{{id}}"></div>
+    <div class="row-fluid poll_head">
+      <strong>{{{poll.question}}}</strong>
+      <div class="poll_statistic pull-right">
+        {{t "poll.count" count=poll.participation_count}}
+      </div>
+    </div>
+    <div class="row-fluid poll_content">
+      {{#unless already_participated_in_poll}}
+        <form action="/posts/{{poll.post_id}}/poll_participations" method="POST">
+          {{#poll.poll_answers}}
+            <label class="radio result-row">
+              <input type="radio" name="vote" value="{{id}}"/>
+              {{answer}} 
+              <span class="percentage pull-right" style="display: none;"></span>
+              <div class="poll_progress_bar_wrapper progress" style="display: none">
+                <div class="poll_progress_bar bar" data-answerid="{{id}}">
+              </div>
+            </div>
+            </label>  
+          {{/poll.poll_answers}}
+          <div class="toggle_result_wrapper">
+            <a class="toggle_result" href="#">{{t "poll.show_result"}}</a>
+          </div>
+          <input type="submit" class="button submit pull-rigth btn" style="float:right;" value="{{t "poll.vote"}}"/>
+        </form>
+      {{else}}
+        {{#poll.poll_answers}}
+          <div class="result-row">
+            {{answer}}
+            <span class="percentage pull-right"></span>
+            <div class="poll_progress_bar_wrapper progress">
+              <div class="poll_progress_bar bar" data-answerid="{{id}}">
+              </div>
+            </div>
           </div>
-          {{answer}}
-          <p class="percentage" style="display:none;"></p>
-          <br/>
         {{/poll.poll_answers}}
-        <input type="submit" class="button submit" style="float:right;" value="{{t "poll.vote"}}"/>
-      </form>
-      <p class="toggle_result_wrapper">
-        <br/><a href="#" class="toggle_result">{{t "poll.show_result"}}</a><br/>
-      </p>
-    {{else}}
-      {{#poll.poll_answers}}
-        <div class="poll_progress_bar_wrapper">
-          <div class="poll_progress_bar" data-answerid="{{id}}"></div>
-        </div>
-        {{answer}}
-        <p class="percentage"></p>
-        <br/>
-      {{/poll.poll_answers}}
-    {{/unless}}
+      {{/unless}}
+    </div>
   </div>
-{{/if}}
+{{/if}}

spec/javascripts/app/views/poll_blueprint_view_spec.js

@@ -1,7 +1,7 @@
-describe("app.views.Poll", function(){
+describe("app.views.PollBlueprint", function(){
   beforeEach(function() {
     loginAs({name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}});
-    this.view = new app.views.Poll({ "model" : factory.postWithPoll()});
+    this.view = new app.views.PollBlueprint({ model: factory.postWithPoll()});
     this.view.render();
   });