Merge pull request #2131 from MarcAbonce/infobox_style

Make infobox shorter by default and add an expand toggle

1 files changed, 51 insertions, 0 deletions

diff --git a/searx/static/themes/oscar/less/pointhi/infobox.less b/searx/static/themes/oscar/less/pointhi/infobox.less
index df51b002e..e6a55e944 100644
--- a/searx/static/themes/oscar/less/pointhi/infobox.less
+++ b/searx/static/themes/oscar/less/pointhi/infobox.less
@@ -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;
+    }
 }