[enh] ui mods

searx/static/css/style.css

@@ -45,7 +45,7 @@ h1 { font-size: 5em; }
 div.title { background: url('/static/img/searx.png') no-repeat; width: 100%; background-position: center; }
 div.title h1 { visibility: hidden; }
 
-input[type="submit"] { border: 1px solid #666666; color: #444444;  padding: 4px; background-color: #FFFFFF; margin-left: 8px; }
+input[type="submit"] { padding: 2px 6px; margin: 2px 4px; display: inline-block; background: #3498DB; color: #FFFFFF; border-radius: 4px; border: 0; cursor: pointer;  }
 
 input[type="checkbox"] { visibility: hidden; }
 
@@ -149,10 +149,10 @@ tr:hover td { background: #DDDDDD; }
     font-size: 0;
 }
 
-#results { margin: 10px; padding: 0; }
+#results { margin: 10px; padding: 0; margin-bottom: 20px; }
 
-#suggestions { position: absolute; left: 54em; width: 12em; margin: 0 2px 5px 5px; padding: 0 2px 2px 2px; }
-#suggestions span { display: block; font-size: 0.8em; margin: 0 2px 10px 2px; padding: 0; }
+#sidebar { position: absolute; left: 54em; width: 12em; margin: 0 2px 5px 5px; padding: 0 2px 2px 2px; }
+#suggestions span { display: block; margin: 0 2px 10px 2px; padding: 0; }
 #suggestions form { display: block; }
 #suggestions input { padding: 2px 6px; margin: 2px 4px;  font-size: 0.8em; display: inline-block; background: #3498DB; color: #FFFFFF; border-radius: 4px; border: 0; cursor: pointer; }
 
@@ -182,7 +182,7 @@ tr:hover td { background: #DDDDDD; }
 
 @media screen and (max-width: 60em) {
 
-  #suggestions { position: static; max-width: 50em; margin: 0 0 2px 0; padding: 0; float: none; border: none; width: auto }
+  #sidebar { position: static; max-width: 50em; margin: 0 0 2px 0; padding: 0; float: none; border: none; width: auto }
   #suggestions span { display: inline; font-size: 0.8em }
   #suggestions form { display: inline; }
   #suggestions input { padding: 2px 6px; margin: 2px 4px;  font-size: 0.8em; display: inline-block; border-radius: 4px; border: 0; cursor: pointer; }
@@ -195,6 +195,8 @@ tr:hover td { background: #DDDDDD; }
 
   .right { display: none; postion: fixed !important; top: 100px; right: 0px; }
 
+  #apis { display: none; }
+
   #categories { font-size: 80%; clear: both; }
 
   #categories .checkbox_container { margin-top: 2px; margin: 0 2px; }

searx/templates/results.html

@@ -6,9 +6,43 @@
     {% include 'search.html' %}
 </div>
 <div id="results">
-    {% if suggestions %}
-    <div id="suggestions"><span>{{ _('Suggestions') }}:</span>{% for suggestion in suggestions %}<form method="post" action="/"><input type="hidden" name="q" value="{{suggestion}}"><input type="submit" value="{{ suggestion }}" /></form>{% endfor %}</div>
-    {% endif %}
+    <div id="sidebar">
+        {% if suggestions %}
+        <div id="suggestions"><span>{{ _('Suggestions') }}</span>
+            {% for suggestion in suggestions %}
+            <form method="post" action="/">
+                <input type="hidden" name="q" value="{{suggestion}}">
+                <input type="submit" value="{{ suggestion }}" />
+            </form>
+            {% endfor %}
+        </div>
+        {% endif %}
+
+        <div id="apis">
+        {{ _('Download results') }}
+        <form method="post" action="/">
+            <div class="left">
+            <input type="hidden" name="q" value="{{ q }}" />
+            <input type="hidden" name="format" value="csv" />
+            <input type="submit" value="csv" />
+            </div>
+        </form>
+        <form method="post" action="/">
+            <div class="left">
+            <input type="hidden" name="q" value="{{ q }}" />
+            <input type="hidden" name="format" value="json" />
+            <input type="submit" value="json" />
+            </div>
+        </form>
+        <form method="post" action="/">
+            <div class="">
+            <input type="hidden" name="q" value="{{ q }}" />
+            <input type="hidden" name="format" value="rss" />
+            <input type="submit" value="rss" />
+            </div>
+        </form>
+        </div>
+    </div>
 
 
     {% for result in results %}
@@ -39,30 +73,5 @@
         </form>
     </div>
     {% endif %}
-
-    <div id="apis">
-      {{ _('Download results') }}
-      <form method="post" action="/">
-        <div class="left">
-          <input type="hidden" name="q" value="{{ q }}" />
-          <input type="hidden" name="format" value="csv" />
-          <input type="submit" value="csv" />
-        </div>
-      </form>
-      <form method="post" action="/">
-        <div class="left">
-          <input type="hidden" name="q" value="{{ q }}" />
-          <input type="hidden" name="format" value="json" />
-          <input type="submit" value="json" />
-        </div>
-      </form>
-      <form method="post" action="/">
-        <div class="">
-          <input type="hidden" name="q" value="{{ q }}" />
-          <input type="hidden" name="format" value="rss" />
-          <input type="submit" value="rss" />
-        </div>
-      </form>
-    </div>
 </div>
 {% endblock %}