add common name and improve id display in compounds list

cf #43


Former-commit-id: c473e21070a65337d1026d6c6ec5b70530cd155a

ippisite/ippidb/templates/compound_l_item.html

 <div class="row m-2 border border-info bg-light">
   <div class="col-sm-3 border-info d-flex justify-content-center align-content-center">
     <a href="/compounds/{{ compound.id }}">{% include "pubchem_img.html" %}</a>
+    <h2 class="position-absolute" style="top:0.3em; left:0.3em;"><span class="badge badge-dark"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span></h2>
   </div>
   <div class="col-sm-9">
-    <span class="badge badge-dark"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span>{%if compound.common_name %}<span>Common name: {{ compound.common_name }}</span>{% endif %}
     <ul class="list-group">
+      {% if compound.common_name %}
+      <li class="list-group-item">Common name: {{ compound.common_name }}</li>
+      {% endif %}
       {% if compound.canonical_smile %}
       <li class="list-group-item">Canonical SMILES: {{ compound.canonical_smile }}</li>
       {% endif %}

ippisite/ippidb/templates/compound_v_item.html

 <div class="p-2">
-<div class="card border border-info">
+    <div class="card border border-info">
         <a href="/compounds/{{ compound.id }}">{% include "pubchem_img.html" %}</a>
+        <h2 class="position-absolute" style="top:0.3em; left:0.3em;"><span class="badge badge-dark"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span></h2>
         <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>
+            {%if compound.common_name %}<p class="ml-2">{{ compound.common_name }}</p>{% endif %}
             <p>{{ compound.best_pXC50_activity_ppi_family }}</p>
             <p>Molecular Weight: {{ compound.molecular_weight }} g/mol</p>
         </div>
-</div>
+    </div>
 </div>