oscar template: improve result page

* add paging support
* add suggestion panel
* add links panel

2 files changed, 88 insertions, 6 deletions

diff --git a/searx/static/oscar/css/oscar.css b/searx/static/oscar/css/oscar.css
index b3e42f607..b0c0c7344 100644
--- a/searx/static/oscar/css/oscar.css
+++ b/searx/static/oscar/css/oscar.css
@@ -15,7 +15,7 @@ body {
   bottom: 0;
   width: 100%;
   /* Set the fixed height of the footer here */
-  height: 40px;
+  height: 60px;
 }
 
 input[type=checkbox]:checked ~ .label_hide_if_checked {
@@ -51,3 +51,15 @@ input[type=checkbox]:not(:checked) ~ .label_hide_if_not_checked {
     max-height: 128px;
     min-height: 128px;
 }
+
+.suggestion_item {
+    margin: 2px 5px;
+}
+
+.result_download {
+    margin-right: 5px;
+}
+
+#pagination {
+    margin-top: 30px;
+}
diff --git a/searx/templates/oscar/results.html b/searx/templates/oscar/results.html
index fde65c883..f4364ed48 100644
--- a/searx/templates/oscar/results.html
+++ b/searx/templates/oscar/results.html
@@ -5,18 +5,88 @@
         <div class="col-sm-8" id="main_results">

             <h1 class="sr-only">{{ _('Search results') }}</h1>

             {% include 'oscar/search.html' %}

-            

+

             {% for result in results %}

             <div class="result {% if result['template'] %}result-{{ result.template|replace('.html', '') }}{% else %}result-default{% endif %}">

                 {% set index = loop.index %}

                 {% if result.template %}{% include 'oscar/result_templates/'+result['template'] %}{% else %}{% include 'oscar/result_templates/default.html' %}{% endif %}

             </div>

             {% endfor %}

-            

+

             <div class="clearfix"></div>

-    

-        </div>

+

+            {% if paging %}

+            <div id="pagination">

+                <div class="pull-left">

+                    <form method="{{ method or 'POST' }}" action="{{ url_for('index') }}" class="pull-left">

+                        <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 }}" />

+                        <button type="submit" class="btn btn-default" {% if pageno == 1 %}disabled{% endif %}><span class="glyphicon glyphicon-backward"></span> {{ _('previous page') }}</button>

+                    </form>

+                </div>

+                <div class="pull-right">

+                    <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="q" value="{{ q }}" />

+                        <input type="hidden" name="pageno" value="{{ pageno+1 }}" />

+                        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-forward"></span> {{ _('next page') }}</button>

+                    </form>

+                </div>

+            </div><!-- /#pagination -->

+            <div class="clearfix"></div>

+            {% endif %}

+        </div><!-- /#main_results -->

+

         <div class="col-sm-4" id="sidebar_results">

-        </div>

+

+            {% if suggestions %}

+            <div class="panel panel-default">

+                <div class="panel-heading">

+                    <h4 class="panel-title">

+                        <a data-toggle="collapse" data-parent="#accordion" href="#suggestions">{{ _('Suggestions') }}</a>

+                    </h4>

+                </div>

+                <div class="panel-body">

+                    {% for suggestion in suggestions %}

+                    <form method="{{ method or 'POST' }}" action="{{ url_for('index') }}" role="navigation" class="form-inline pull-left suggestion_item">

+                        <input type="hidden" name="q" value="{{ suggestion }}">

+                        <button type="submit" class="btn btn-default btn-xs">{{ suggestion }}</button>

+                    </form>

+                    {% endfor %}

+                </div>

+            </div>

+            {% endif %}

+

+            <div class="panel panel-default">

+                <div class="panel-heading">

+                    <h4 class="panel-title">

+                        <a data-toggle="collapse" data-parent="#accordion" href="#links">{{ _('Links') }}</a>

+                    </h4>

+                </div>

+                <div class="panel-body">

+                    <form role="form">

+                        <div class="form-group">

+                            <label for="search_url">{{ _('Search URL') }}</label>

+                            <input type="url" class="form-control" name="search_url" value="{{ base_url }}?q={{ q|urlencode }}&pageno={{ pageno }}{% if selected_categories %}&category_{{ selected_categories|join("&category_") }}{% endif %}">

+                        </div>

+                    </form>

+                    

+                    <label>{{ _('Download results') }}</label>

+                    <div class="clearfix"></div>

+                    {% for output_type in ('csv', 'json', 'rss') %}

+                    <form method="{{ method or 'POST' }}" action="{{ url_for('index') }}" class="form-inline pull-left result_download">

+                        <input type="hidden" name="q" value="{{ q }}">

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

+                        <button type="submit" class="btn btn-default">{{ output_type }}</button>

+                    </form>

+                    {% endfor %} 

+                    <div class="clearfix"></div>

+                </div>

+            </div>

+        

+        </div><!-- /#sidebar_results -->

     </div>

 {% endblock %}