[enh] oscar_template: improve result visualisation

Browse Source 
* highlight parts of result
* add link to archiv.to
* fix little bugs
* add little icons
* change style of "show map" button
This commit is contained in:
Thomas Pointhuber 2014-11-03 10:39:47 +01:00
parent b2c976a5a3
commit 2e7723a6c1
10 changed files with 59 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
searx/static/oscar/css/leaflet.min.css vendored
View File

Binary file not shown.

BIN
searx/static/oscar/css/oscar.min.css vendored
View File

Binary file not shown.

4
searx/static/oscar/less/oscar/cursor.less
View File

@ -2,3 +2,7 @@
.cursor-text { .cursor-text {
cursor: text !important; cursor: text !important;
} }
.cursor-pointer {
cursor: pointer !important;
}

29
searx/static/oscar/less/oscar/results.less
View File

@ -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 // default formating of results
.result-default { .result-default {
clear: both; clear: both;
@ -24,6 +48,11 @@
clear: both; clear: both;
} }
// map formating of results
.result-map {
clear: both;
}
// suggestion // suggestion
.suggestion_item { .suggestion_item {
margin: 2px 5px; margin: 2px 5px;

2
searx/templates/oscar/base.html
View File

@ -66,6 +66,6 @@
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script> <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 %} {% 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/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> </body>
</html> </html>

7
searx/templates/oscar/result_templates/default.html
View File

@ -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 %} {% 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> <div class="clearfix"></div>

2
searx/templates/oscar/result_templates/images.html
View File

@ -11,7 +11,7 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<img class="img-responsive center-block" src="{{ result.img_src }}" alt="{{ result.title }}"> <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>
<div class="modal-footer"> <div class="modal-footer">
<div class="clearfix"></div> <div class="clearfix"></div>

14
searx/templates/oscar/result_templates/map.html
View File

@ -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 %} {% 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>{{ result.content|safe }}</p>{% endif %} {% if result.content %}<p class="result-content">{{ 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 class="collapse" id="result-map-{{ index }}">
<div style="height:300px; width:100%; margin: 10px 0;" id="osm-map-{{ index }}"></div> <div style="height:300px; width:100%; margin: 10px 0;" id="osm-map-{{ index }}"></div>
</div> </div>

5
searx/templates/oscar/result_templates/torrent.html
View File

@ -1,14 +1,15 @@
{% from 'oscar/macros.html' import icon %} {% 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 %} {% 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>{{ 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> <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> <div class="clearfix"></div>

7
searx/templates/oscar/result_templates/videos.html
View File

@ -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 %} {% 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="container-fluid">
<div class="row"> <div class="row">
<img class="thumbnail col-xs-6 col-sm-4 col-md-4" src="{{ result.thumbnail|safe }}" /> <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>
</div> </div>