Merge pull request #2131 from MarcAbonce/infobox_style

Make infobox shorter by default and add an expand toggle

3 files changed, 111 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;
+    }
 }
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;
+    }
 }
diff --git a/searx/static/themes/oscar/less/pointhi/search.less b/searx/static/themes/oscar/less/pointhi/search.less
index 5ff73360a..ac0a7a0c7 100644
--- a/searx/static/themes/oscar/less/pointhi/search.less
+++ b/searx/static/themes/oscar/less/pointhi/search.less
@@ -31,3 +31,13 @@
         background-color: #EEE;
     }
 }
+
+.visually-hidden {
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px, 1px, 1px, 1px);
+    white-space: nowrap; /* added line */
+}