Hello I'm trying to implement voting system like stack overflow, I've finished the backend//whole functionality but I'm having problem displaying them in UI. right now, the arrows look too far apart and the number isn't quite centered. Also if it's possible I want the color of the arrow to be toggled when clicked/unclicked. I've tried this, but keep getting messed up UI. Can someone please help me with this? thank you in advance.
<td class="vert-align">
<div>
<a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
<span class="glyphicon glyphicon-triangle-top" style="" aria-hidden="true"></span></a>
<br /> //upper arrow
<span class="number"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span> <br> //number gets displayed here
<a href="/post/{{ post.slug }}/vote?is_up=0" class="vote">
<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span></a>
</div> //under arrow
</td>
Also I have one js file for this voting
function vote(node) {
var thread_id = node.attr("href").split('\/')[2];
$.ajax({
url: node.attr("href"),
dataType: "json",
success: function(data) {
$("#vote_count_"+thread_id).html(data.count);
},
error: function(data) {
alert(data.responseJSON.error_message);
}
});
}
$("a.vote").on("click", function() {
vote($(this));
return false;
});
thank you.
To achieve this design with bootstrap (which I can see that you are using) you can simply use this template :
<div class="row">
<div class="col-md-1" style="font-size: 30px; color:#606060; text-align: center;">
<span class="glyphicon glyphicon-triangle-top col-md-12"></span>
<span class="col-md-12">0</span><!-- Number goes here -->
<span class="glyphicon glyphicon-triangle-bottom col-md-12"></span>
</div>
</div>
If you want to toggle the arrow color when clicked use a Javascript method that uses a var (boolean) to determine wether the button is clicked or not, then with the jQuery method .css() you can change the color of the wanted button.
Live example - http://www.bootply.com/6KzWhJefif
I wouls create a CSS class and add it to the '' tag your glyphicons are in. In this class you can set the 'font-size' which will size your iccn. You also should be able to adjust the padding which is what I assume your issue with the incorrect rendering is. If that doesn't help you'll have to use developer tools on your browser and see where you'll need to adjust the padding.
The final thing to do is to set your active, hover and focus on your a tag but using the class. If you've never did this before with CSS it's something like this.
.customClass > a:active, a:hover, a:focus{
color:#fff
}
Hope this helps. If you need more detail let me know but this should be all you need to get it working.