add advanced settings for logicodev style

This commit is contained in:
Noemi Vanyi 2016-07-17 18:43:47 +02:00
parent 93c0c49e9a
commit 2e8ab34d76
12 changed files with 137 additions and 77 deletions

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,70 @@
#advanced-search-container {
display:none;
text-align:left;
margin-bottom:1rem;
label, .input-group-addon {
font-size: 1.2rem;
font-weight:normal;
background-color: white;
border: @mild-gray 1px solid;
border-right: none;
color: @dark-gray;
padding-bottom: 0.4rem;
padding-top: 0.4rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
label:last-child, .input-group-addon:last-child {
border-right: @mild-gray 1px solid;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label{
color: @black;
font-weight:bold;
border-bottom: @light-green 5px solid;
}
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
font-size: 1.2rem;
font-weight:normal;
background-color: white;
border: @mild-gray 1px solid;
color: @dark-gray;
padding-bottom: 0.4rem;
padding-top: 0.4rem;
padding-left: 1rem;
padding-right: 5rem;
margin-right: 0.5rem;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAQAAACR313BAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ
cwAABFkAAARZAVnbJUkAAAAHdElNRQfgBxgLDwB20OFsAAAAbElEQVQY073OsQ3CMAAEwJMYwJGn
sAehpoXJItltBkmcdZBYgIIiQoLglnz3ui+eP+bk5uneteTMZJa6OJuIqvYzSJoqwqBq8gdmTTW8
6/dghxAUq4xsVYT9laBYXCw93Aajh7GPEF23t4fkBYevGFTANkPRAAAAJXRFWHRkYXRlOmNyZWF0
ZQAyMDE2LTA3LTI0VDExOjU1OjU4KzAyOjAwRFqFOQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNi0w
Ny0yNFQxMToxNTowMCswMjowMP7RDgQAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb
7jwaAAAAAElFTkSuQmCC) 96% no-repeat;
}
}
#check-advanced {
display: none;
}
#check-advanced:checked ~ #advanced-search-container {
display:block;
}
.advanced {
margin-top:1rem;
text-align:right;
}

View file

@ -12,6 +12,8 @@
@import "search.less";
@import "advanced.less";
@import "cursor.less";
@import "code.less";

View file

@ -1,36 +1,28 @@
.search_categories, #categories {
margin: 10px 0 4px 0;
text-transform: capitalize;
margin-bottom: 0.5rem;
label{
border: none;
box-shadow: none;
font-size: 13px;
padding-bottom: 2px;
color: @gray;
margin-bottom: 5px;
label, .input-group-addon {
font-size: 1.2rem;
font-weight:normal;
background-color: white;
border: @mild-gray 1px solid;
border-right: none;
color: @dark-gray;
padding-bottom: 0.4rem;
padding-top: 0.4rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
label:last-child, .input-group-addon:last-child {
border-right: @mild-gray 1px solid;
}
&:hover{
input[type="checkbox"]:checked + label {
color: @black;
background-color: transparent;
font-weight:bold;
border-bottom: @light-green 5px solid;
}
&:active{
box-shadow: none;
}
}
.active, .btn-primary{
color: @black;
font-weight: 700;
border-bottom: 5px solid @light-green;
background-color: transparent;
}
}
#categories{
margin: 0;
}
#main-logo{

View file

@ -2,6 +2,8 @@
@gray: #A4A4A4;
@dim-gray: #F6F9FA;
@dark-gray: #666;
@middle-gray: #F5F5F5;
@mild-gray: #DDD;
@blue: #0088CC;
@red: #F35E77;
@violet: #684898;

View file

@ -0,0 +1,11 @@
<div class="input-group col-sm-12 advanced">
<input type="checkbox" id="check-advanced">
<label for="check-advanced">
<span class="glyphicon glyphicon-cog"></span>
Advanced settings
</label>
<div id="advanced-search-container">
{% include 'oscar/categories.html' %}
{% include 'oscar/time-range.html' %}
</div>
</div>

View file

