OwlBurst/Ponysearch
1
0
Fork 0
forked from Ponysearch/Ponysearch
Code Pull requests Activity

add toggle to resize infobox

Browse source
This commit is contained in:
Marc Abonce Seguin 2020-08-03 00:15:54 -07:00
parent 57bad502a6
commit 0601f2bb48
12 changed files with 203 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
searx/static/themes/oscar/css/logicodev-dark.css
View file

@ -324,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;

2
searx/static/themes/oscar/css/logicodev-dark.min.css vendored
View file

File diff suppressed because one or more lines are too long

30
searx/static/themes/oscar/css/logicodev.css
View file

@ -297,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;

2
searx/static/themes/oscar/css/logicodev.min.css vendored
View file

File diff suppressed because one or more lines are too long

30
searx/static/themes/oscar/css/pointhi.css
View file

@ -173,6 +173,36 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
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;

2
searx/static/themes/oscar/css/pointhi.min.css vendored
View file

File diff suppressed because one or more lines are too long

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

4
searx/static/themes/oscar/js/searx.min.js vendored
View file

File diff suppressed because one or more lines are too long

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();
}
});
});

39
searx/static/themes/oscar/less/logicodev/infobox.less
View file

@ -45,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;
}
}

42
searx/static/themes/oscar/less/pointhi/infobox.less
View file

@ -1,5 +1,6 @@
.infobox {
img{
img {
max-height: 250px;
}
@ -19,4 +20,43 @@
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;
}
}

7
searx/templates/oscar/infobox.html
View file

@ -11,7 +11,8 @@
{% for u in infobox.urls %}{% if u.official %} <a class="header_url" href="{{ u.url }}">{{ u.url }}</a>{% endif %}{% endfor %}
</div>
</div>
<div class="panel-body">
<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 %}
@ -45,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>