From 1ef188fa06e4ee05c3cac6d2da48def5908c7200 Mon Sep 17 00:00:00 2001
From: Edward Betts <edward@4angle.com>
Date: Thu, 10 Oct 2019 21:00:13 +0100
Subject: [PATCH] Switch to bootstrap cards for catalog page

---
 app.py                 | 10 +++++-
 templates/catalog.html | 69 ++++++++++++++++++++++--------------------
 2 files changed, 45 insertions(+), 34 deletions(-)

diff --git a/app.py b/app.py
index 9c4022d..5071583 100755
--- a/app.py
+++ b/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]
diff --git a/templates/catalog.html b/templates/catalog.html
index 1b35e03..5b55e59 100644
--- a/templates/catalog.html
+++ b/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 %}