Switch to bootstrap cards for catalog page

This commit is contained in:
Edward Betts 2019-10-10 21:00:13 +01:00
parent e2c78d813d
commit 1ef188fa06
2 changed files with 45 additions and 34 deletions

10
app.py
View file

@ -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]

View file

@ -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 %}