[fix] apply changes in infobox's styles

Browse Source 
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.
This commit is contained in:
a01200356 2016-02-27 19:19:04 -06:00
parent 78d3f3d6b1
commit 4267b11a45
6 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
searx/static/themes/default/css/style.css
View File

File diff suppressed because one or more lines are too long

5
searx/static/themes/default/less/style.less
View File

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

BIN
searx/static/themes/oscar/css/oscar.min.css vendored
View File

Binary file not shown.

3
searx/static/themes/oscar/less/oscar/infobox.less
View File

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

9
searx/templates/default/infobox.html
View File

@ -7,7 +7,14 @@
<div class="attributes"> <div class="attributes">
<table> <table>
{% for attribute in infobox.attributes %} {% 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 %} {% endfor %}
</table> </table>
</div> </div>

6
searx/templates/oscar/infobox.html
View File

@ -1,6 +1,6 @@
<div class="panel panel-default infobox"> <div class="panel panel-default infobox">
<div class="panel-heading"> <div class="panel-heading">
<h4 class="panel-title">{{ infobox.infobox }}</h4> <h4 class="panel-title infobox_part">{{ infobox.infobox }}</h4>
</div> </div>
<div class="panel-body"> <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 %} {% 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 %} {% for attribute in infobox.attributes %}
<tr> <tr>
<td>{{ attribute.label }}</td> <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> <td>{{ attribute.value }}</td>
{% endif %}
</tr> </tr>
{% endfor %} {% endfor %}
</table> </table>