[enh] search input design mods according to #226

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

@@ -29,29 +29,6 @@
         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 {

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

@@ -54,3 +54,26 @@
      background-color: @green;
      color: white;
  }
+
+.custom-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;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAQAAACR313BAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
+AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ
+cwAABFkAAARZAVnbJUkAAAAHdElNRQfgBxgLDwB20OFsAAAAbElEQVQY073OsQ3CMAAEwJMYwJGn
+sAehpoXJItltBkmcdZBYgIIiQoLglnz3ui+eP+bk5uneteTMZJa6OJuIqvYzSJoqwqBq8gdmTTW8
+6/dghxAUq4xsVYT9laBYXCw93Aajh7GPEF23t4fkBYevGFTANkPRAAAAJXRFWHRkYXRlOmNyZWF0
+ZQAyMDE2LTA3LTI0VDExOjU1OjU4KzAyOjAwRFqFOQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNi0w
+Ny0yNFQxMToxNTowMCswMjowMP7RDgQAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb
+7jwaAAAAAElFTkSuQmCC) 96% no-repeat;
+}
+
+.search-margin {
+    margin-bottom: 0.6em;
+}

searx/templates/oscar/advanced.html

@@ -4,7 +4,13 @@
     {{ _('Advanced settings') }}
 </label>
 <div id="advanced-search-container">
-    {% include 'oscar/categories.html' %}
+  {% include 'oscar/categories.html' %}
-    {% include 'oscar/time-range.html' %}
+  <div class="row">
-    {% include 'oscar/languages.html' %}
+    <div class="col-xs-6">
+      {% include 'oscar/time-range.html' %}
+    </div>
+    <div class="col-xs-6">
+      {% include 'oscar/languages.html' %}
+    </div>
+  </div>
 </div>

searx/templates/oscar/languages.html

@@ -1,7 +1,7 @@
 {% if preferences %}
 <select class="form-control" name='language'>
 {% else %}
-<select class="time_range" id='language' name='language'>
+<select class="time_range custom-select form-control" id='language' name='language'>
 {% endif %}
 	<option value="all" {% if current_language == 'all' %}selected="selected"{% endif %}>{{ _('Default language') }}</option>
 		{% for lang_id,lang_name,country_name,english_name in language_codes | sort(attribute=1) %}

searx/templates/oscar/results.html

@@ -11,10 +11,10 @@
 {% block title %}{{ q|e }} - {% endblock %}
 {% block meta %}<link rel="alternate" type="application/rss+xml" title="Searx search: {{ q|e }}" href="{{ search_url() }}&amp;format=rss">{% endblock %}
 {% block content %}
+    {% include 'oscar/search.html' %}
     <div class="row">
         <div class="col-sm-8" id="main_results">
             <h1 class="sr-only">{{ _('Search results') }}</h1>
-            {% include 'oscar/search.html' %}
 
             {% if corrections %}
             <div class="result">

searx/templates/oscar/search.html

@@ -1,12 +1,24 @@
 {% from 'oscar/macros.html' import icon %}
 <form method="{{ method or 'POST' }}" action="{{ url_for('index') }}" id="search_form" role="search">
-    <div class="input-group col-sm-12">
+  <div class="row">
+    <div class="col-xs-12 col-md-8">
+      <div class="input-group search-margin">
         <input type="search" name="q" class="form-control" id="q" placeholder="{{ _('Search for...') }}" autocomplete="off" value="{{ q }}">
         <span class="input-group-btn">
             <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>
-    <div class="input-group col-sm-12 advanced">
+    <div class="col-xs-6 col-md-2 search-margin">
-        {% include 'oscar/advanced.html' %}
+        {% include 'oscar/time-range.html' %}
     </div>
+    <div class="col-xs-6 col-md-2 search-margin">
+        {% include 'oscar/languages.html' %}
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12">
+        {% include 'oscar/categories.html' %}
+    </div>
+  </div>
 </form><!-- / #search_form_full -->

searx/templates/oscar/time-range.html

@@ -1,4 +1,4 @@
-<select name="time_range" id="time-range">
+<select name="time_range" id="time-range" class="custom-select form-control">
     <option id="time-range-anytime" value="" {{ "selected" if time_range=="" or not time_range  else ""}}>
         {{ _('Anytime') }}
     </option>