display external DB IDs in Compound Card

and minor layout corrections
FIX #236

ippisite/ippidb/templates/compound_db_links.html

@@ -2,32 +2,42 @@
 <table class="table mb-0">
   <tbody>
     <tr class="row">
-      <td scope="col" class="col-2">
+      <td scope="col" class="col-2 text-center">
         {% if compound.pubchem_id %}
-        <a href="https://pubchem.ncbi.nlm.nih.gov/compound/{{ compound.pubchem_id }}" target="_blank"><img src="/static/images/Other/Pubchemlogo.png" style="height: 1.5em;" title="PubChem ID: {{ compound.pubchem_id }}" /></a>
+        <a href="https://pubchem.ncbi.nlm.nih.gov/compound/{{ compound.pubchem_id }}" target="_blank"><img
+            src="/static/images/Other/Pubchemlogo.png" style="height: 1.5em;"
+            title="PubChem ID: {{ compound.pubchem_id }}" /><br />{{ compound.pubchem_id }}</a>
         {% endif %}
       </td>
-      <td scope="col" class="col-2">
+      <td scope="col" class="col-2 text-center">
         {% if compound.chembl_id %}
-        <a href="https://www.ebi.ac.uk/chembldb/compound/inspect/{{ compound.chembl_id }}" target="_blank"><img src="/static/images/Other/Chembl_logo.png" style="height: 1.5em;" title="ChEMBL ID: {{ compound.pubchem_id }}" /></a>
+        <a href="https://www.ebi.ac.uk/chembldb/compound/inspect/{{ compound.chembl_id }}" target="_blank"><img
+            src="/static/images/Other/Chembl_logo.png" style="height: 1.5em;"
+            title="ChEMBL ID: {{ compound.chembl_id }}" /><br />{{ compound.chembl_id }}</a>
         {% endif %}
       </td>
-      <td scope="col" class="col-2">
+      <td scope="col" class="col-2 text-center">
         {% if compound.chemspider_id %}
-        <a href="http://www.chemspider.com/Chemical-Structure.{{ compound.chemspider_id}}.html" target="_blank"><img src="/static/images/Other/ChemSpider_Logo.png" style="height: 1.5em;" title="ChemSpider ID: {{ compound.chemspider_id }}" /></a>
+        <a href="http://www.chemspider.com/Chemical-Structure.{{ compound.chemspider_id}}.html" target="_blank"><img
+            src="/static/images/Other/ChemSpider_Logo.png" style="height: 1.5em;"
+            title="ChemSpider ID: {{ compound.chemspider_id }}" /><br />{{ compound.chemspider_id }}</a>
         {% endif %}
       </td>
-      <td scope="col" class="col-2">
+      <td scope="col" class="col-2 text-center">
         {% if compound.ligand_id %}
-        <a href="https://www.rcsb.org/ligand/{{ compound.ligand_id}}" target="_blank"><img src="/static/images/Other/PDBLogo.ico" style="height: 1.5em;" title="PDB Ligand ID: {{ compound.ligand_id }}" /></a>
+        <a href="https://www.rcsb.org/ligand/{{ compound.ligand_id}}" target="_blank"><img
+            src="/static/images/Other/PDBLogo.ico" style="height: 1.5em;"
+            title="PDB Ligand ID: {{ compound.ligand_id }}" /><br />{{ compound.ligand_id }}</a>
         {% endif %}
       </td>
-      <td scope="col" class="col-2">
+      <td scope="col" class="col-2 text-center">
         {% if compound.drugbank_id %}
-        <a href="https://www.drugbank.ca/drugs/{{ compound.drugbank_id}}" target="_blank"><img src="/static/images/Other/DrugBankLogo.ico" style="height: 1.5em;" title="DrugBank ID: {{ compound.drugbank_id }}" /></a>
+        <a href="https://www.drugbank.ca/drugs/{{ compound.drugbank_id}}" target="_blank"><img
+            src="/static/images/Other/DrugBankLogo.ico" style="height: 1.5em;"
+            title="DrugBank ID: {{ compound.drugbank_id }}" /><br />{{ compound.drugbank_id }}</a>
         {% endif %}
       </td>
     </tr>
   </tbody>
 </table>
-{% endif %}
+{% endif %}
\ No newline at end of file

ippisite/ippidb/templates/compound_dbsearch_links.html

 <table class="table mb-0">
   <tbody>
     <tr class="row">
-      <td scope="col" class="col-2">
+      <td scope="col" class="col-2 text-center">
         <a href="https://www.ncbi.nlm.nih.gov/pccompound?term={{ compound.inchikey }}" target="_blank"><img src="/static/images/Other/Pubchemlogo.png" style="height: 1.5em;" title="search INCHIKEY on PubChem" /></a>
       </td>
-      <td scope="col" class="col-2">
+      <td scope="col" class="col-2 text-center">
         <a href="https://chem.nlm.nih.gov/chemidplus/inchikey/{{ compound.inchikey }}" target="_blank"><img src="/static/images/Other/chemidplus_logo.png" style="height: 1.5em;" title="search INCHIKEY on ChemID plus" /></a>
       </td>
-      <td scope="col" class="col-2">
+      <td scope="col" class="col-2 text-center">
           <a href=" https://www.ebi.ac.uk/chembl/beta/g/#search_results/all/query={{ compound.inchikey }}" target="_blank"><img src="/static/images/Other/Chembl_logo.png" style="height: 1.5em;" title="search INCHIKEY on ChEMBL" /></a>
       </td>
-      <td scope="col" class="col-2">
+      <td scope="col" class="col-2 text-center">
           <a href="http://www.chemspider.com/Search.aspx?q={{ compound.inchikey }}" target="_blank"><img src="/static/images/Other/ChemSpider_Logo.png" style="height: 1.5em;" title="search INCHIKEY on ChemSpider" /></a>
       </td>
-      <td scope="col" class="col-2">
+      <td scope="col" class="col-2 text-center">
           <a href="http://www.chemsynthesis.com/text-search/search.php?mode=searchform&field=inchikey&searchtext={{ compound.inchikey }}" target="_blank"><img src="/static/images/Other/chemsynthesis_logo.png" style="height: 1.5em;" title="search INCHIKEY on ChemSpider" /></a>
       </td>
     </tr>