From 0601f2bb481758ed8e0e68f96a976063d9b229db Mon Sep 17 00:00:00 2001
From: Marc Abonce Seguin <marc-abonce@mailbox.org>
Date: Mon, 3 Aug 2020 00:15:54 -0700
Subject: [PATCH] add toggle to resize infobox

---
 .../themes/oscar/css/logicodev-dark.css       |  30 +++++++++++++
 .../themes/oscar/css/logicodev-dark.min.css   | Bin 14236 -> 14914 bytes
 searx/static/themes/oscar/css/logicodev.css   |  30 +++++++++++++
 .../static/themes/oscar/css/logicodev.min.css | Bin 10796 -> 11474 bytes
 searx/static/themes/oscar/css/pointhi.css     |  30 +++++++++++++
 searx/static/themes/oscar/css/pointhi.min.css | Bin 7196 -> 7874 bytes
 searx/static/themes/oscar/js/searx.js         |  11 +++++
 searx/static/themes/oscar/js/searx.min.js     | Bin 5367 -> 5636 bytes
 .../themes/oscar/js/searx_src/infobox.js      |  11 +++++
 .../themes/oscar/less/logicodev/infobox.less  |  39 ++++++++++++++++
 .../themes/oscar/less/pointhi/infobox.less    |  42 +++++++++++++++++-
 searx/templates/oscar/infobox.html            |   7 ++-
 12 files changed, 198 insertions(+), 2 deletions(-)
 create mode 100644 searx/static/themes/oscar/js/searx_src/infobox.js

diff --git a/searx/static/themes/oscar/css/logicodev-dark.css b/searx/static/themes/oscar/css/logicodev-dark.css
index 732b70e64..99e9c2a22 100644
--- a/searx/static/themes/oscar/css/logicodev-dark.css
+++ b/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;
diff --git a/searx/static/themes/oscar/css/logicodev-dark.min.css b/searx/static/themes/oscar/css/logicodev-dark.min.css
index bd5d00d0c7f13f5501a624f39c128a2d7b19d0e4..04c3561b9a0fdc4e1083fe2e2b16bffa051bfc0d 100644
GIT binary patch
delta 694
zcmb7?L2kk@5CGr6g)<i_aR_qNoAa2+ju+d)@kZ&E1V!K*>LYjr5<lQ&G@%e$l$72q
zSv#8XdXFbMe2#+k3zS$*=HG{eP-_QuX%!j%%Gfj}s3;Q7YR^;f1Vx;QLR%k6B*Kid
z&2_k=qz2OE7k7KTN+havorx+kV6`Fs##mm(0as8g9G2WzrN9rMc*_LUkM!ta0MHFy
z8XMct)+bI#aEZdw*UG-<POQ0fm@fZGyN7+`H`IVvXddaYtP|`({$=+pGW=*B5Pe+c
d#Af=o-CPv(Oz-d9*`=@f9R0jD_P863U(U8t5UT(H

delta 12
TcmX?9GADmShu~&C5fL>2CVm9E

diff --git a/searx/static/themes/oscar/css/logicodev.css b/searx/static/themes/oscar/css/logicodev.css
index 00dfe3e97..5d0a223a6 100644
--- a/searx/static/themes/oscar/css/logicodev.css
+++ b/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;
diff --git a/searx/static/themes/oscar/css/logicodev.min.css b/searx/static/themes/oscar/css/logicodev.min.css
index c1f03d8a23848a9a0ed1289e77ad581621e8a989..8c2bcdc5b40d425b8380ca02e0823cce5450c9d3 100644
GIT binary patch
delta 564
zcmb7=O=`kG6vxldbkVJwE+ZoriW3U<4&Attnap!$a568%R}%?%39sQo=n2Fd^eUzM
z`oRQ(2I=lC-tYgl{rH~jexuDHdKeOF?Vv8LBEtuaJtqVe#ll(bc?zDONHS4q>tl&T
zm~pn*M~|<mfpjjhTKBD=;qjPCRI54@Rcyd&Lwv|sUM0AMV&<^q#wrE=#P$Qr&j+Y(
z4UZm9$mO$TcM0BW?46L{rV2}6E4#>@SaInvop+?Yjeq719IVIPY42(@0p9;B(&`bS
gyabi@U_G1ZW`<l8bk*T4fVUU#7C0C9`iVwQe@M>VX8-^I

delta 16
YcmcZ<xh7=8SE0$u5`vr8h^mPL070+@a{vGU

diff --git a/searx/static/themes/oscar/css/pointhi.css b/searx/static/themes/oscar/css/pointhi.css
index 073d2c4f0..4cfecb70a 100644
--- a/searx/static/themes/oscar/css/pointhi.css
+++ b/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;
diff --git a/searx/static/themes/oscar/css/pointhi.min.css b/searx/static/themes/oscar/css/pointhi.min.css
index f6cc3d8d841ae45e0176b29702e3138d6f62fb60..fae65aaf4771dda17f0843a7c532aa0ef844d785 100644
GIT binary patch
delta 652
zcmbPZamaQ<I+s#rURr)qeuaV_lo4N&pPrtRT3w!*Qj%e1Xkef^*^N)J-k=ty0HHED
zBQ-f2sJ9L#6`z!!QdymwSfQJdnwg$aVr6V#P*7o=UzS>wmXlv@m64f}lA4FdBrC9y
zsVNvH*29g=%g;;2V*)}a#2*OP<|HPi=ESGum*-WdWEL0XBvx7_<>V)46J=OEcGF4=
z;ARnU7pBh$nuzSWdgK^_g*&lkqWGDBI}zaric5ve+;ni{MgXHZz96xvgna*^m<Km*
Ja|G8BK>%=+|6u?C

delta 12
TcmX?PJI7)}I@e}i-mQWFA+-dE

