oscar template: make the categories clickable

This commit is contained in:
Thomas Pointhuber 2014-09-26 22:43:54 +02:00
parent 5568fbd89d
commit 25919de608
4 changed files with 46 additions and 11 deletions

View File

@ -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');
});
});

View File

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

View File

@ -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>

View File

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