[fix] apply changes in infobox's styles

changes were made for wolframalpha infobox:

    - wrap text inside infobox.
      for example, there's a hill in New Zealand called
      Taumatawhakatangihangakoauauotamateapokaiwhenuakitanatahu
      (don't blame me, blame the Kiwis)
      and now it doesn't break the infobox.

    - add an optional image field for infobox's attributes.
      (doesn't affect ddg infobox at all)

    - table is now always split in half.
      needed so that images stay inside infobox.
      (max-width doesn't work for inline elements, it's the table
      that has to set the width.

if you don't like how the table width looks now in ddg/wiki's infobox,
i can change that code so that the style only applies when using
wolframalpha.

searx/static/themes/default/less/style.less

@@ -476,6 +476,7 @@ color: @color-font-light;
 	   margin: 0px 2px 5px 5px;
 	   padding: 0px 2px 2px;
 	   max-width: 21em;
+       word-wrap: break-word;
 
 	   .infobox {
 	   	    margin: 10px 0 10px;
@@ -485,7 +486,7 @@ color: @color-font-light;
                     /* box-shadow: 0px 0px 5px #CCC; */
 
 	   	    img {
-		    	max-width: 20em;
+		    	max-width: 90%;
 			max-heigt: 12em;
 			display: block;
 			margin: 5px;
@@ -497,7 +498,7 @@ color: @color-font-light;
 		    }
 
 		    table {
-		    	  width: auto;
+                  table-layout: fixed;
 
 			  td {
 		       	     vertical-align: top;

searx/static/themes/oscar/css/oscar.min.css

@@ -17,7 +17,7 @@ input[type=checkbox]:not(:checked)+.label_hide_if_not_checked,input[type=checkbo
 .result_download{margin-right:5px}
 #pagination{margin-top:30px;padding-bottom:50px}
 .label-default{color:#aaa;background:#fff}
-.infobox .infobox_part{margin-bottom:20px;word-wrap:break-word}
+.infobox .infobox_part{margin-bottom:20px;word-wrap:break-word;table-layout:fixed}
 .infobox .infobox_part:last-child{margin-bottom:0}
 .search_categories{margin:10px 0;text-transform:capitalize}
 .cursor-text{cursor:text !important}

searx/static/themes/oscar/less/oscar/infobox.less

@@ -2,6 +2,7 @@
     .infobox_part {
         margin-bottom: 20px;
         word-wrap: break-word;
+        table-layout: fixed;
     }
     
     .infobox_part:last-child {

searx/templates/default/infobox.html

@@ -7,7 +7,14 @@
     <div class="attributes">
         <table>
             {% for attribute in infobox.attributes %}
-            <tr><td>{{ attribute.label }}</td><td>{{ attribute.value }}</td></tr>
+            <tr>
+                <td>{{ attribute.label }}</td>
+                {% if attribute.image %}
+                <td><img src="{{ image_proxify(attribute.image.src) }}" alt="{{ attribute.image.alt }}" /></td>
+                {% else %}
+                <td>{{ attribute.value }}</td>
+                {% endif %}
+            </tr>
             {% endfor %}
         </table>
     </div>

searx/templates/oscar/infobox.html

@@ -1,6 +1,6 @@
 <div class="panel panel-default infobox">
     <div class="panel-heading">
-        <h4 class="panel-title">{{ infobox.infobox }}</h4>
+        <h4 class="panel-title infobox_part">{{ infobox.infobox }}</h4>
     </div>
     <div class="panel-body">
         {% if infobox.img_src %}<img class="img-responsive center-block infobox_part" src="{{ image_proxify(infobox.img_src) }}" alt="{{ infobox.infobox }}" />{% endif %}
@@ -11,7 +11,11 @@
             {% for attribute in infobox.attributes %}
             <tr>
                 <td>{{ attribute.label }}</td>
+                {% if attribute.image %}
+                <td><img class="img-responsive" src="{{ image_proxify(attribute.image.src) }}" alt="{{ attribute.image.alt }}" /></td>
+                {% else %}
                 <td>{{ attribute.value }}</td>
+                {% endif %}
             </tr>
             {% endfor %}
         </table>