tweak display of the compounds list again

flexboxes, flexboxes everywhere ;)


Former-commit-id: 84a5812af913d28e653097f43bb88fe0bfdfb6a5

ippisite/ippidb/templates/compound_list.html

@@ -91,9 +91,11 @@
 {% if compounds %}
     <div class="container-fluid">
     {% if display == 'v' %}
+        <div class="d-flex flex-wrap m-2 justify-content-around">
         {% for compound in compounds %}
             {% include "compound_v_item.html" with compound=compound %}
         {% endfor %}
+        </div>
     {% elif display == 'l'%}
         {% for compound in compounds %}
             {% include "compound_l_item.html" with compound=compound %}

ippisite/ippidb/templates/compound_v_item.html

-<div class="card m-2 border border-info" style="width: 300px">
+<div class="p-2">
+<div class="card border border-info">
         <a href="/compounds/{{ compound.id }}">{% include "pubchem_img.html" %}</a>
         <div class="card-body" style="overflow:hidden; word-wrap:break-word;">
             <span class="badge badge-dark"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span>
@@ -6,3 +7,4 @@
             <p>Molecular Weight: {{ compound.molecular_weight }} g/mol</p>
         </div>
 </div>
+</div>

ippisite/ippidb/templates/pubchem_img.html

-<img src="https://pubchem.ncbi.nlm.nih.gov/image/imagefly.cgi?cid={{ compound.pubchem_id }}&width=300&height=300" style="width:290px;height:290px;" onerror="this.src='/static/images/cross.svg';"/>
+<img src="https://pubchem.ncbi.nlm.nih.gov/image/imagefly.cgi?cid={{ compound.pubchem_id }}&width=300&height=300" onerror="this.src='/static/images/cross.svg'; this.style.width='300px';"/>