on master help sign in
[enh] oscar_template: improve result visualisation
2e7723aThomas Pointhuber
searx/static/oscar/css/leaflet.min.css+2−2
@@ -55,8 +55,8 @@
55.leaflet-touch .leaflet-control-zoom-in{font-size:22px}
55.leaflet-touch .leaflet-control-zoom-in{font-size:22px}
56.leaflet-touch .leaflet-control-zoom-out{font-size:24px}
56.leaflet-touch .leaflet-control-zoom-out{font-size:24px}
57.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,0.4);background:#fff;border-radius:5px}
57.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,0.4);background:#fff;border-radius:5px}
58−.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px}
58+.leaflet-control-layers-toggle{background-image:url(../img/map/layers.png);width:36px;height:36px}
59−.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px}
59+.leaflet-retina .leaflet-control-layers-toggle{background-image:url(../img/map/layers-2x.png);background-size:26px 26px}
60.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}
60.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}
61.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}
61.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}
62.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}
62.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}
searx/static/oscar/css/oscar.min.css+5
@@ -3,11 +3,15 @@ body{margin-bottom:80px}
3.footer{position:absolute;bottom:0;width:100%;height:60px}
3.footer{position:absolute;bottom:0;width:100%;height:60px}
4input[type=checkbox]:checked~.label_hide_if_checked{display:none}
4input[type=checkbox]:checked~.label_hide_if_checked{display:none}
5input[type=checkbox]:not(:checked)~.label_hide_if_not_checked{display:none}
5input[type=checkbox]:not(:checked)~.label_hide_if_not_checked{display:none}
6+.result_header{margin-bottom:5px;margin-top:20px}.result_header .favicon{margin-bottom:-3px}
7+.result_header a{vertical-align:bottom}.result_header a .highlight{font-weight:bold}
8+.result-content .highlight{font-weight:bold}
6.result-default{clear:both}
9.result-default{clear:both}
7.result-images{float:left !important}
10.result-images{float:left !important}
8.img-thumbnail{margin:5px;max-height:128px;min-height:128px}
11.img-thumbnail{margin:5px;max-height:128px;min-height:128px}
9.result-videos{clear:both}
12.result-videos{clear:both}
10.result-torrents{clear:both}
13.result-torrents{clear:both}
14+.result-map{clear:both}
11.suggestion_item{margin:2px 5px}
15.suggestion_item{margin:2px 5px}
12.result_download{margin-right:5px}
16.result_download{margin-right:5px}
13#pagination{margin-top:30px;padding-bottom:50px}
17#pagination{margin-top:30px;padding-bottom:50px}
@@ -15,3 +19,4 @@ input[type=checkbox]:not(:checked)~.label_hide_if_not_checked{display:none}
15.infobox .infobox_part:last-child{margin-bottom:0}
19.infobox .infobox_part:last-child{margin-bottom:0}
16.search_categories{margin:10px 0;text-transform:capitalize}
20.search_categories{margin:10px 0;text-transform:capitalize}
17.cursor-text{cursor:text !important}
21.cursor-text{cursor:text !important}
22+.cursor-pointer{cursor:pointer !important}
searx/static/oscar/less/oscar/cursor.less+4
@@ -2,3 +2,7 @@
2.cursor-text {
2.cursor-text {
3 cursor: text !important;
3 cursor: text !important;
4}
4}
5+
6+.cursor-pointer {
7+ cursor: pointer !important;
8+}
searx/static/oscar/less/oscar/results.less+29
@@ -1,3 +1,27 @@
1+
2+.result_header {
3+ margin-bottom:5px;
4+ margin-top:20px;
5+
6+ .favicon {
7+ margin-bottom:-3px;
8+ }
9+
10+ a {
11+ vertical-align: bottom;
12+
13+ .highlight {
14+ font-weight:bold;
15+ }
16+ }
17+}
18+
19+.result-content {
20+ .highlight {
21+ font-weight:bold;
22+ }
23+}
24+
1// default formating of results
25// default formating of results
2.result-default {
26.result-default {
3 clear: both;
27 clear: both;
@@ -24,6 +48,11 @@
24 clear: both;
48 clear: both;
25}
49}
26
50
51+// map formating of results
52+.result-map {
53+ clear: both;
54+}
55+
27// suggestion
56// suggestion
28.suggestion_item {
57.suggestion_item {
29 margin: 2px 5px;
58 margin: 2px 5px;
searx/templates/oscar/base.html+1−1
@@ -66,6 +66,6 @@
66 <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
66 <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
67 {% if autocomplete %}<script src="{{ url_for('static', filename='js/typeahead.bundle.min.js') }}"></script>{% endif %}
67 {% if autocomplete %}<script src="{{ url_for('static', filename='js/typeahead.bundle.min.js') }}"></script>{% endif %}
68 <script src="{{ url_for('static', filename='js/require-2.1.15.min.js') }}"></script>
68 <script src="{{ url_for('static', filename='js/require-2.1.15.min.js') }}"></script>
69− <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>-->
69+ <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
70</body>
70</body>
71</html>
71</html>
searx/templates/oscar/result_templates/default.html+5−2
@@ -1,8 +1,11 @@
1+{% from 'oscar/macros.html' import icon %}
2+
1−<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>
3+<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>
2
4
3{% if result.publishedDate %}<time class="text-muted" datetime="{{ result.publishedDate }}" pubdate>{{ result.publishedDate }}</time>{% endif %}
5{% if result.publishedDate %}<time class="text-muted" datetime="{{ result.publishedDate }}" pubdate>{{ result.publishedDate }}</time>{% endif %}
6+<small><a class="text-info" href="https://web.archive.org/web/{{ result.pretty_url }}">{{ icon('link') }} {{ _('cached') }}</a></small>
4
7
5−{% if result.content %}<p>{{ result.content|safe }}</p>{% endif %}
8+{% if result.content %}<p class="result-content">{{ result.content|safe }}</p>{% endif %}
6
9
7<div class="clearfix"></div>
10<div class="clearfix"></div>
8
11
searx/templates/oscar/result_templates/images.html+1−1
@@ -11,7 +11,7 @@
11 </div>
11 </div>
12 <div class="modal-body">
12 <div class="modal-body">
13 <img class="img-responsive center-block" src="{{ result.img_src }}" alt="{{ result.title }}">
13 <img class="img-responsive center-block" src="{{ result.img_src }}" alt="{{ result.title }}">
14− {% if result.content %}<p>{{ result.content|safe }}</p>{% endif %}
14+ {% if result.content %}<p class="result-content">{{ result.content|safe }}</p>{% endif %}
15 </div>
15 </div>
16 <div class="modal-footer">
16 <div class="modal-footer">
17 <div class="clearfix"></div>
17 <div class="clearfix"></div>
searx/templates/oscar/result_templates/map.html+10−6
@@ -1,12 +1,16 @@
1−<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>
1+{% from 'oscar/macros.html' import icon %}
2
2
3−{% if result.publishedDate %}<time class="text-muted" datetime="{{ result.publishedDate }}" pubdate>{{ result.publishedDate }}</time>{% endif %}
3+<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>
4−
5−{% if result.content %}<p>{{ result.content|safe }}</p>{% endif %}
6
4
5+{% if result.publishedDate %}<time class="text-muted" datetime="{{ result.publishedDate }}" pubdate>{{ result.publishedDate }}</time>{% endif %}
6+<small><a class="text-info" href="https://web.archive.org/web/{{ result.pretty_url }}">{{ icon('link') }} {{ _('cached') }}</a></small>
7−{% if result.latitude and result.longitude %}
7+{% if (result.latitude and result.longitude) or result.boundingbox %}
8− <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>
8+ <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>
9+{% endif %}
10+
11+{% if result.content %}<p class="result-content">{{ result.content|safe }}</p>{% endif %}
9
12
13+{% if (result.latitude and result.longitude) or result.boundingbox %}
10 <div class="collapse" id="result-map-{{ index }}">
14 <div class="collapse" id="result-map-{{ index }}">
11 <div style="height:300px; width:100%; margin: 10px 0;" id="osm-map-{{ index }}"></div>
15 <div style="height:300px; width:100%; margin: 10px 0;" id="osm-map-{{ index }}"></div>
12 </div>
16 </div>
searx/templates/oscar/result_templates/torrent.html+3−2
@@ -1,14 +1,15 @@
1{% from 'oscar/macros.html' import icon %}
1{% from 'oscar/macros.html' import icon %}
2
2
3−<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>
3+<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>
4
4
5{% if result.publishedDate %}<time class="text-muted" datetime="{{ result.publishedDate }}" pubdate>{{ result.publishedDate }}</time>{% endif %}
5{% if result.publishedDate %}<time class="text-muted" datetime="{{ result.publishedDate }}" pubdate>{{ result.publishedDate }}</time>{% endif %}
6+<small><a class="text-info" href="https://web.archive.org/web/{{ result.pretty_url }}">{{ icon('link') }} {{ _('cached') }}</a></small>
6
7
7<p>{{ icon('transfer') }} {{ _('Seeder') }} <span class="badge">{{ result.seed }}</span>, {{ _('Leecher') }} <span class="badge">{{ result.leech }}</span></p>
8<p>{{ icon('transfer') }} {{ _('Seeder') }} <span class="badge">{{ result.seed }}</span>, {{ _('Leecher') }} <span class="badge">{{ result.leech }}</span></p>
8
9
9<p><a href="{{ result.magnetlink }}" class="magnetlink">{{ icon('magnet') }} magnet link</a></p>
10<p><a href="{{ result.magnetlink }}" class="magnetlink">{{ icon('magnet') }} magnet link</a></p>
10
11
11−{% if result.content %}<p>{{ result.content|safe }}</p>{% endif %}
12+{% if result.content %}<p class="result-content">{{ result.content|safe }}</p>{% endif %}
12
13
13<div class="clearfix"></div>
14<div class="clearfix"></div>
14
15
searx/templates/oscar/result_templates/videos.html+6−3
@@ -1,11 +1,14 @@
1+{% from 'oscar/macros.html' import icon %}
2+
1−<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>
3+<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>
2
4
3{% if result.publishedDate %}<time class="text-muted" datetime="{{ result.publishedDate }}" pubdate>{{ result.publishedDate }}</time>{% endif %}
5{% if result.publishedDate %}<time class="text-muted" datetime="{{ result.publishedDate }}" pubdate>{{ result.publishedDate }}</time>{% endif %}
4−
6+<small><a class="text-info" href="https://web.archive.org/web/{{ result.pretty_url }}">{{ icon('link') }} {{ _('cached') }}</a></small>
7+
5<div class="container-fluid">
8<div class="container-fluid">
6 <div class="row">
9 <div class="row">
7 <img class="thumbnail col-xs-6 col-sm-4 col-md-4" src="{{ result.thumbnail|safe }}" />
10 <img class="thumbnail col-xs-6 col-sm-4 col-md-4" src="{{ result.thumbnail|safe }}" />
8− {% if result.content %}<p class="col-xs-12 col-sm-8 col-md-8">{{ result.content|safe }}</p>{% endif %}
11+ {% if result.content %}<p class="col-xs-12 col-sm-8 col-md-8 result-content">{{ result.content|safe }}</p>{% endif %}
9 </div>
12 </div>
10</div>
13</div>
11
14