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,21 +1,23 @@
 {% extends "base.html" %}
 
-{% block style %}
-<style>
-td { vertical-align: top; }
-</style>
-{% endblock %}
+{% block title %}{{ title }}{% endblock %}
 
 {% block content %}
 <div class="p-2">
-  <table>
+  <h1>{{ self.title() }}</h1>
   {% for item in items %}
-    <tr>
-      <td>
-        <img src="{{ item.image.thumburl }}">
-      </td>
-      <td>
-        <p>{{ item.label }}</p>
+  <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>
+
+            <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] %}
@@ -33,10 +35,11 @@ td { vertical-align: top; }
               </div>
             {% endif %}
           {% endfor %}
-      </td>
-    </tr>
+        </div>
+      </div>
+    </div>
+  </div>
   {% endfor %}
-  </table>
 </div>
 
 {% endblock %}