half way done with the new upvoting ux

public/js/main.js

@@ -113,6 +113,7 @@ $(document).ready(function() {
         window.location = '/challenges/' + (parseInt(l[l.length - 1]) + 1);
     });
 
+
     // Bonfire instructions functions
     $('#more-info').on('click', function() {
         ga('send', 'event',  'Challenge', 'more-info', challengeName);
@@ -125,8 +126,13 @@ $(document).ready(function() {
         $('#long-instructions').hide();
     });
 
-    var upvoteHandler = function () {
+    $('#upvote').on('click', upvoteHandler);
-        $(".ion-arrow-up-b").hide();
+
+    var upvoteHandler = function (event) {
+        event.preventDefault();
+        var $this = $(this);
+        $this.addClass('disabled');
+        $this.text('Upvoted!');
         var _id = storyId;
         $('#upvote').unbind('click');
         var alreadyUpvoted = false;
@@ -152,7 +158,6 @@ $(document).ready(function() {
                 });
         }
     };
-    $('#upvote').on('click', upvoteHandler);
 
     var storySubmitButtonHandler = function storySubmitButtonHandler() {
 

views/stories/show.jade

@@ -10,39 +10,37 @@
     .spacer
 
     h3.row
-        .row.text-left.negative-10
+        .col-xs-2.col-sm-1
-            .col-xs-3.col-sm-1.text-center
+            a(href="/" + author.username)
-                .row.negative-5
+                img(src="#{author.picture}", class='img-news')
-                    .col-xs-12.big-ion-up-arrow
+        .col-xs-10.col-sm-10
+            .col-xs-12.negative-28
+                a(href="#{link}", target="_blank")
+                    h3= title
+            h6
+                .col-xs-12.positive-15.hidden-element#image-display
+                    .media
+                        .media-left
+                            img.url-preview.media-object(src="#{image}", alt="#{storyMetaDescription}")
+                        .media-body
+                            .col-xs-12.col-sm-12.col-md-6
+                                h4= storyMetaDescription
+                .col-xs-12
+                    h4= description
+                    .negative-5
+                        a#reply-to-main-post.btn.btn-no-shadow.btn-primary.btn-xs.btn-primary-ghost Reply
+                        |   · 
                         if !hasUserVoted
-                            a#upvote
+                            a#upvote.btn.btn-no-shadow.btn-primary.btn-xs.btn-primary-ghost
-                                i.ion-arrow-up-b
-                    h3.story-up-votes
-                        span#storyRank= rank
-            .col-xs-2.col-sm-1
-                a(href="/" + author.username)
-                    img(src="#{author.picture}", class='img-news')
-            .col-xs-7.col-sm-10
-
-                .col-xs-12.negative-28
-                    a(href="#{link}", target="_blank")
-                        h3= title
-                h6
-                    .col-xs-12.positive-15.hidden-element#image-display
-                        .media
-                            .media-left
-                                img.url-preview.media-object(src="#{image}", alt="#{storyMetaDescription}")
-                            .media-body
-                                .col-xs-12.col-sm-12.col-md-6
-                                    h4= storyMetaDescription
-                    .col-xs-12
-                        h4= description
-                        .negative-5
-                            a#reply-to-main-post.btn.btn-no-shadow.btn-primary.btn-xs.btn-primary-ghost Reply
                             |   · 
-                            span Posted #{timeAgo}
+                        else
-                            span  by 
+                            a#upvote.btn.disabled.btn-no-shadow.btn-primary.btn-xs.btn-primary-ghost Upvoted!
-                                a(href="/" + author.username) @#{author.username}
+                            |   · 
+                        span#storyRank= rank + (rank > 1 ? " points" : " point")
+                        |   · 
+                        span Posted #{timeAgo}
+                        span  by 
+                            a(href="/" + author.username) @#{author.username}
 
     if (user !== null)
         .col-xs-12#reply-area