From 43d9d11a641e2654ee141a5e915cdf0244257b14 Mon Sep 17 00:00:00 2001
From: Thomas Rusiecki <rusieckithomas@gmail.com>
Date: Mon, 3 Mar 2025 13:54:27 -0300
Subject: [PATCH] now grid based

---
 lot/templates/list_lots.html | 41 ++++++++++++++++++++++--------------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/lot/templates/list_lots.html b/lot/templates/list_lots.html
index f79dbd3..926af8a 100644
--- a/lot/templates/list_lots.html
+++ b/lot/templates/list_lots.html
@@ -18,6 +18,13 @@
    .lot-item.selected {
      background-color: #e2f0ff;
    }
+
+   .lot-grid {
+     display: grid;
+     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+     gap: 15px;
+     padding: 15px;
+   }
   </style>
 
   <div class="row">
@@ -40,23 +47,25 @@
         </div>
         <div id="collapse{{ forloop.counter }}" class="collapse">
           <div class="card-body">
-            {% for lot in lots %}
-              <div class="form-check lot-item" data-name="{{ lot.name }}" data-code="{{ lot.code }}">
-                <input class="form-check-input mt-2" type="checkbox" name="lots" value="{{ lot.id }}" id="lot{{ lot.id }}">
-                <label class="form-check-label w-100" for="lot{{ lot.id }}">
-                  <div class="d-flex justify-content-between align-items-center">
-                    <div class="ps-2">
-                      <strong>{{ lot.name }}</strong>
-                      <div class="text-muted small">{{ lot.description }}</div>
+            <div class="lot-grid">
+              {% for lot in lots %}
+                <div class="form-check lot-item ms-2" data-name="{{ lot.name }}" data-code="{{ lot.code }}">
+                  <input class="form-check-input mt-2" type="checkbox" name="lots" value="{{ lot.id }}" id="lot{{ lot.id }}">
+                  <label class="form-check-label w-100" for="lot{{ lot.id }}">
+                    <div class="d-flex justify-content-between align-items-center">
+                      <div class="ps-2">
+                        <strong>{{ lot.name }}</strong>
+                        <div class="text-muted small">{{ lot.description }}</div>
+                      </div>
+                      <div class="text-end text-muted small">
+                        <div><i class="bi bi-calendar"></i> {{ lot.created|date:"M d, Y" }}</div>
+                        <div><i class="bi bi-person"></i> {{ lot.user.username|default:"N/A" }}</div>
+                      </div>
                     </div>
-                    <div class="text-end text-muted small">
-                      <div><i class="bi bi-calendar"></i> {{ lot.created|date:"M d, Y" }}</div>
-                      <div><i class="bi bi-person"></i> {{ lot.user.username|default:"N/A" }}</div>
-                    </div>
-                  </div>
-                </label>
-              </div>
-            {% endfor %}
+                  </label>
+                </div>
+              {% endfor %}
+            </div>
           </div>
         </div>
       </div>