add toggle to resize infobox

searx/static/themes/oscar/css/logicodev-dark.css

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

searx/static/themes/oscar/css/logicodev.css

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

searx/static/themes/oscar/css/pointhi.css

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

searx/static/themes/oscar/js/searx.js

@@ -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

searx/static/themes/oscar/js/searx_src/infobox.js

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

searx/static/themes/oscar/less/logicodev/infobox.less

@@ -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;
+    }
 }

searx/static/themes/oscar/less/pointhi/infobox.less

@@ -1,4 +1,5 @@
 .infobox {
+
     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;
+    }
 }

searx/templates/oscar/infobox.html

@@ -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>