modify display of chemistry rules in compound list view

related also to #251

ippisite/ippidb/templates/compound_l_item.html

@@ -2,19 +2,35 @@
 
 <div class="row m-2 border border-info bg-light border_card" style="box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);">
   {%if show_detail != True %}
-  <div class="col-sm-3 border-info d-flex justify-content-center align-content-center {% if compound.replaced_with or compound.is_validated is False %}bg_warning{% endif %}">
-    <a style="overflow: hidden;" href="/compounds/{{ compound.id }}">{% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile %}</a>
-    <h2 class="position-absolute" style="top:0.3em; left:0.3em;"><span class="badge badge-light"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span>{% if compound.replaced_with is not None %}
-      <span style="font-size: 26px; color:#fa8005; font-size: 75%;">replaced with <a href="/compounds/{{ compound.replaced_with.id }}">{{ compound.replaced_with.id }}</a></span>{% elif compound.is_validated is False %}<span
-          style="font-size: 26px; color:#fa8005;">not validated</span>{% endif %}</h2>
-    {% if compound.tanimoto != None %}
-    <h2 class="position-absolute" style="top:0.3em; right:0.3em;" title="tanimoto similarity value"><span class="badge badge-light text-warning">{{ compound.tanimoto }}</span></h2>
-    {% endif %}
-    <h2 class="position-absolute" style="top:270px; left:0.3em;"><span class="badge badge-light">
-      {% rule_status_icon compound.lipinsky "Lipinski's RO5" %}
-      {% rule_status_icon compound.veber "Veber" %}
-      {% rule_status_icon compound.pfizer "Pfizer" %}
-    </h2>
+  <div class="col-sm-3 border-info justify-content-center align-content-center {% if compound.replaced_with or compound.is_validated is False %}bg_warning{% endif %}">
+    <div class="row">
+      <a style="overflow: hidden;" href="/compounds/{{ compound.id }}">{% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile %}</a>
+      <h2 class="position-absolute" style="top:0.3em; left:0.3em;"><span class="badge badge-light"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span>{% if compound.replaced_with is not None %}
+        <span style="font-size: 26px; color:#fa8005; font-size: 75%;">replaced with <a href="/compounds/{{ compound.replaced_with.id }}">{{ compound.replaced_with.id }}</a></span>{% elif compound.is_validated is False %}<span
+            style="font-size: 26px; color:#fa8005;">not validated</span>{% endif %}</h2>
+      {% if compound.tanimoto != None %}
+      <h2 class="position-absolute" style="top:0.3em; right:0.3em;" title="tanimoto similarity value"><span class="badge badge-light text-warning">{{ compound.tanimoto }}</span></h2>
+      {% endif %}
+    </div>
+    <h4 class="pt-2 compound_list_title">Chemistry rules</h4>
+    <div class="row">
+      <table class="table table-sm col-sm-12 col-md-6 card_border m-1" style="text-align: center;">
+        <thead>
+          <tr>
+            <th scope="col" class="card_title col_width">Lipinski's RO5</th>
+            <th scope="col" class="card_title col_width">Veber</th>
+            <th scope="col" class="card_title col_width">Pfizer's 3/75</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>{% rule_status_icon compound.lipinsky "Lipinski's RO5" %}</td>
+            <td>{% rule_status_icon compound.veber "Veber" %}</td>
+            <td>{% rule_status_icon compound.pfizer "Pfizer" %}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
   {% endif %}
   <div class="{%if show_detail != True %}col-sm-9{% else %}col-sm-12{% endif %}">