Fix #530

- Fix Create Question Paper CSS and JS.

3 files changed, 93 insertions, 11 deletions

diff --git a/yaksh/static/yaksh/css/question_paper_creation.css b/yaksh/static/yaksh/css/question_paper_creation.css
index 588b65c..6a132c6 100644
--- a/yaksh/static/yaksh/css/question_paper_creation.css
+++ b/yaksh/static/yaksh/css/question_paper_creation.css
@@ -6,20 +6,20 @@ body {
   color: #404040;
 }
 .tabs li {
+    padding-top: 1em;
+    padding-bottom: 1em;
     text-align: center;
     width: 33%;
 }
 .tabs li:last-child {
     width: 34%;
 }
-.tabs > .active > a {
+.tabs > .active{
     border: 0;
     background: lightgreen;
 }
 .tabs > .active > a:hover {
     border: 0;
-    background: green;
-    color: #ffffff;
 }
 .tabs li a {
     border-radius: 0;
diff --git a/yaksh/static/yaksh/js/bootstrap-tabs.js b/yaksh/static/yaksh/js/bootstrap-tabs.js
new file mode 100644
index 0000000..a3c7ee1
--- /dev/null
+++ b/yaksh/static/yaksh/js/bootstrap-tabs.js
@@ -0,0 +1,80 @@
+/* ========================================================
+ * bootstrap-tabs.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#tabs
+ * ========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================== */
+
+
+!function( $ ){
+
+  "use strict"
+
+  function activate ( element, container ) {
+    container
+      .find('> .active')
+      .removeClass('active')
+      .find('> .dropdown-menu > .active')
+      .removeClass('active')
+
+    element.addClass('active')
+
+    if ( element.parent('.dropdown-menu') ) {
+      element.closest('li.dropdown').addClass('active')
+    }
+  }
+
+  function tab( e ) {
+    var $this = $(this)
+      , $ul = $this.closest('ul:not(.dropdown-menu)')
+      , href = $this.attr('href')
+      , previous
+      , $href
+
+    if ( /^#\w+/.test(href) ) {
+      e.preventDefault()
+
+      if ( $this.parent('li').hasClass('active') ) {
+        return
+      }
+
+      previous = $ul.find('.active a').last()[0]
+      $href = $(href)
+
+      activate($this.parent('li'), $ul)
+      activate($href, $href.parent())
+
+      $this.trigger({
+        type: 'change'
+      , relatedTarget: previous
+      })
+    }
+  }
+
+
+ /* TABS/PILLS PLUGIN DEFINITION
+  * ============================ */
+
+  $.fn.tabs = $.fn.pills = function ( selector ) {
+    return this.each(function () {
+      $(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab)
+    })
+  }
+
+  $(document).ready(function () {
+    $('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a')
+  })
+
+}( window.jQuery || window.ender );
diff --git a/yaksh/templates/yaksh/design_questionpaper.html b/yaksh/templates/yaksh/design_questionpaper.html
index 791ac51..b9596d2 100644
--- a/yaksh/templates/yaksh/design_questionpaper.html
+++ b/yaksh/templates/yaksh/design_questionpaper.html
@@ -16,7 +16,7 @@ select
 
 {% block script %}
     <script src="{{ URL_ROOT }}/static/yaksh/js/jquery-1.9.1.min.js"></script>
-    <script src="{{ URL_ROOT }}/static/yaksh/js/bootstrap.js"></script>
+    <script src="{{ URL_ROOT }}/static/yaksh/js/bootstrap.min.js"></script>
     <script src="{{ URL_ROOT }}/static/yaksh/js/bootstrap-tabs.js"></script>
     <script src="{{ URL_ROOT }}/static/yaksh/js/question_paper_creation.js"></script>
 {% endblock %}
@@ -36,19 +36,19 @@ select
 <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" id="fixed">
+        <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" id="random">
+        <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" id="finished">
+    <a href="#finish" role="tab" data-toggle="tab" id="finished">
         STEP 3<br>
         Finish
     </a></li>
@@ -60,7 +60,9 @@ select
 <div class="tab-content">
     <!-- common to fixed and random questions -->
     <div class="row" id="selectors">
-        <h5 style="padding-left: 20px;">Please select Question type and Marks</h5>
+        <div class = "col-md-8">
+            <h5>Please select Question type and Marks</h5>
+        </div>
         <div class="col-md-6">
             {{ filter_form.question_type }}
         </div>
@@ -71,12 +73,12 @@ select
     <br><br>
     {% csrf_token %}
     <div class="tab-pane active" id="fixed-questions">
-        <h4 style="padding-left: 20px;">Or</h4>
+        <h4>Or</h4>
         <!-- Search questions using tags -->
-        <h4 style="padding-left: 20px;">Search using Tags: </h4>
+        <h4>Search using Tags: </h4>
+        <span class="input-group-addon" id="basic-addon1">Search Questions: </span>
         <div class="col-md-14">
         <div class="input-group">
-            <span class="input-group-addon" id="basic-addon1">Search Questions </span>
             <input type="text" id="question_tags" name="question_tags" class="form-control"
              placeholder="Search using comma separated Tags">
             <span class="input-group-btn">