Masonry didn't work very well, use Bootstrap grid instead

This commit is contained in:
Edward Betts 2023-11-09 10:33:29 +01:00
parent 396dbec50d
commit cc97f41f2b

View file

@ -3,12 +3,6 @@
{% block title %}{{ label }}{% endblock %} {% block title %}{{ label }}{% endblock %}
{% block style %}
<style>
.card-columns { column-count: 6; }
</style>
{% endblock %}
{% block content %} {% block content %}
<div class="m-3"> <div class="m-3">
<h1>{{ self.title() }}</h1> <h1>{{ self.title() }}</h1>
@ -58,11 +52,11 @@
{{ render_pagination(pager) }} {{ render_pagination(pager) }}
<div class="row" data-masonry='{"percentPosition": true }'> <div class="row row-cols-1 row-cols-md-5 g-4">
{% for item in items %} {% for item in items %}
{% set image = item.image %} {% set image = item.image %}
<div class="col-sm-6 col-lg-4 mb-4"> <div class="col">
<div class="card"> <div class="card h-100">
<a href="{{ url_for('item_page', item_id=item.item_id) }}"> <a href="{{ url_for('item_page', item_id=item.item_id) }}">
{# <img src="{{ image.thumburl }}" height="{{ image.thumbheight }}" width="{{ image.thumbwidth }}" class="card-img-top"></a> #} {# <img src="{{ image.thumburl }}" height="{{ image.thumbheight }}" width="{{ image.thumbwidth }}" class="card-img-top"></a> #}
<img src="{{ image.thumburl }}" class="card-img-top"></a> <img src="{{ image.thumburl }}" class="card-img-top"></a>
@ -97,8 +91,6 @@
{% endblock %} {% endblock %}
{% block script %} {% block script %}
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
<script> <script>
$('#filters').hide(); $('#filters').hide();