@ -1,42 +1,14 @@
<!-- used if scripts are disabled -->
<noscript>
<div id="categories" class="btn-group btn-toggle">
<div id="categories">
{% if rtl %}
{% for category in categories | reverse %}
<!--<div class="checkbox">-->
<input class="hidden" type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}_nojs" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} />
<label class="btn btn-sm btn-primary active label_hide_if_not_checked" for="checkbox_{{ category|replace(' ', '_') }}_nojs">{{ _(category) }}</label>
<label class="btn btn-sm btn-default label_hide_if_checked" for="checkbox_{{ category|replace(' ', '_') }}_nojs">{{ _(category) }}</label>
<!--</div>-->
{% if category in selected_categories %}<input class="hidden" type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}_dis_activation" name="category_{{ category }}" value="off" checked="checked"/>{% endif %}
{% endfor %}
{% for category in categories | reverse %}
<input class="hidden" type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} />
<label class="input-group-addon" for="checkbox_{{ category|replace(' ', '_') }}">{{ _(category) }}</label>
</label>
{% endfor %}
{% else %}
{% for category in categories %}
<!--<div class="checkbox">-->
<input class="hidden" type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}_nojs" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} />
<label class="btn btn-sm btn-primary active label_hide_if_not_checked" for="checkbox_{{ category|replace(' ', '_') }}_nojs">{{ _(category) }}</label>
<label class="btn btn-sm btn-default label_hide_if_checked" for="checkbox_{{ category|replace(' ', '_') }}_nojs">{{ _(category) }}</label>
<!--</div>-->
{% if category in selected_categories %}<input class="hidden" type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}_dis_activation" name="category_{{ category }}" value="off" checked="checked"/>{% endif %}
{% endfor %}
{% for category in categories %}
<input class="hidden" type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} />
<label class="input-group-addon" for="checkbox_{{ category|replace(' ', '_') }}">{{ _(category) }}</label>
{% endfor %}
{% endif %}
</div>
</noscript>
<div id="categories" class="btn-group btn-toggle hide_if_nojs" data-toggle="buttons">
{% if rtl %}
{% for category in categories | reverse %}
<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 %}
{% else %}
{% 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 %}
{% endif %}
</div>

View file

@ -36,7 +36,7 @@
<label class="col-sm-3 col-md-2">{{ _('Default categories') }}</label>
{% else %}
<label class="col-sm-3 col-md-2">{{ _('Default categories') }}</label>
<div class="col-sm-11 col-md-10">
<div class="col-sm-11 col-md-10 search-categories">
{% include 'oscar/categories.html' %}
</div>
{% endif %}

View file

@ -1,6 +1,6 @@
{% extends "oscar/base.html" %}
{% block title %}{{ q }} - {% endblock %}
{% block meta %}<link rel="alternate" type="application/rss+xml" title="Searx search: {{ q }}" href="{{ url_for('index') }}?q={{ q|urlencode }}&amp;format=rss&amp;{% for category in selected_categories %}category_{{ category }}=1&amp;{% endfor %}pageno={{ pageno }}">{% endblock %}
{% block meta %}<link rel="alternate" type="application/rss+xml" title="Searx search: {{ q }}" href="{{ url_for('index') }}?q={{ q|urlencode }}&amp;format=rss&amp;{% for category in selected_categories %}category_{{ category }}=1&amp;{% endfor %}pageno={{ pageno }}&amp;time_range={{ time_range }}">{% endblock %}
{% block content %}
<div class="row">
<div class="col-sm-8" id="main_results">
@ -41,6 +41,7 @@
{% for category in selected_categories %}<input type="hidden" name="category_{{ category }}" value="1"/>{% endfor %}
<input type="hidden" name="q" value="{{ q }}" />
<input type="hidden" name="pageno" value="{{ pageno+1 }}" />
<input type="hidden" name="time_range" value="{{ time_range }}" />
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span> {{ _('next page') }}</button>
</form>
</div>
@ -48,6 +49,7 @@
<form method="{{ method or 'POST' }}" action="{{ url_for('index') }}" class="pull-left">
{% for category in selected_categories %}<input type="hidden" name="category_{{ category }}" value="1"/>{% endfor %}
<input type="hidden" name="pageno" value="{{ pageno-1 }}" />
<input type="hidden" name="time_range" value="{{ time_range }}" />
<button type="submit" class="btn btn-default" {% if pageno == 1 %}disabled{% endif %}><span class="glyphicon glyphicon-forward"></span> {{ _('previous page') }}</button>
</form>
</div>
@ -60,6 +62,7 @@
<input type="hidden" name="q" value="{{ q }}" />
{% for category in selected_categories %}<input type="hidden" name="category_{{ category }}" value="1"/>{% endfor %}
<input type="hidden" name="pageno" value="{{ pageno-1 }}" />
<input type="hidden" name="time_range" value="{{ time_range }}" />
<button type="submit" class="btn btn-default" {% if pageno == 1 %}disabled{% endif %}><span class="glyphicon glyphicon-backward"></span> {{ _('previous page') }}</button>
</form>
</div>
@ -68,6 +71,7 @@
{% for category in selected_categories %}<input type="hidden" name="category_{{ category }}" value="1"/>{% endfor %}
<input type="hidden" name="q" value="{{ q }}" />
<input type="hidden" name="pageno" value="{{ pageno+1 }}" />
<input type="hidden" name="time_range" value="{{ time_range }}" />
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-forward"></span> {{ _('next page') }}</button>
</form>
</div>
@ -118,7 +122,7 @@
<form role="form">
<div class="form-group">
<label for="search_url">{{ _('Search URL') }}</label>
<input id="search_url" type="url" class="form-control select-all-on-click cursor-text" name="search_url" value="{{ base_url }}?q={{ q|urlencode }}{% if selected_categories %}&amp;categories={{ selected_categories|join(",") | replace(' ','+') }}{% endif %}{% if pageno > 1 %}&amp;pageno={{ pageno }}{% endif %}" readonly>
<input id="search_url" type="url" class="form-control select-all-on-click cursor-text" name="search_url" value="{{ base_url }}?q={{ q|urlencode }}{% if selected_categories %}&amp;categories={{ selected_categories|join(",") | replace(' ','+') }}{% endif %}{% if pageno > 1 %}&amp;pageno={{ pageno }}{% endif %}{% if time_range %}&amp;time_range={{ time_range }}{% endif %}" readonly>
</div>
</form>
@ -130,6 +134,7 @@
<input type="hidden" name="format" value="{{ output_type }}">
{% for category in selected_categories %}<input type="hidden" name="category_{{ category }}" value="1">{% endfor %}
<input type="hidden" name="pageno" value="{{ pageno }}">
<input type="hidden" name="time_range" value="{{ time_range }}" />
<button type="submit" class="btn btn-default">{{ output_type }}</button>
</form>
{% endfor %}

