From 2e7723a6c1ce51c6b3830470164ac818126760ae Mon Sep 17 00:00:00 2001
From: Thomas Pointhuber <thomas.pointhuber@gmx.at>
Date: Mon, 3 Nov 2014 10:39:47 +0100
Subject: [PATCH] [enh] oscar_template: improve result visualisation

* highlight parts of result
* add link to archiv.to
* fix little bugs
* add little icons
* change style of "show map" button
---
 searx/static/oscar/css/leaflet.min.css        | Bin 8019 -> 8027 bytes
 searx/static/oscar/css/oscar.min.css          | Bin 757 -> 1047 bytes
 searx/static/oscar/less/oscar/cursor.less     |   4 +++
 searx/static/oscar/less/oscar/results.less    |  29 ++++++++++++++++++
 searx/templates/oscar/base.html               |   2 +-
 .../oscar/result_templates/default.html       |   7 +++--
 .../oscar/result_templates/images.html        |   2 +-
 .../templates/oscar/result_templates/map.html |  16 ++++++----
 .../oscar/result_templates/torrent.html       |   5 +--
 .../oscar/result_templates/videos.html        |   9 ++++--
 10 files changed, 59 insertions(+), 15 deletions(-)

diff --git a/searx/static/oscar/css/leaflet.min.css b/searx/static/oscar/css/leaflet.min.css
index 417e0e8e7bfa08894dae9fde7af6c78a6258fe17..bca0c58b9a6b4aeb77b2366cacb5e2893e6f8889 100644
GIT binary patch
delta 38
kcmca?ciV2mZ2>MlJ^jqwbp71Kg2@jBGLg8O0|c4*03W>#RsaA1

delta 30
gcmca@ciC>kZ2`8-+{E<M;>k}1GNH`P5rWKo0M5S)+yDRo

