oscar template: make the categories clickable

searx/static/oscar/js/scripts.js

@@ -0,0 +1,31 @@
+/**
+ _                 _       _                  
+| |__   ___   ___ | |_ ___| |_ _ __ __ ___  __
+| '_ \ / _ \ / _ \| __/ __| __| '__/ _` \ \/ /
+| |_) | (_) | (_) | |_\__ | |_| | | (_| |>  < 
+|_.__/ \___/ \___/ \__|___/\__|_|  \__,_/_/\_\.js
+
+*/
+
+$(document).ready(function(){
+    $('.btn-toggle .btn').click(function() {
+        var btnClass = 'btn-' + $(this).data('btn-class');
+        var btnLabelDefault = $(this).data('btn-label-default');
+        var btnLabelToggled = $(this).data('btn-label-toggled');
+        if(btnLabelToggled != '')
+        {
+            if($(this).hasClass('btn-default'))
+            {
+                
+                var html = $(this).html().replace(btnLabelDefault, btnLabelToggled);
+            }
+            else
+            {
+                var html = $(this).html().replace(btnLabelToggled, btnLabelDefault);
+            }
+            $(this).html(html);
+        }
+        $(this).toggleClass(btnClass);
+        $(this).toggleClass('btn-default');
+    });
+});

searx/templates/oscar/base.html

@@ -61,5 +61,6 @@
     </div>
     <script src="{{ url_for('static', filename='js/jquery-1.11.1.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
 </body>
 </html>

searx/templates/oscar/categories.html

@@ -0,0 +1,6 @@
+<div id="categories" class="btn-group btn-toggle" data-toggle="buttons">
+{% for category in categories %}
+    <label class="btn btn-sm {% if category in selected_categories %}btn-primary active{% else %}btn-default{% endif %}" data-btn-class="primary">
+        <input class="hidden" type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} />{{ _(category) }}</label>
+{% endfor %}
+</div>

searx/templates/oscar/preferences.html

@@ -16,15 +16,14 @@
     <div class="tab-content">
         <div class="tab-pane active" id="tab_general">
             <fieldset>
-                <legend>{{ _('Default categories') }}</legend>
-                <p>
-                {% include 'default/categories.html' %}
-                </p>
-            </fieldset>
-
-            <fieldset>
             <div class="container-fluid">
                 <div class="row form-group">
+                    <label class="col-sm-3 col-md-2">{{ _('Default categories') }}</label>
+                    <div class="col-sm-11 col-md-10">
+                        {% include 'oscar/categories.html' %}
+                    </div>
+                </div>
+                <div class="row form-group">
                     <label class="col-sm-3 col-md-2">{{ _('Search language') }}</label>
                     <div class="col-sm-4 col-md-4">
                         <select class="form-control" name='language'>
@@ -36,8 +35,6 @@
                     </div>
                     <span class="col-sm-5 col-md-6 help-block">{{ _('What language do you prefer for search?') }}</span>
                 </div>
-                
-                
                 <div class="row form-group">
                     <label class="col-sm-3 col-md-2">{{ _('Interface language') }}</label>
                     <div class="col-sm-4 col-md-4">
@@ -91,7 +88,7 @@
             <!-- Nav tabs -->
             <ul class="nav nav-tabs" role="tablist" style="margin-bottom:20px;">
                 {% for (categ,search_engines) in categs %}
-                <li{% if loop.first %} class="active"{% endif %}><a href="#tab_engine_{{ categ|replace(' ', '') }}" role="tab" data-toggle="tab">{{ _(categ) }}</a></li>
+                <li{% if loop.first %} class="active"{% endif %}><a href="#tab_engine_{{ categ|replace(' ', '_') }}" role="tab" data-toggle="tab">{{ _(categ) }}</a></li>
                 {% endfor %}
             </ul>
         
@@ -99,7 +96,7 @@
             <!-- Tab panes -->
             <div class="tab-content">
                 {% for (categ,search_engines) in categs %}
-                <div class="tab-pane{% if loop.first %} active{% endif %}" id="tab_engine_{{ categ|replace(' ', '') }}">
+                <div class="tab-pane{% if loop.first %} active{% endif %}" id="tab_engine_{{ categ|replace(' ', '_') }}">
                     <div class="container-fluid">
                     <fieldset>
                     {% for search_engine in search_engines %}