add advanced settings for logicodev style

searx/static/themes/oscar/less/logicodev/advanced.less

+#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;
+}
+
+

searx/static/themes/oscar/less/logicodev/oscar.less

 
 @import "search.less";
 
+@import "advanced.less";
+
 @import "cursor.less";
 
 @import "code.less";

searx/static/themes/oscar/less/logicodev/search.less

 .search_categories, #categories {
-  margin: 10px 0 4px 0;
   text-transform: capitalize;
-  
-  label{
-    border: none;
-    box-shadow: none;
-    font-size: 13px;
-    padding-bottom: 2px;
-    color: @gray;
-    margin-bottom: 5px;
-
-    &:hover{
-        color: @black;
-        background-color: transparent;
-    }
+  margin-bottom: 0.5rem;
 
-      &:active{
-        box-shadow: none;
-      }
+  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;
   }
 
-  .active, .btn-primary{
+  input[type="checkbox"]:checked + label {
     color: @black;
-    font-weight: 700;
-    border-bottom: 5px solid @light-green;
-    background-color: transparent;
+    font-weight:bold;
+    border-bottom: @light-green 5px solid;
   }
-
-}
-
-#categories{
-    margin: 0;
 }
 
 #main-logo{

searx/static/themes/oscar/less/logicodev/variables.less

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

searx/templates/oscar/advanced.html

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

searx/templates/oscar/categories.html

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

searx/templates/oscar/preferences.html

                         <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 %}

searx/templates/oscar/results.html

 {% 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">
                         {% 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>
                     <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>
                         <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>
                         {% 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>
                     <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>
 
                         <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 %}

searx/templates/oscar/search.html

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

searx/templates/oscar/search_full.html

             <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>
+    <div class="input-group col-md-8 col-md-offset-2">
+        {% include 'oscar/advanced.html' %}
+    </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>
-    </div><!-- / #search_categories -->
 </form><!-- / #search_form_full -->

searx/templates/oscar/time-range.html

+<!-- 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>