add toggle to resize infobox

2 files changed, 80 insertions, 1 deletions

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