Merge pull request #2131 from MarcAbonce/infobox_style

Make infobox shorter by default and add an expand toggle

searx/results.py

@@ -60,6 +60,8 @@ def merge_two_infoboxes(infobox1, infobox2):
     if weight2 > weight1:
         infobox1['engine'] = infobox2['engine']
 
+    infobox1['engines'] |= infobox2['engines']
+
     if 'urls' in infobox2:
         urls1 = infobox1.get('urls', None)
         if urls1 is None:
@@ -189,6 +191,7 @@ class ResultContainer(object):
     def _merge_infobox(self, infobox):
         add_infobox = True
         infobox_id = infobox.get('id', None)
+        infobox['engines'] = set([infobox['engine']])
         if infobox_id is not None:
             parsed_url_infobox_id = urlparse(infobox_id)
             for existingIndex in self.infoboxes:

searx/static/themes/oscar/css/logicodev-dark.css

@@ -295,10 +295,19 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
 .infobox .panel-heading .panel-title {
   font-weight: 700;
 }
+.infobox .header_url {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
 .infobox p {
   font-family: "DejaVu Serif", Georgia, Cambria, "Times New Roman", Times, serif !important;
   font-style: italic;
 }
+.infobox img {
+  max-height: "250px";
+}
 .infobox .btn {
   background-color: #007ab8;
   border: none;
@@ -315,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;

searx/static/themes/oscar/css/logicodev.css

@@ -268,10 +268,19 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
 .infobox .panel-heading .panel-title {
   font-weight: 700;
 }
+.infobox .header_url {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
 .infobox p {
   font-family: "DejaVu Serif", Georgia, Cambria, "Times New Roman", Times, serif !important;
   font-style: italic;
 }
+.infobox img {
+  max-height: "250px";
+}
 .infobox .btn {
   background-color: #007ab8;
   border: none;
@@ -288,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;

searx/static/themes/oscar/css/pointhi.css

@@ -156,6 +156,9 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
   outline: 0 none;
   position: relative;
 }
+.infobox img {
+  max-height: 250px;
+}
 .infobox .infobox_part {
   margin-bottom: 20px;
   word-wrap: break-word;
@@ -164,6 +167,42 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
 .infobox .infobox_part:last-child {
   margin-bottom: 0;
 }
+.infobox .header_url {
+  white-space: nowrap;
+  overflow: hidden;
+  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;
@@ -202,6 +241,17 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
   font-weight: bold;
   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 */
+}
 #advanced-search-container {
   display: none;
   text-align: center;

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

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

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

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

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 */
+}

searx/templates/oscar/infobox.html

@@ -1,10 +1,18 @@
 {% from 'oscar/macros.html' import result_link with context %}
 <div class="panel panel-default infobox">
     <div class="panel-heading">{{- "" -}}
-        <h4 class="panel-title infobox_part"><bdi>{{ infobox.infobox }}</bdi></h4>{{- "" -}}
-        {% for u in infobox.urls %}{% if u.official %} <a href="{{ u.url }}">{{ u.domain }}</a>{% endif %}{% endfor %}
+        <div class="infobox_part">
+            <div class="{% if not rtl %}pull-right{% endif %}">
+            {% for engine in infobox.engines %}
+                <span class="label label-default">{{ engine }}</span>
+            {% endfor %}
             </div>
-    <div class="panel-body">
+            <h4 class="panel-title"><bdi>{{ infobox.infobox }}</bdi></h4>{{- "" -}}
+            {% for u in infobox.urls %}{% if u.official %} <a class="header_url" href="{{ u.url }}">{{ u.url }}</a>{% endif %}{% endfor %}
+        </div>
+    </div>
+    <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 %}
@@ -38,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>