Merge pull request #2131 from MarcAbonce/infobox_style

Make infobox shorter by default and add an expand toggle

1 files changed, 50 insertions, 0 deletions

diff --git a/searx/static/themes/oscar/less/logicodev/infobox.less b/searx/static/themes/oscar/less/logicodev/infobox.less
index 86b8afb11..e3582dffc 100644
--- a/searx/static/themes/oscar/less/logicodev/infobox.less
+++ b/searx/static/themes/oscar/less/logicodev/infobox.less
@@ -8,12 +8,23 @@
         }
     }
 
+    .header_url {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+    }
+
 
     p{
         font-family: "DejaVu Serif", Georgia, Cambria, "Times New Roman", Times, serif !important;
         font-style: italic;
     }
 
+    img{
+        max-height: "250px";
+    }
+
     .btn{
         background-color: @dark-blue;
         border: none;
@@ -34,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;
+    }
 }