oscar template: implement first version of results page

* implement results page
* improve search form template
* implement all result_templates
* fix youtube engine

10 files changed, 127 insertions, 15 deletions

diff --git a/searx/engines/youtube.py b/searx/engines/youtube.py
index a3c3980af..e217fb079 100644
--- a/searx/engines/youtube.py
+++ b/searx/engines/youtube.py
@@ -69,12 +69,8 @@ def response(resp):
 
         if result['media$group']['media$thumbnail']:
             thumbnail = result['media$group']['media$thumbnail'][0]['url']
-            content += '<a href="{0}" title="{0}" ><img src="{1}" /></a>'.format(url, thumbnail)  # noqa
 
-        if content:
-            content += '<br />' + result['content']['$t']
-        else:
-            content = result['content']['$t']
+        content = result['content']['$t']
 
         # append result
         results.append({'url': url,
diff --git a/searx/static/oscar/css/oscar.css b/searx/static/oscar/css/oscar.css
index 4ff475e89..b3e42f607 100644
--- a/searx/static/oscar/css/oscar.css
+++ b/searx/static/oscar/css/oscar.css
@@ -25,3 +25,29 @@ input[type=checkbox]:checked ~ .label_hide_if_checked {
 input[type=checkbox]:not(:checked) ~ .label_hide_if_not_checked {
   display:none;
 }
+
+.search_categories {
+  margin:10px 0;
+}
+
+.result-default {
+    clear: both;
+}
+
+.result-images {
+    float: left !important;
+}
+
+.result-videos {
+    clear: both;
+}
+
+.result-torrents {
+    clear: both;
+}
+
+.img-thumbnail {
+    margin: 5px;
+    max-height: 128px;
+    min-height: 128px;
+}
diff --git a/searx/templates/oscar/index.html b/searx/templates/oscar/index.html
index adb535d9b..e58aa073a 100644
--- a/searx/templates/oscar/index.html
+++ b/searx/templates/oscar/index.html
@@ -8,7 +8,7 @@
     </div>
     <div class="row">
         <div class="text-center col-sm-12 col-md-12">
-            {% include 'oscar/search.html' %}
+            {% include 'oscar/search_full.html' %}
         </div>
     </div>
 </div>
diff --git a/searx/templates/oscar/result_templates/default.html b/searx/templates/oscar/result_templates/default.html
new file mode 100644
index 000000000..2ea246542
--- /dev/null
+++ b/searx/templates/oscar/result_templates/default.html
@@ -0,0 +1,8 @@
+<h3><a href="{{ result.url }}">{{ result.title|safe }}</a></h3>

+

+{% if result.publishedDate %}<time class="text-muted" datetime="{{ result.publishedDate }}" pubdate>{{ result.publishedDate }}</time>{% endif %}

+

+{% if result.content %}<p>{{ result.content|safe }}</p>{% endif %}

+

+<span class="label label-default pull-right">{{ result.engine }}</span>

+<p class="text-muted">{% if result['favicon'] %}<img width="14" height="14" class="favicon" src="static/{{ theme }}/img/icon_{{ result['favicon'] }}.ico" />{% endif %} {{ result.pretty_url }}</p>

diff --git a/searx/templates/oscar/result_templates/images.html b/searx/templates/oscar/result_templates/images.html
new file mode 100644
index 000000000..07b427d78
--- /dev/null
+++ b/searx/templates/oscar/result_templates/images.html
@@ -0,0 +1,21 @@
+<a href="#" data-toggle="modal" data-target="#modal-{{ index }}">

+    <img src="{{ result.img_src }}" alt="{{ result.title|e }}" class="img-thumbnail">

+</a>

+

+<div class="modal fade" id="modal-{{ index }}" tabindex="-1" role="dialog" aria-hidden="true">

+    <div class="modal-dialog">

+        <div class="modal-content">

+            <div class="modal-header">

+                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

+                <h4 class="modal-title">{{ result.title|striptags }}</h4>

+            </div>

+            <div class="modal-body">

+                <img class="img-responsive center-block" src="{{ result.img_src }}" alt="{{ result.title }}">

+            </div>

+            <div class="modal-footer">

+                <a href="{{ result.img_src }}" class="btn btn-default">{{ _('Get image') }}</a>

+                <a href="{{ result.url }}" class="btn btn-default">{{ _('View source') }}</a>

+            </div>

+        </div>

+    </div>

+</div>

diff --git a/searx/templates/oscar/result_templates/torrent.html b/searx/templates/oscar/result_templates/torrent.html
new file mode 100644
index 000000000..14ac63232
--- /dev/null
+++ b/searx/templates/oscar/result_templates/torrent.html
@@ -0,0 +1,14 @@
+{% from 'oscar/macros.html' import icon %}

+

+<h3><a href="{{ result.url }}">{{ result.title|safe }}</a></h3>

+

+{% if result.publishedDate %}<time class="text-muted" datetime="{{ result.publishedDate }}" pubdate>{{ result.publishedDate }}</time>{% endif %}

+

+<p>{{ icon('transfer') }} {{ _('Seeder') }} <span class="badge">{{ result.seed }}</span>, {{ _('Leecher') }} <span class="badge">{{ result.leech }}</span></p>

+

+<p><a href="{{ result.magnetlink }}" class="magnetlink">{{ icon('magnet') }} magnet link</a></p>

+

+{% if result.content %}<p>{{ result.content|safe }}</p>{% endif %}

+

+<span class="label label-default pull-right">{{ result.engine }}</span>

+<p class="text-muted">{% if result['favicon'] %}<img width="14" height="14" class="favicon" src="static/{{ theme }}/img/icon_{{ result['favicon'] }}.ico" />{% endif %} {{ result.pretty_url }}</p>

diff --git a/searx/templates/oscar/result_templates/videos.html b/searx/templates/oscar/result_templates/videos.html
new file mode 100644
index 000000000..32112472e
--- /dev/null
+++ b/searx/templates/oscar/result_templates/videos.html
@@ -0,0 +1,13 @@
+<h3><a href="{{ result.url }}">{{ result.title|safe }}</a></h3>

+    

+{% if result.publishedDate %}<time class="text-muted" datetime="{{ result.publishedDate }}" pubdate>{{ result.publishedDate }}</time>{% endif %}

+    

+<div class="container-fluid">

+    <div class="row">

+        <img class="thumbnail col-xs-6 col-sm-4 col-md-4" src="{{ result.thumbnail|safe }}" />

+        {% if result.content %}<p class="col-xs-12 col-sm-8 col-md-8">{{ result.content|safe }}</p>{% endif %}

+    </div>

+</div>

+    

+<span class="label label-default pull-right">{{ result.engine }}</span>

+<p class="text-muted">{% if result['favicon'] %}<img width="14" height="14" class="favicon" src="static/{{theme}}/img/icon_{{result['favicon']}}.ico" />{% endif %} {{ result.pretty_url }}</p>

diff --git a/searx/templates/oscar/results.html b/searx/templates/oscar/results.html
new file mode 100644
index 000000000..fde65c883
--- /dev/null
+++ b/searx/templates/oscar/results.html
@@ -0,0 +1,22 @@
+{% extends "oscar/base.html" %}

+{% block title %}{{ q }} - {% endblock %}

+{% block content %}

+    <div class="row">

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

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

+        </div>

+    </div>

+{% endblock %}

diff --git a/searx/templates/oscar/search.html b/searx/templates/oscar/search.html
index f44d48adf..4b1f8b6a1 100644
--- a/searx/templates/oscar/search.html
+++ b/searx/templates/oscar/search.html
@@ -1,17 +1,12 @@
 {% 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-md-8 col-md-offset-2">

-        <input type="search" name="q" class="form-control input-lg" id="q" placeholder="{{ _('Search for...') }}" autocomplete="off" value="{{ q }}">

+    <div class="input-group col-sm-12">

+        <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 input-lg">{{ icon('search') }}<span class="sr-only">{{ _('Start search') }}</span></button>

+            <button type="submit" class="btn btn-default">{{ icon('search') }}<span class="sr-only">{{ _('Start search') }}</span></button>

         </span>

     </div>

-

-    <button type="button" class="btn btn-link btn-collapse center-block collapsed" 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" id="search_categories">

-        <div class="col-md-12 text-center">

+    <div class="search_categories">

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

-        </div>

     </div><!-- / #search_categories -->

 </form><!-- / #search_form_full -->

diff --git a/searx/templates/oscar/search_full.html b/searx/templates/oscar/search_full.html
new file mode 100644
index 000000000..f44d48adf
--- /dev/null
+++ b/searx/templates/oscar/search_full.html
@@ -0,0 +1,17 @@
+{% 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-md-8 col-md-offset-2">

+        <input type="search" name="q" class="form-control input-lg" id="q" placeholder="{{ _('Search for...') }}" autocomplete="off" value="{{ q }}">

+        <span class="input-group-btn">

+            <button type="submit" class="btn btn-default input-lg">{{ icon('search') }}<span class="sr-only">{{ _('Start search') }}</span></button>

+        </span>

+    </div>

+

+    <button type="button" class="btn btn-link btn-collapse center-block collapsed" 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" id="search_categories">

+        <div class="col-md-12 text-center">

+            {% include 'oscar/categories.html' %}

+        </div>

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

+</form><!-- / #search_form_full -->