Merge pull request #2131 from MarcAbonce/infobox_style

Browse Source 
Make infobox shorter by default and add an expand toggle
This commit is contained in:
Adam Tauber 2020-08-10 12:15:05 +02:00 committed by GitHub
commit 43df251f3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 279 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
searx/results.py
View File

@ -60,6 +60,8 @@ def merge_two_infoboxes(infobox1, infobox2):
if weight2 > weight1:
infobox1['engine'] = infobox2['engine']
infobox1['engines'] |= infobox2['engines']
if 'urls' in infobox2:
urls1 = infobox1.get('urls', None)
if urls1 is None:
@ -189,6 +191,7 @@ class ResultContainer(object):
def _merge_infobox(self, infobox):
add_infobox = True
infobox_id = infobox.get('id', None)
infobox['engines'] = set([infobox['engine']])
if infobox_id is not None:
parsed_url_infobox_id = urlparse(infobox_id)
for existingIndex in self.infoboxes:

39
searx/static/themes/oscar/css/logicodev-dark.css
View File

@ -295,10 +295,19 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
.infobox .panel-heading .panel-title {
font-weight: 700;
}
.infobox .header_url {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.infobox p {
font-family: "DejaVu Serif", Georgia, Cambria, "Times New Roman", Times, serif !important;
font-style: italic;
}
.infobox img {
max-height: "250px";
}
.infobox .btn {
background-color: #007ab8;
border: none;
@ -315,6 +324,36 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
.infobox .infobox_part:last-child {
margin-bottom: 0;
}
.infobox .infobox_toggle {
width: 100%;
text-align: center;
margin-bottom: 0px;
}
.infobox .infobox_checkbox ~ .infobox_body {
max-height: 300px;
overflow: hidden;
}
.infobox .infobox_checkbox:checked ~ .infobox_body {
max-height: none;
}
.infobox .infobox_checkbox ~ .infobox_toggle .infobox_label_down {
display: block;
}
.infobox .infobox_checkbox ~ .infobox_toggle .infobox_label_up {
display: none;
}
.infobox .infobox_checkbox:checked ~ .infobox_toggle .infobox_label_up {
display: block;
}
.infobox .infobox_checkbox:checked ~ .infobox_toggle .infobox_label_down {
display: none;
}
.infobox .infobox_checkbox ~ .infobox_body img.infobox_part {
display: none;
}
.infobox .infobox_checkbox:checked ~ .infobox_body img.infobox_part {
display: block;
}
.search_categories,
#categories {
text-transform: capitalize;

BIN
searx/static/themes/oscar/css/logicodev-dark.min.css vendored
View File

Binary file not shown.

39
searx/static/themes/oscar/css/logicodev.css
View File

@ -268,10 +268,19 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
.infobox .panel-heading .panel-title {
font-weight: 700;
}
.infobox .header_url {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.infobox p {
font-family: "DejaVu Serif", Georgia, Cambria, "Times New Roman", Times, serif !important;
font-style: italic;
}
.infobox img {
max-height: "250px";
}
.infobox .btn {
background-color: #007ab8;
border: none;
@ -288,6 +297,36 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
.infobox .infobox_part:last-child {
margin-bottom: 0;
}
.infobox .infobox_toggle {
width: 100%;
text-align: center;
margin-bottom: 0px;
}
.infobox .infobox_checkbox ~ .infobox_body {
max-height: 300px;
overflow: hidden;
}
.infobox .infobox_checkbox:checked ~ .infobox_body {
max-height: none;
}
.infobox .infobox_checkbox ~ .infobox_toggle .infobox_label_down {
display: block;
}
.infobox .infobox_checkbox ~ .infobox_toggle .infobox_label_up {
display: none;
}
.infobox .infobox_checkbox:checked ~ .infobox_toggle .infobox_label_up {
display: block;
}
.infobox .infobox_checkbox:checked ~ .infobox_toggle .infobox_label_down {
display: none;
}
.infobox .infobox_checkbox ~ .infobox_body img.infobox_part {
display: none;
}
.infobox .infobox_checkbox:checked ~ .infobox_body img.infobox_part {
display: block;
}
.search_categories,
#categories {
text-transform: capitalize;

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

Binary file not shown.

50
searx/static/themes/oscar/css/pointhi.css
View File

@ -156,6 +156,9 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
outline: 0 none;
position: relative;
}
.infobox img {
max-height: 250px;
}
.infobox .infobox_part {
margin-bottom: 20px;
word-wrap: break-word;
@ -164,6 +167,42 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
.infobox .infobox_part:last-child {
margin-bottom: 0;
}
.infobox .header_url {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.infobox .infobox_toggle {
width: 100%;
text-align: center;
margin-bottom: 0px;
}
.infobox .infobox_checkbox ~ .infobox_body {
max-height: 300px;
overflow: hidden;
}
.infobox .infobox_checkbox:checked ~ .infobox_body {
max-height: none;
}
.infobox .infobox_checkbox ~ .infobox_toggle .infobox_label_down {
display: block;
}
.infobox .infobox_checkbox ~ .infobox_toggle .infobox_label_up {
display: none;
}
.infobox .infobox_checkbox:checked ~ .infobox_toggle .infobox_label_up {
display: block;
}
.infobox .infobox_checkbox:checked ~ .infobox_toggle .infobox_label_down {
display: none;
}
.infobox .infobox_checkbox ~ .infobox_body img.infobox_part {
display: none;
}
.infobox .infobox_checkbox:checked ~ .infobox_body img.infobox_part {
display: block;
}
.search_categories,
#categories {
text-transform: capitalize;
@ -202,6 +241,17 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
font-weight: bold;
background-color: #EEE;
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
/* added line */
}
#advanced-search-container {
display: none;
text-align: center;

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

Binary file not shown.

11
searx/static/themes/oscar/js/searx.js
View File

@ -204,6 +204,17 @@ $(document).ready(function(){
$(a.target).parent().attr("aria-selected", "true");
});
});
;$(document).ready(function() {
// Hide infobox toggle if shrunk size already fits all content.
$('.infobox').each(function() {
var infobox_body = $(this).find('.infobox_body');
var total_height = infobox_body.prop('scrollHeight') + infobox_body.find('img.infobox_part').height();
var max_height = infobox_body.css('max-height').replace('px', '');
if (total_height <= max_height) {
$(this).find('.infobox_toggle').hide();
}
});
});
;/**
* searx is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by

BIN
searx/static/themes/oscar/js/searx.min.js vendored
View File

Binary file not shown.

11
searx/static/themes/oscar/js/searx_src/infobox.js Normal file
View File

@ -0,0 +1,11 @@
$(document).ready(function() {
// Hide infobox toggle if shrunk size already fits all content.
$('.infobox').each(function() {
var infobox_body = $(this).find('.infobox_body');
var total_height = infobox_body.prop('scrollHeight') + infobox_body.find('img.infobox_part').height();
var max_height = infobox_body.css('max-height').replace('px', '');
if (total_height <= max_height) {
$(this).find('.infobox_toggle').hide();
}
});
});

50
searx/static/themes/oscar/less/logicodev/infobox.less
View File

@ -8,12 +8,23 @@
}
}
.header_url {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
p{
font-family: "DejaVu Serif", Georgia, Cambria, "Times New Roman", Times, serif !important;
font-style: italic;
}
img{
max-height: "250px";
}
.btn{
background-color: @dark-blue;
border: none;
@ -34,4 +45,43 @@
.infobox_part:last-child {
margin-bottom: 0;
}
.infobox_toggle {
width: 100%;
text-align: center;
margin-bottom: 0px;
}
// Shrink infobox size when toggle is off
.infobox_checkbox ~ .infobox_body {
max-height: 300px;
overflow: hidden;
}
.infobox_checkbox:checked ~ .infobox_body {
max-height: none;
}
// Show toggle button as down when infobox is shrunk
.infobox_checkbox ~ .infobox_toggle .infobox_label_down {
display: block;
}
.infobox_checkbox ~ .infobox_toggle .infobox_label_up {
display: none;
}
// Show toggle button as up when infobox is expanded
.infobox_checkbox:checked ~ .infobox_toggle .infobox_label_up {
display: block;
}
.infobox_checkbox:checked ~ .infobox_toggle .infobox_label_down {
display: none;
}
// Hide main image when toggle is off
.infobox_checkbox ~ .infobox_body img.infobox_part {
display: none;
}
.infobox_checkbox:checked ~ .infobox_body img.infobox_part {
display: block;
}
}

51
searx/static/themes/oscar/less/pointhi/infobox.less
View File

@ -1,4 +1,9 @@
.infobox {
img {
max-height: 250px;
}
.infobox_part {
margin-bottom: 20px;
word-wrap: break-word;
@ -8,4 +13,50 @@
.infobox_part:last-child {
margin-bottom: 0;
}
.header_url {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.infobox_toggle {
width: 100%;
text-align: center;
margin-bottom: 0px;
}
// Shrink infobox size when toggle is off
.infobox_checkbox ~ .infobox_body {
max-height: 300px;
overflow: hidden;
}
.infobox_checkbox:checked ~ .infobox_body {
max-height: none;
}
// Show toggle button as down when infobox is shrunk
.infobox_checkbox ~ .infobox_toggle .infobox_label_down {
display: block;
}
.infobox_checkbox ~ .infobox_toggle .infobox_label_up {
display: none;
}
// Show toggle button as up when infobox is expanded
.infobox_checkbox:checked ~ .infobox_toggle .infobox_label_up {
display: block;
}
.infobox_checkbox:checked ~ .infobox_toggle .infobox_label_down {
display: none;
}
// Hide main image when toggle is off
.infobox_checkbox ~ .infobox_body img.infobox_part {
display: none;
}
.infobox_checkbox:checked ~ .infobox_body img.infobox_part {
display: block;
}
}

10
searx/static/themes/oscar/less/pointhi/search.less
View File

@ -31,3 +31,13 @@
background-color: #EEE;
}
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
}

18
searx/templates/oscar/infobox.html
View File

@ -1,10 +1,18 @@
{% from 'oscar/macros.html' import result_link with context %}
<div class="panel panel-default infobox">
<div class="panel-heading">{{- "" -}}
<h4 class="panel-title infobox_part"><bdi>{{ infobox.infobox }}</bdi></h4>{{- "" -}}
{% for u in infobox.urls %}{% if u.official %} <a href="{{ u.url }}">{{ u.domain }}</a>{% endif %}{% endfor %}
<div class="infobox_part">
<div class="{% if not rtl %}pull-right{% endif %}">
{% for engine in infobox.engines %}
<span class="label label-default">{{ engine }}</span>
{% endfor %}
</div>
<div class="panel-body">
<h4 class="panel-title"><bdi>{{ infobox.infobox }}</bdi></h4>{{- "" -}}
{% for u in infobox.urls %}{% if u.official %} <a class="header_url" href="{{ u.url }}">{{ u.url }}</a>{% endif %}{% endfor %}
</div>
</div>
<input type="checkbox" class="infobox_checkbox" id="expand_infobox_{{ infobox.engine }}" hidden>
<div class="panel-body infobox_body">
{% if infobox.img_src %}<img class="img-responsive center-block infobox_part" src="{{ image_proxify(infobox.img_src) }}" />{% endif %}
{% if infobox.content %}<bdi><p class="infobox_part">{{ infobox.content | safe }}</p></bdi>{% endif %}
@ -38,4 +46,8 @@
</div>
{% endif %}
</div>
<label for="expand_infobox_{{ infobox.engine }}" class="infobox_toggle panel-footer">
<span class="infobox_label_down glyphicon glyphicon-chevron-down"></span>
<span class="infobox_label_up glyphicon glyphicon-chevron-up"></span>
</label>
</div>