diff --git a/searx/static/oscar/css/oscar.min.css b/searx/static/oscar/css/oscar.min.css
index 5d2c24e63e61c480e0f86d5ca0a84fcd11b5d728..1afd3e866182ffc376896eb5de54313965bd009a 100644
GIT binary patch
delta 287
zcmaKmJqp4=5JuTTkaXT4*0PHzHf!Z6EM-hK*@f&6n@J3W;2|u$hM<-AvUepxFooTG
z!~5RMYjU05X5@U30#e~y4L(<f9xbBPeB+w!utDqiYU!Gec~Mpc4uzOyP^-k6QIoC%
z8jV<JYvEBPP*5mTZg_ttDEB{3h?!Km42Z-wvj*u&eCEIx>DNlbRTKvQ!Ivp{M*YK7
ggS$V-jx1PG`O<potO^3(_K^=Uo-6IFM=;n$Z<VNRmjD0&

delta 16
YcmbQv@s)LhAmii@j2k!aWHM$1060trGXMYp

diff --git a/searx/static/oscar/less/oscar/cursor.less b/searx/static/oscar/less/oscar/cursor.less
index c7e3191d8..cbc1ea6fc 100644
--- a/searx/static/oscar/less/oscar/cursor.less
+++ b/searx/static/oscar/less/oscar/cursor.less
@@ -2,3 +2,7 @@
 .cursor-text {
     cursor: text !important;
 }
+
+.cursor-pointer {
+    cursor: pointer !important;
+}
diff --git a/searx/static/oscar/less/oscar/results.less b/searx/static/oscar/less/oscar/results.less
index 06c8a1740..9ca2109bc 100644
--- a/searx/static/oscar/less/oscar/results.less
+++ b/searx/static/oscar/less/oscar/results.less
@@ -1,3 +1,27 @@
+
+.result_header {
+    margin-bottom:5px;
+    margin-top:20px;
+
+    .favicon {
+        margin-bottom:-3px;
+    }
+    
+    a {
+        vertical-align: bottom;
+        
+        .highlight {
+            font-weight:bold;
+        }
+    }
+}
+
+.result-content {
+    .highlight {
+        font-weight:bold;
+    }
+}
+
 // default formating of results
 .result-default {
     clear: both;
@@ -24,6 +48,11 @@
     clear: both;
 }
 
+// map formating of results
+.result-map {
+    clear: both;
+}
+
 // suggestion
 .suggestion_item {
     margin: 2px 5px;
diff --git a/searx/templates/oscar/base.html b/searx/templates/oscar/base.html
index 8c4dd3edc..0acece9d2 100644
--- a/searx/templates/oscar/base.html
+++ b/searx/templates/oscar/base.html
@@ -66,6 +66,6 @@
     <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
     {% if autocomplete %}<script src="{{ url_for('static', filename='js/typeahead.bundle.min.js') }}"></script>{% endif %}
     <script src="{{ url_for('static', filename='js/require-2.1.15.min.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>-->
+    <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
 </body>
 </html>
diff --git a/searx/templates/oscar/result_templates/default.html b/searx/templates/oscar/result_templates/default.html
index 018a29e0e..3fe9b913c 100644
--- a/searx/templates/oscar/result_templates/default.html
+++ b/searx/templates/oscar/result_templates/default.html
@@ -1,8 +1,11 @@
-<h3>{% if result['favicon'] %}<img width="32" height="32" class="favicon" src="static/{{ theme }}/img/icons/{{ result['favicon'] }}.png" /> {% endif %}<a href="{{ result.url }}">{{ result.title|safe }}</a></h3>
+{% from 'oscar/macros.html' import icon %}
+
+<h4 class="result_header">{% if result['favicon'] %}<img width="32" height="32" class="favicon" src="static/{{ theme }}/img/icons/{{ result['favicon'] }}.png" /> {% endif %}<a href="{{ result.url }}">{{ result.title|safe }}</a></h4>
 
 {% if result.publishedDate %}<time class="text-muted" datetime="{{ result.publishedDate }}" pubdate>{{ result.publishedDate }}</time>{% endif %}
+<small><a class="text-info" href="https://web.archive.org/web/{{ result.pretty_url }}">{{ icon('link') }} {{ _('cached') }}</a></small>
 
-{% if result.content %}<p>{{ result.content|safe }}</p>{% endif %}
+{% if result.content %}<p class="result-content">{{ result.content|safe }}</p>{% endif %}
 
 <div class="clearfix"></div>
 
diff --git a/searx/templates/oscar/result_templates/images.html b/searx/templates/oscar/result_templates/images.html
index 578df4595..c1b9e9b01 100644
--- a/searx/templates/oscar/result_templates/images.html
+++ b/searx/templates/oscar/result_templates/images.html
@@ -11,7 +11,7 @@
             </div>
             <div class="modal-body">
                 <img class="img-responsive center-block" src="{{ result.img_src }}" alt="{{ result.title }}">
-                {% if result.content %}<p>{{ result.content|safe }}</p>{% endif %}
+                {% if result.content %}<p class="result-content">{{ result.content|safe }}</p>{% endif %}
             </div>
             <div class="modal-footer">
                 <div class="clearfix"></div>
diff --git a/searx/templates/oscar/result_templates/map.html b/searx/templates/oscar/result_templates/map.html
index 3385f5ba7..45aa76356 100644
--- a/searx/templates/oscar/result_templates/map.html
+++ b/searx/templates/oscar/result_templates/map.html
@@ -1,12 +1,16 @@
-<h3>{% if result['favicon'] %}<img width="32" height="32" class="favicon" src="static/{{ theme }}/img/icons/{{ result['favicon'] }}.png" /> {% endif %}<a href="{{ result.url }}">{{ result.title|safe }}</a></h3>
+{% from 'oscar/macros.html' import icon %}
+
+<h4 class="result_header">{% if result['favicon'] %}<img width="32" height="32" class="favicon" src="static/{{ theme }}/img/icons/{{ result['favicon'] }}.png" /> {% endif %}<a href="{{ result.url }}">{{ result.title|safe }}</a></h4>
 
 {% if result.publishedDate %}<time class="text-muted" datetime="{{ result.publishedDate }}" pubdate>{{ result.publishedDate }}</time>{% endif %}
+<small><a class="text-info" href="https://web.archive.org/web/{{ result.pretty_url }}">{{ icon('link') }} {{ _('cached') }}</a></small>
+{% if (result.latitude and result.longitude) or result.boundingbox %}
+    <small> &bull; <a class="text-info btn-collapse collapsed searx_init_map cursor-pointer" data-toggle="collapse" data-target="#result-map-{{ index }}" data-leaflet-target="osm-map-{{ index }}" data-map-lon="{{ result.longitude }}" data-map-lat="{{ result.latitude }}" {% if result.boundingbox %}data-map-boundingbox='{{ result.boundingbox|tojson|safe }}'{% endif %} {% if result.geojson %}data-map-geojson='{{ result.geojson|tojson|safe }}'{% endif %} data-btn-text-collapsed="{{ _('show map') }}" data-btn-text-not-collapsed="{{ _('hide map') }}">{{ icon('globe') }} {{ _('show map') }}</a></small>
+{% endif %}
+   
+{% if result.content %}<p class="result-content">{{ result.content|safe }}</p>{% endif %}
 
-{% if result.content %}<p>{{ result.content|safe }}</p>{% endif %}
-
-{% if result.latitude and result.longitude %}
-    <button type="button" class="btn btn-default btn-collapse collapsed searx_init_map" data-toggle="collapse" data-target="#result-map-{{ index }}" data-leaflet-target="osm-map-{{ index }}" data-map-lon="{{ result.longitude }}" data-map-lat="{{ result.latitude }}" {% if result.boundingbox %}data-map-boundingbox='{{ result.boundingbox|tojson|safe }}'{% endif %} {% if result.geojson %}data-map-geojson='{{ result.geojson|tojson|safe }}'{% endif %} data-btn-text-collapsed="{{ _('Show Map') }}" data-btn-text-not-collapsed="{{ _('Hide Map') }}">{{ _('Show Map') }}</button>
-
+{% if (result.latitude and result.longitude) or result.boundingbox %}
     <div class="collapse" id="result-map-{{ index }}">
         <div style="height:300px; width:100%; margin: 10px 0;" id="osm-map-{{ index }}"></div>
     </div>
diff --git a/searx/templates/oscar/result_templates/torrent.html b/searx/templates/oscar/result_templates/torrent.html
index 1be66e75a..60d8f2987 100644
--- a/searx/templates/oscar/result_templates/torrent.html
+++ b/searx/templates/oscar/result_templates/torrent.html
@@ -1,14 +1,15 @@
 {% from 'oscar/macros.html' import icon %}
 
-<h3>{% if result['favicon'] %}<img width="32" height="32" class="favicon" src="static/{{ theme }}/img/icons/{{ result['favicon'] }}.png" /> {% endif %}<a href="{{ result.url }}">{{ result.title|safe }}</a></h3>
+<h4 class="result_header">{% if result['favicon'] %}<img width="32" height="32" class="favicon" src="static/{{ theme }}/img/icons/{{ result['favicon'] }}.png" /> {% endif %}<a href="{{ result.url }}">{{ result.title|safe }}</a></h4>
 
 {% if result.publishedDate %}<time class="text-muted" datetime="{{ result.publishedDate }}" pubdate>{{ result.publishedDate }}</time>{% endif %}
+<small><a class="text-info" href="https://web.archive.org/web/{{ result.pretty_url }}">{{ icon('link') }} {{ _('cached') }}</a></small>
 
 <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 %}
+{% if result.content %}<p class="result-content">{{ result.content|safe }}</p>{% endif %}
 
 <div class="clearfix"></div>
 
diff --git a/searx/templates/oscar/result_templates/videos.html b/searx/templates/oscar/result_templates/videos.html
index 4d711ea71..f69134d6f 100644
--- a/searx/templates/oscar/result_templates/videos.html
+++ b/searx/templates/oscar/result_templates/videos.html
@@ -1,11 +1,14 @@
-<h3>{% if result['favicon'] %}<img width="32" height="32" class="favicon" src="static/{{ theme }}/img/icons/{{ result['favicon'] }}.png" /> {% endif %}<a href="{{ result.url }}">{{ result.title|safe }}</a></h3>
+{% from 'oscar/macros.html' import icon %}
+
+<h4 class="result_header">{% if result['favicon'] %}<img width="32" height="32" class="favicon" src="static/{{ theme }}/img/icons/{{ result['favicon'] }}.png" /> {% endif %}<a href="{{ result.url }}">{{ result.title|safe }}</a></h4>
     
 {% if result.publishedDate %}<time class="text-muted" datetime="{{ result.publishedDate }}" pubdate>{{ result.publishedDate }}</time>{% endif %}
-    
+<small><a class="text-info" href="https://web.archive.org/web/{{ result.pretty_url }}">{{ icon('link') }} {{ _('cached') }}</a></small>
+
 <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 %}
+        {% if result.content %}<p class="col-xs-12 col-sm-8 col-md-8 result-content">{{ result.content|safe }}</p>{% endif %}
     </div>
 </div>