diff options
| -rw-r--r-- | yaksh/static/yaksh/css/question_paper_creation.css | 6 | ||||
| -rw-r--r-- | yaksh/static/yaksh/js/bootstrap-tabs.js | 80 | ||||
| -rw-r--r-- | yaksh/templates/yaksh/design_questionpaper.html | 18 |
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"> |