View file

@ -6,7 +6,5 @@
<button type="submit" class="btn btn-default"><span class="hide_if_nojs">{{ icon('search') }}</span><span class="hidden active_if_nojs">{{ _('Start search') }}</span></button>
</span>
</div>
<div class="search_categories">
{% include 'oscar/categories.html' %}
</div><!-- / #search_categories -->
{% include 'oscar/advanced.html' %}
</form><!-- / #search_form_full -->

View file

@ -11,11 +11,8 @@
<button type="submit" class="btn btn-default input-lg"><span class="hide_if_nojs">{{ icon('search') }}</span><span class="hidden active_if_nojs">{{ _('Start search') }}</span></button>
</span>
</div>
<button type="button" class="btn btn-link btn-collapse center-block collapsed hide_if_nojs" data-toggle="collapse" data-target="#search_categories" data-btn-text-collapsed="{{ _('Show search filters') }}" data-btn-text-not-collapsed="{{ _('Hide search filters') }}">{{ _('Show search filters') }}</button>
<div class="row collapse active_if_nojs margin_top_if_nojs" id="search_categories">
<div class="col-md-12 text-center">
{% include 'oscar/categories.html' %}
<div class="input-group col-md-8 col-md-offset-2">
{% include 'oscar/advanced.html' %}
</div>
</div><!-- / #search_categories -->
</form><!-- / #search_form_full -->

View file

@ -0,0 +1,11 @@
<!-- Time range -->
<div class="input-group">
<input type="radio" id="time-range-anytime" name="time_range" value="" {{ "checked" if time_range=="" or not time_range else ""}}>
<label for="time-range-anytime" class="input-group-addon">Anytime</label>
<input type="radio" id="time-range-day" name="time_range" value="day" {{ "checked" if time_range=="day" else ""}}>
<label for="time-range-day" class="input-group-addon">Last day</label>
<input type="radio" id="time-range-week" name="time_range" value="week" {{ "checked" if time_range=="week" else ""}}>
<label for="time-range-week" class="input-group-addon">Last week</label>
<input type="radio" id="time-range-month" name="time_range" value="month" {{ "checked" if time_range=="month" else ""}}>
<label for="time-range-month" class="input-group-addon">Last month</label>
</div>