Subject: Added tablersorter to all table

Description:
1. tablesorter on all table
2. highlighted add comments, added css

4 files changed, 79 insertions, 23 deletions

diff --git a/static/website/templates/filter.html b/static/website/templates/filter.html
index 14ccbe5..b51818a 100644
--- a/static/website/templates/filter.html
+++ b/static/website/templates/filter.html
@@ -2,6 +2,17 @@
 {% load helpers %}
 
 {% block content %}
+
+<script>
+
+    $(document).ready(function()
+        {
+        $("#myTable").tablesorter();
+        }
+    );
+
+ </script>
+
 {% if questions %}
 <h5 style="padding-top: 15px;">
     These are the similar questions in:
@@ -30,15 +41,23 @@
 <br>
 <div class="clearfix"></div>
 
-    <table class="table table-bordered">
-        <th> FOSS </th>
-        <th> Question <span class="glyphicon glyphicon-link"></span></th>
-        <th> Date</th>
-        <th> Views</th>
-        <th> Answers</th>
-        <th> User</th>
+    <table id="myTable" class="tablesorter-blue">
+       <thead> 
+	<tr> 
+		<th>No.</th>
+	        <th>FOSS</th>
+		<th>Question </th>
+		<th>Date</th>
+		<th>Views</th>
+		<th>Answers</th>
+		<th>User</th>  
+	</tr> 
+	</thead> 
+
+	<tbody> 
         {% for question in questions %}
         <tr {% if question.id == qid %}class="parent-filter"{% endif %}>
+	    <td></td>
             <td>
                 <span class="category" data-toggle="tooltip" data-placement="top" title="{{ question.category }}">
                <a class="pull-left" href="{% url 'website:filter' question.category|lower %}?qid={{ question.id }}">
@@ -76,6 +95,7 @@
 
         </tr>
         {% endfor %}
+    <tbody> 
     </table>
 {% else %}
 <h4>There are no similar questions.</h4>
@@ -84,6 +104,12 @@
 
 {% block javascript %}
 <script>
+
+     $('table tbody tr').each(function(idx){
+                $(this).children(":eq(0)").html(idx + 1);
+    });
+
+
     $(document).ready(function() {
         $('span').tooltip();
         $('.parent-filter').css("background", "#ffffe0");
diff --git a/static/website/templates/get-question.html b/static/website/templates/get-question.html
index 2af3fcf..0335e5d 100644
--- a/static/website/templates/get-question.html
+++ b/static/website/templates/get-question.html
@@ -204,7 +204,7 @@
                 </form>
                 
                
-                <a class="add-comment" href="#" data-target="comment{{ answer.id }}">
+                <a class="add-comment" style="background: #46B8DA none repeat scroll 0% 0%;color: #FFF;border-radius: 3px;padding: 5px 12px;" href="#" data-target="comment{{ answer.id }}">
                     <small>add comment</small>
                 </a>
               
diff --git a/static/website/templates/index.html b/static/website/templates/index.html
index 1915a77..9344492 100644
--- a/static/website/templates/index.html
+++ b/static/website/templates/index.html
@@ -88,16 +88,16 @@
 
 
     <div id="filter-container">
-        <div class="row">
+        <div class="row" style="margin-left: 12%;">
             <form class ="" id="filter-form" action="" role="form">
-                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" >
+                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 65%;">
                     <a class="btn btn-block btn-primary" href="{% url 'website:questions' %}" style="margin-top: 18px;">View all previous questions.</a>
                 </div> <!-- /.col -->
             </form>
-            <div class="col-lg-6 col-md-6 col-sm-6" >
-                <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-6" style="width: 25%;">
+                <div class="row" style="margin-left: 11px;">
 
-                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 100px; margin-left:40px; margin-right:40px; " >
+                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 100px; margin-right:40px; " >
                         <h3 style="font-size: 18px" align="center"><strong>{% total_question_count %}</strong></h3>
                         <h3 style="font-size: 18px; margin-top: 1px;" align="center" text-color="#7395d9" >Questions</h3>
                     </div>
@@ -116,6 +116,7 @@
             <table id="myTable" class="tablesorter-blue"> 
 	<thead> 
 	<tr> 
+		<th>No.</th>
 	        <th>FOSS</th>
 		<th>Question </th>
 		<th>Date</th>
@@ -127,6 +128,7 @@
 	<tbody> 
 	  {% for question in questions %}
 		        <tr>
+			    <td></td>
 		            <td>
 		                <span class="category" data-toggle="tooltip" data-placement="top" title="{{ question.category}}">
 		                 
@@ -137,7 +139,6 @@
 		                 </span>
 		            </td>
 		           
-		           
 		            <td>
 		                <span class="question" data-toggle="tooltip" data-placement="top" title="{{ question.title }}">
 		                    <a href="{% url 'website:get_question' question.id %}{% prettify question.title %}">{{ question.title|truncatechars:40 }}</a>
@@ -175,6 +176,13 @@
 
 {% block javascript %}
 <script>
+
+    $('table tbody tr').each(function(idx){
+                $(this).children(":eq(0)").html(idx + 1);
+    });
+
+
+
     $(document).ready(function(){
         
         $carousel = $('.carousel').slick({
diff --git a/static/website/templates/questions.html b/static/website/templates/questions.html
index 3c3d355..b7c2a45 100644
--- a/static/website/templates/questions.html
+++ b/static/website/templates/questions.html
@@ -3,21 +3,40 @@
 {% load count_tags %}
 
 {% block content %}
+
+
+	<script>
+
+	    $(document).ready(function()
+		{
+		$("#myTable").tablesorter();
+		}
+	    );
+
+	 </script>
+
     <h4> 
         <h5>
             Showing {{ questions.start_index }} - {{ questions.end_index }} of {{ questions.paginator.count }} questions.
         </h5>
     </h4>
-    <table class="table table-bordered table-hover">
-        <th> FOSS </th>
-   	<th> Question <span class="glyphicon glyphicon-link"></span></th>
-        <th> Date</th>
-        <th> Views</th>
-        <th> Votes </th>
-        <th> Answers</th>
-        <th> User</th>
+       <table id="myTable" class="tablesorter-blue">
+        <thead> 
+	<tr> 
+		<th>No.</th>
+	        <th>FOSS</th>
+		<th>Question </th>
+		<th>Date</th>
+		<th>Views</th>
+		<th>Votes</th>
+		<th>Answers</th>
+		<th>User</th>  
+	</tr> 
+	</thead> 
+	<tbody> 
         {% for question in questions %}
         <tr>
+	    <td> </td>
             <td>
                 <span class="category" data-toggle="tooltip" data-placement="top" title="{{ question.category}}">
                
@@ -63,7 +82,7 @@
             </td>
         </tr>
         {% endfor %}
-
+    </tbody> 
     </table>
 
     <ul class="pagination pull-right">
@@ -93,5 +112,8 @@
 {% block javascript %}
 <script>
     $('span').tooltip();
+    $('table tbody tr').each(function(idx){
+                $(this).children(":eq(0)").html(idx + 1);
+    });
 </script>
 {% endblock %}