diff --git a/freepost/static/javascript/freepost.js b/freepost/static/javascript/freepost.js index 8e08258..62fd1ad 100755 --- a/freepost/static/javascript/freepost.js +++ b/freepost/static/javascript/freepost.js @@ -38,27 +38,27 @@ var pressed_key = []; /** * Change arrows class when voting. */ -function vote (action, dom_element) +function vote (action, vote_dom) { - var arrow_up = dom_element.querySelector ('button[title="upvote"]'); - var vote_counter = dom_element.querySelector ('.count') - var arrow_down = dom_element.querySelector ('button[title="downvote"]'); + var arrow_up = vote_dom.querySelector ('button[title="upvote"]'); + var vote_counter = vote_dom.querySelector ('.count') + var arrow_down = vote_dom.querySelector ('button[title="downvote"]'); // Voted/Upvoted var current_status = 0; - if (arrow_up.classList.contains('upvoted')) + if (vote_dom.classList.contains('upvoted')) current_status = 1; - if (arrow_down.classList.contains('downvoted')) + if (vote_dom.classList.contains('downvoted')) current_status = -1; // Current vote var current_vote = Number (vote_counter.textContent); - // Remove class from arrows - arrow_up.classList.remove ('upvoted'); - arrow_down.classList.remove ('downvoted'); + // Remove any existing upvoted/downvoted class + vote_dom.classList.remove ('upvoted'); + vote_dom.classList.remove ('downvoted'); // Toggle upvote class for arrow if ("up" == action) @@ -66,11 +66,11 @@ function vote (action, dom_element) { case -1: vote_counter.textContent = current_vote + 2; - arrow_up.classList.add ('upvoted'); + vote_dom.classList.add ('upvoted'); break; case 0: vote_counter.textContent = current_vote + 1; - arrow_up.classList.add ('upvoted'); + vote_dom.classList.add ('upvoted'); break; case 1: vote_counter.textContent = current_vote - 1; @@ -86,11 +86,11 @@ function vote (action, dom_element) break; case 0: vote_counter.textContent = current_vote - 1; - arrow_down.classList.add ('downvoted'); + vote_dom.classList.add ('downvoted'); break; case 1: vote_counter.textContent = current_vote - 2; - arrow_down.classList.add ('downvoted'); + vote_dom.classList.add ('downvoted'); break; } } diff --git a/freepost/static/stylus/freepost.styl b/freepost/static/stylus/freepost.styl index 822f400..5360cae 100755 --- a/freepost/static/stylus/freepost.styl +++ b/freepost/static/stylus/freepost.styl @@ -100,45 +100,47 @@ body line-height 1.5em .vote - margin 0 + margin 0 1rem 0 0 + padding 0 .5rem form display inline-block + margin 0 + padding 0 > button background transparent border 0 - color #9a9a9a cursor pointer display inline-block - font-family "Courier New", Courier, monospace - font-size 1rem margin 0 overflow hidden padding 0 text-decoration none vertical-align middle - - /* Arrow style if already upvoted (green) */ - &.upvoted - border-radius 999rem - color #00e313 - font-weight bolder - height 1rem - width 1rem - /* Arrow style if already upvoted (red) */ - &.downvoted - border-radius 999rem - color #f00 - font-weight bolder - height 1rem - width 1rem + > img + height .8rem + width .8rem /* Votes counter */ > .count margin 0 .5rem + .upvoted + background-color #d1ffd5 + border 1px dashed + border-radius .5rem + border-color #00e313 + color #00a200 + font-weight bolder + + .downvoted + background-color #fcc + border-radius 999rem + color #f00 + font-weight bolder + /* Home page */ .posts diff --git a/freepost/templates/layout.html b/freepost/templates/layout.html index 107327b..208fff8 100644 --- a/freepost/templates/layout.html +++ b/freepost/templates/layout.html @@ -96,6 +96,7 @@