Fix nav-tab issue in design_questionpaper.html

- Fixes nav-tab active status.
- Fixes nav-tab flickering on hover over tab.

3 files changed, 37 insertions, 24 deletions

diff --git a/yaksh/static/yaksh/css/question_paper_creation.css b/yaksh/static/yaksh/css/question_paper_creation.css
index 6a132c6..5f9f388 100644
--- a/yaksh/static/yaksh/css/question_paper_creation.css
+++ b/yaksh/static/yaksh/css/question_paper_creation.css
@@ -5,9 +5,20 @@ body {
   line-height: 18px;
   color: #404040;
 }
+.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
+    -moz-border-bottom-colors: none;
+    -moz-border-left-colors: none;
+    -moz-border-right-colors: none;
+    -moz-border-top-colors: none;
+    background-color: #FFFFFF;
+    border-color: #DDDDDD #DDDDDD rgba(0, 0, 0, 0);
+    border-image: none;
+    border-style: solid;
+    border-width: 1px;
+    color: #555555;
+    cursor: default;
+}
 .tabs li {
-    padding-top: 1em;
-    padding-bottom: 1em;
     text-align: center;
     width: 33%;
 }
@@ -16,7 +27,6 @@ body {
 }
 .tabs > .active{
     border: 0;
-    background: lightgreen;
 }
 .tabs > .active > a:hover {
     border: 0;
diff --git a/yaksh/static/yaksh/js/question_paper_creation.js b/yaksh/static/yaksh/js/question_paper_creation.js
index 9996f8c..9d04728 100644
--- a/yaksh/static/yaksh/js/question_paper_creation.js
+++ b/yaksh/static/yaksh/js/question_paper_creation.js
@@ -21,7 +21,7 @@ $(document).ready(function(){
                 $('#is_active').val("fixed");
             }
             if($(this).attr("id") == "random-tab") {
-            $('#is_active').val("random");
+                $('#is_active').val("random");
             }
                 $question_type.val('select');
                 $marks.val('select')
diff --git a/yaksh/templates/yaksh/design_questionpaper.html b/yaksh/templates/yaksh/design_questionpaper.html
index b9596d2..be19dbe 100644
--- a/yaksh/templates/yaksh/design_questionpaper.html
+++ b/yaksh/templates/yaksh/design_questionpaper.html
@@ -34,26 +34,27 @@ select
     {% csrf_token %}
     <input type=hidden name="is_active" id="is_active" value="{{ state }}">
 <center><b>Manual mode to design the {{lang}}  Question Paper</center><br>
-    <ul class="nav nav-tabs tabs" data-tabs="tabs">
-    <li class="active" id="fixed-tab">
-        <a href="#fixed-questions" role="tab" data-toggle="tab" id="fixed">
-            STEP 1<br>
-            Add Fixed Questions
-        </a>
-    </li>
-    <li id="random-tab">
-        <a href="#random-questions" role="tab" data-toggle="tab" id="random">
-            STEP 2<br>
-            Add Random Questions
-        </a>
-    </li>
-    <li id="finish-tab">
-    <a href="#finish" role="tab" data-toggle="tab" id="finished">
-        STEP 3<br>
-        Finish
-    </a></li>
-</ul>
-
+    <div class = "tab-base">
+        <ul class="nav nav-tabs tabs" role="tablist" data-tabs="tabs" id = "ulTab">
+        <li class="active" id="fixed-tab">
+            <a data-toggle="tab" href="#fixed-questions" class = "nav-link" id="fixed">
+                STEP 1<br>
+                Add Fixed Questions
+            </a>
+        </li>
+        <li id="random-tab">
+            <a data-toggle="tab" href="#random-questions" class = "nav-link" id="random">
+                STEP 2<br>
+                Add Random Questions
+            </a>
+        </li>
+        <li id="finish-tab">
+        <a data-toggle="tab" href="#finish" class = "nav-link" id="finished">
+            STEP 3<br>
+            Finish
+        </a></li>
+    </ul>
+    </div>
     <div>
         <h3>Total Marks:  <span id="total_marks" class="well"> {{ qpaper.total_marks }} </span></h3>
     </div>
@@ -250,6 +251,8 @@ select
             $('#fixed').tab('show');
         {% elif state == "random" %}
             $("#random").tab('show');
+            $('li').removeClass('active');
+            $(this).addClass('active');
         {% elif state == "finish" %}
             $('#finished').tab('show');
         {% endif %}