From 396dbec50d59096b1482dbf33f64d7b63a741a87 Mon Sep 17 00:00:00 2001
From: Edward Betts <edward@4angle.com>
Date: Thu, 9 Nov 2023 10:26:18 +0100
Subject: [PATCH] Bootstrap 5 is missing card-columns, use masonry instead

---
 templates/find_more.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/templates/find_more.html b/templates/find_more.html
index dad04cd..360d9fd 100644
--- a/templates/find_more.html
+++ b/templates/find_more.html
@@ -58,9 +58,10 @@
 
 {{ render_pagination(pager) }}
 
-<div class="card-columns">
+<div class="row" data-masonry='{"percentPosition": true }'>
   {% for item in items %}
   {% set image = item.image %}
+  <div class="col-sm-6 col-lg-4 mb-4">
   <div class="card">
     <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> #}
@@ -86,6 +87,7 @@
       </p>
     </div>
   </div>
+  </div>
   {% endfor %}
 </div>
 
@@ -95,6 +97,8 @@
 {% endblock %}
 
 {% 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>
   $('#filters').hide();