Bootstrap 5 is missing card-columns, use masonry instead

This commit is contained in:
Edward Betts 2023-11-09 10:26:18 +01:00
parent 1523b23ba3
commit 396dbec50d

View file

@ -58,9 +58,10 @@
{{ render_pagination(pager) }} {{ render_pagination(pager) }}
<div class="card-columns"> <div class="row" data-masonry='{"percentPosition": true }'>
{% 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="card"> <div class="card">
<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> #}
@ -86,6 +87,7 @@
</p> </p>
</div> </div>
</div> </div>
</div>
{% endfor %} {% endfor %}
</div> </div>
@ -95,6 +97,8 @@
{% 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();