diff --git a/searx/static/themes/oscar/js/searx.js b/searx/static/themes/oscar/js/searx.js
index 040d57bb1..543c7775c 100644
--- a/searx/static/themes/oscar/js/searx.js
+++ b/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
diff --git a/searx/static/themes/oscar/js/searx.min.js b/searx/static/themes/oscar/js/searx.min.js
index a6ba8b336b28ba8f93cbe3f6579cfcc844def431..e2d751a19608e464a8deca7bd7d792271560c38f 100644
GIT binary patch
delta 237
zcmeya*`hN+QqRyp*T6#8$iT=zp++I2q@<wON?$)cvm~Q5NiR7+S3j{hIWsdiKVQE%
zHL<8-quMS`mdw1g{K<(TVw1PA@ztkg=A~#T>4C(O@+;z#@>436G_4c$3X1XzG?a>y
zi}G`FJW?~$GfI>+wG;Iq$}@A*;W`Qui-1yk8DKRUnl`qHddbDb8cMl|6}k{XplnfU
zK~7?Fs)kZQg_4evlBSxPibhFBX0fIm)I_*(CHd*;IjJB6GgDGECW)wRzRxMa4FEz)
BPb~ld

delta 29
kcmZqC`K~!ZlGngY*T7uY$iT=zp+;e&`!3GSZ@I*|0fL_hwEzGB

diff --git a/searx/static/themes/oscar/js/searx_src/infobox.js b/searx/static/themes/oscar/js/searx_src/infobox.js
new file mode 100644
index 000000000..0c80bf37b
--- /dev/null
+++ b/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();
+        }
+    });
+});
diff --git a/searx/static/themes/oscar/less/logicodev/infobox.less b/searx/static/themes/oscar/less/logicodev/infobox.less
index 08a1d326e..e3582dffc 100644
--- a/searx/static/themes/oscar/less/logicodev/infobox.less
+++ b/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;
+    }
 }
diff --git a/searx/static/themes/oscar/less/pointhi/infobox.less b/searx/static/themes/oscar/less/pointhi/infobox.less
index 226941706..e6a55e944 100644
--- a/searx/static/themes/oscar/less/pointhi/infobox.less
+++ b/searx/static/themes/oscar/less/pointhi/infobox.less
@@ -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;
+    }
 }
diff --git a/searx/templates/oscar/infobox.html b/searx/templates/oscar/infobox.html
index 0c7a2e0a0..5ba4aa5f0 100644
--- a/searx/templates/oscar/infobox.html
+++ b/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>