display compounds list as a grid of vignettes

Former-commit-id: 495e7ad856b90ef7d40ad1fa5bb279346a8a818a

ippisite/ippidb/static/images/cross.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="Layer_1" width="15" height="15" viewBox="0 0 15.001 14.999" overflow="visible" xml:space="preserve" sodipodi:version="0.32" inkscape:version="0.43" sodipodi:docname="AS-skrzyzowanie.svg" sodipodi:docbase="C:\Documents and Settings\Michał\Pulpit\drogi"><metadata id="metadata12"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs10"/><sodipodi:namedview inkscape:window-height="721" inkscape:window-width="995" inkscape:pageshadow="2" inkscape:pageopacity="0.0" borderopacity="1.0" bordercolor="#666666" pagecolor="#ffffff" id="base" inkscape:zoom="37" inkscape:cx="7.5" inkscape:cy="7.5" inkscape:window-x="25" inkscape:window-y="-4" inkscape:current-layer="Layer_1" showguides="true" inkscape:guide-bbox="true" inkscape:guide-points="true"/>
+<g id="g1332" style="fill:#000000;fill-opacity:1;stroke:none" transform="matrix(0.260054,0,0,0.260054,1.040286,10.10348)"/>
+<path style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 11.374823,1.1413564 L 13.849862,3.6163952 L 9.9605151,7.5057412 L 13.849862,11.395089 L 11.374823,13.870128 L 7.4854771,9.9807801 L 3.5961301,13.870128 L 1.1210911,11.395089 L 5.0104381,7.5057412 L 1.1210911,3.6163952 L 3.5961301,1.1413564 L 7.4854761,5.0307032 L 11.374823,1.1413564 z " id="path2224" sodipodi:nodetypes="ccccccccccccc"/></svg>
\ No newline at end of file

ippisite/ippidb/templates/base.html

@@ -10,6 +10,7 @@
         <script src="/static/jquery/jquery-3.3.1.min.js"></script>
         <script src="/static/popper/popper.min.js"></script>
         <script src="/static/bootstrap/js/bootstrap.min.js"></script>
+        <script src="/static/holder/holder.min.js"></script>
         <script defer src="/static/font-awesome/js/fontawesome-all.min.js"></script>
         <script type="text/javascript" src="/static/Kekule.js-master/release/kekule.js?modules=chemWidget,openbabel,indigo"></script>
 

ippisite/ippidb/templates/compound_grid_item.html

+<div class="card m-2 border border-info" style="width: 300px">
+        <a href="/compound/{{ compound.id }}">{% include "pubchem_img.html" %}</a>
+        <div class="card-body" style="overflow:hidden; word-wrap:break-word;">
+            {% if compound.common_name %}
+            <p class="card-text">Common name: {{ compound.common_name }}</p>
+            {% endif %}
+            {% if compound.canonical_smile %}
+            <p class="card-text">Canonical SMILES: {{ compound.canonical_smile }}</p>
+            {% endif %}
+            {% if compound.iupac_name %}
+            <p class="card-text">IUPAC name: {{ compound.iupac_name }}</p>
+            {% endif %}
+        </div>
+</div>
+<!--
+<div class="col-md-4 border border-info bg-light">
+  <div class="row border-info d-flex justify-content-center align-content-center">
+    <a href="/compound/{{ compound.id }}">{% include "pubchem_img.html" %}</a>
+  </div>
+  <div class="row">
+    <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 %}
+      {% if compound.iupac_name %}
+      <li class="list-group-item">IUPAC name: {{ compound.iupac_name }}</li>
+      {% endif %}
+    </ul>
+  </div>
+</div>
+-->

ippisite/ippidb/templates/compound_list.html

@@ -67,9 +67,17 @@
         </div>
     </form>
 {% if compounds %}
-    {% for compound in compounds %}
-        {% include "compound_abstract.html" with compound=compound %}
-    {% endfor %}
+    {% if display_table %}
+        {% for compound in compounds %}
+            {% include "compound_table_item.html" with compound=compound %}
+        {% endfor %}
+    {% else %}
+    <div class="row">
+        {% for compound in compounds %}
+            {% include "compound_grid_item.html" with compound=compound %}
+        {% endfor %}
+    </div>
+    {% endif %}
 {% else %}
     <p>Nothing found there!</p>
 {% endif %}					

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:300px;height:300px;"/>
+<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';"/>

ippisite/ippidb/views.py

@@ -200,7 +200,7 @@ def compound_list(request):
         boundcomplexes = boundcomplexes[:5]
     count = compounds.count()
     # handle pagination in compounds list
-    paginator = Paginator(compounds, 5)
+    paginator = Paginator(compounds, 12)
     page = request.GET.get('page')
     try:
         compounds = paginator.page(page)