Switch to bootstrap cards for catalog page

app.py

@@ -180,6 +180,9 @@ def property_query_page(property_id):
 @app.route('/')
 def start():
     return random_painting()
+    username = wikidata_oauth.get_username()
+    username = None
+    return render_template('start.html', username=username)
 
 @app.route('/next')
 def random_painting():
@@ -613,10 +616,15 @@ def catalog_page():
         item['url'] = url_for('item_page', item_id=item['item_id'])
         item['image'] = detail[item['image_filename']]
 
+    item_labels = get_labels(qid for pid, qid in params)
+    title = ' / '.join(find_more_props[pid] + ': ' + item_labels[qid]
+                       for pid, qid in params)
+
     return render_template('catalog.html',
                            labels=find_more_props,
                            items=items,
-                           other=other)
+                           other=other,
+                           title=title)
 
 def get_image_detail_with_cache(items, cache_name, thumbwidth=None):
     filenames = [cur['image_filename'] for cur in items]

templates/catalog.html

@@ -1,42 +1,45 @@
 {% extends "base.html" %}
 
-{% block style %}
-<style>
-td { vertical-align: top; }
-</style>
-{% endblock %}
+{% block title %}{{ title }}{% endblock %}
 
 {% block content %}
 <div class="p-2">
-  <table>
-    {% for item in items %}
-    <tr>
-      <td>
-        <img src="{{ item.image.thumburl }}">
-      </td>
-      <td>
-        <p>{{ item.label }}</p>
+  <h1>{{ self.title() }}</h1>
+  {% for item in items %}
+  <div class="card mb-3">
+    <div class="row no-gutters">
+      <div class="col-md-3">
+        <img src="{{ item.image.thumburl }}" class="card-img">
+      </div>
+      <div class="col-md-9">
+        <div class="card-body">
+          <h5 class="card-title">{{ item.label }}</h5>
 
-        {% for key, prop_label in labels.items() %}
-          {% set claims = item.entity['claims'][key] %}
-          {% if claims %}
-            <div>
-            <strong>{{ prop_label }}</strong>:
-            {% for claim in claims %}
-              {% if 'datavalue' in claim.mainsnak %}
-                {% set claim_qid = claim.mainsnak.datavalue.value.id %}
-                <a href="https://www.wikidata.org/wiki/{{ claim_qid }}">{{ other[claim_qid] or '[ label missing ]' }}</a> ({{ claim_qid }})
-              {% else %}
-                <i>no value</i>
-              {% endif %}
-            {% endfor %}
-            </div>
-          {% endif %}
-        {% endfor %}
-      </td>
-    </tr>
-    {% endfor %}
-  </table>
+            <p>
+            <a href="https://www.wikidata.org/wiki/{{ item.qid }}" class="btn btn-primary">view on Wikidata</a>
+            </p>
+
+          {% for key, prop_label in labels.items() %}
+            {% set claims = item.entity['claims'][key] %}
+            {% if claims %}
+              <div>
+              <strong>{{ prop_label }}</strong>:
+              {% for claim in claims %}
+                {% if 'datavalue' in claim.mainsnak %}
+                  {% set claim_qid = claim.mainsnak.datavalue.value.id %}
+                  <a href="https://www.wikidata.org/wiki/{{ claim_qid }}">{{ other[claim_qid] or '[ label missing ]' }}</a> ({{ claim_qid }})
+                {% else %}
+                  <i>no value</i>
+                {% endif %}
+              {% endfor %}
+              </div>
+            {% endif %}
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
 </div>
 
 {% endblock %}