From 1752d892f518d8a201771a0d4194eacf8355a215 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Sat, 6 Dec 2025 19:22:00 +0000
Subject: [PATCH] .

---
 cards/templates/cards/_card_item.html  |   2 +-
 cards/templates/cards/_form.html       |   2 +-
 cards/templates/cards/_form_modal.html |  10 +++++++++
 cards/templates/cards/list.html        |   4 ++--
 cards/views.py                         |  27 ++++++++++++++-----------
 db.sqlite3                             | Bin 151552 -> 151552 bytes
 6 files changed, 29 insertions(+), 16 deletions(-)
 create mode 100644 cards/templates/cards/_form_modal.html

diff --git a/cards/templates/cards/_card_item.html b/cards/templates/cards/_card_item.html
index c1d775b..99145a9 100644
--- a/cards/templates/cards/_card_item.html
+++ b/cards/templates/cards/_card_item.html
@@ -60,7 +60,7 @@
         </div>
       </div>
       <div class="buttons" style="margin-top:0.6rem">
-        <button class="button is-small is-info" hx-get="{% url 'cards:edit' card.pk %}" hx-target="#htmx-form" hx-swap="innerHTML">Edit</button>
+        <button class="button is-small is-info" hx-get="{% url 'cards:edit' card.pk %}" hx-target="#modal-root" hx-swap="innerHTML">Edit</button>
         <button class="button is-small is-primary" hx-get="{% url 'cards:preview' card.pk %}" hx-target="#modal-root" hx-swap="innerHTML">Preview</button>
 
         <button class="button is-small is-danger" hx-post="{% url 'cards:delete' card.pk %}" hx-confirm="Delete this card?" hx-target="#card-{{ card.pk }}" hx-swap="outerHTML">Delete</button>
diff --git a/cards/templates/cards/_form.html b/cards/templates/cards/_form.html
index d261c8e..698c503 100644
--- a/cards/templates/cards/_form.html
+++ b/cards/templates/cards/_form.html
@@ -193,7 +193,7 @@
       <button class="button is-primary" type="submit">Save</button>
     </div>
     <div class="control">
-      <button class="button is-light" type="button" onclick="document.getElementById('htmx-form').innerHTML=''">Cancel</button>
+      <button class="button is-light" type="button" onclick="(function(){ const m=document.getElementById('modal-root'); if(m) m.innerHTML=''; const h=document.getElementById('htmx-form'); if(h) h.innerHTML=''; })()">Cancel</button>
     </div>
   </div>
 </form>
diff --git a/cards/templates/cards/_form_modal.html b/cards/templates/cards/_form_modal.html
new file mode 100644
index 0000000..077682b
--- /dev/null
+++ b/cards/templates/cards/_form_modal.html
@@ -0,0 +1,10 @@
+{# HTMX modal wrapper for the create/edit form #}
+<div class="modal is-active" id="card-modal">
+  <div class="modal-background" onclick="document.getElementById('modal-root').innerHTML=''" ></div>
+  <div class="modal-content">
+    <div style="max-width:920px; margin:0 auto;">
+      {% include 'cards/_form.html' %}
+    </div>
+  </div>
+  <button class="modal-close is-large" aria-label="close" onclick="document.getElementById('modal-root').innerHTML=''"></button>
+</div>
diff --git a/cards/templates/cards/list.html b/cards/templates/cards/list.html
index 6e1af4f..cf10f4a 100644
--- a/cards/templates/cards/list.html
+++ b/cards/templates/cards/list.html
@@ -3,8 +3,8 @@
 {% block content %}
   <div class="level">
     <div class="level-left">
-      <div class="level-item">
-        <button class="button is-primary" hx-get="{% url 'cards:create' %}" hx-target="#htmx-form" hx-swap="innerHTML">Add Dinosaur</button>
+        <div class="level-item">
+        <button class="button is-primary" hx-get="{% url 'cards:create' %}" hx-target="#modal-root" hx-swap="innerHTML">Add Dinosaur</button>
       </div>
       <div class="level-item">
         <a class="button is-light" href="{% url 'cards:backgrounds' %}">Manage backgrounds</a>
diff --git a/cards/views.py b/cards/views.py
index ae3e61a..8a3e464 100644
--- a/cards/views.py
+++ b/cards/views.py
@@ -91,20 +91,22 @@ def card_create(request):
             card.save()
             if is_htmx(request):
                 card_html = render_to_string('cards/_card_item.html', {'card': card, 'background': background}, request=request)
-                # Also return an out-of-band fragment to replace/clear the form container
-                form_html = render_to_string('cards/_form.html', {'form': DinosaurForm(), 'background': background, 'backgrounds': backgrounds}, request=request)
-                oob = f'<div id="htmx-form" hx-swap-oob="true">{form_html}</div>'
+                # Clear the modal via out-of-band so the modal-root is emptied
+                oob = '<div id="modal-root" hx-swap-oob="true"></div>'
                 return HttpResponse(card_html + oob)
             return redirect('cards:list')
         else:
             if is_htmx(request):
-                # Return the form as an out-of-band fragment so it updates the form container
-                form_html = render_to_string('cards/_form.html', {'form': form, 'background': background, 'backgrounds': backgrounds}, request=request)
-                oob = f'<div id="htmx-form" hx-swap-oob="true">{form_html}</div>'
-                return HttpResponse(oob)
+                # Return the form wrapped in a modal fragment so it updates the modal-root
+                form_html = render_to_string('cards/_form_modal.html', {'form': form, 'background': background, 'backgrounds': backgrounds}, request=request)
+                return HttpResponse(form_html)
     else:
         form = DinosaurForm()
 
+    # If this is an HTMX request, return the modal-wrapped form so it can be
+    # injected into `#modal-root`. Otherwise return the standalone form page.
+    if is_htmx(request):
+        return render(request, 'cards/_form_modal.html', {'form': form, 'background': background, 'backgrounds': backgrounds})
     return render(request, 'cards/_form.html', {'form': form, 'background': background, 'backgrounds': backgrounds})
 
 
@@ -126,18 +128,19 @@ def card_edit(request, pk):
             card.save()
             if is_htmx(request):
                 card_html = render_to_string('cards/_card_item.html', {'card': card, 'background': background}, request=request)
-                # Clear the form container via OOB so the edit form disappears after successful save
-                oob = '<div id="htmx-form" hx-swap-oob="true"></div>'
+                # Clear the modal via OOB so the modal-root is emptied
+                oob = '<div id="modal-root" hx-swap-oob="true"></div>'
                 return HttpResponse(card_html + oob)
             return redirect('cards:list')
         else:
             if is_htmx(request):
-                form_html = render_to_string('cards/_form.html', {'form': form, 'card': card, 'background': background, 'backgrounds': backgrounds}, request=request)
-                oob = f'<div id="htmx-form" hx-swap-oob="true">{form_html}</div>'
-                return HttpResponse(oob)
+                form_html = render_to_string('cards/_form_modal.html', {'form': form, 'card': card, 'background': background, 'backgrounds': backgrounds}, request=request)
+                return HttpResponse(form_html)
     else:
         form = DinosaurForm(instance=card)
 
+    if is_htmx(request):
+        return render(request, 'cards/_form_modal.html', {'form': form, 'card': card, 'background': background, 'backgrounds': backgrounds})
     return render(request, 'cards/_form.html', {'form': form, 'card': card, 'background': background, 'backgrounds': backgrounds})
 
 
diff --git a/db.sqlite3 b/db.sqlite3
index 93a1822a19ff79b378fb9f083dfe0a1af3afc8bb..ae16086d3aeb96ea98a9d0acc79cd629f0658085 100644
GIT binary patch
delta 137
zcmZozz}c{XbAmKu|3n#Q#{R~H)&$0_2~4-;8Q*WWQD9olFTwwtfrE{Kfq|8ok&#6a
zL~;m$xZD5hGqDLUF`S*w?!cr7q$fKHEEZ}^QRHV(m6hjpWMpJ?Y^-HxoZjHUG>wsW
kx|k=EEhEeJEsjj*SeZETrnk5=y<!0x^mKcX2U8zA074ca=Kufz

delta 105
zcmZozz}c{XbAmKu&qNt##-7H6)&$0_2~4-;8GmoLQD9olFTudTz{dt8M3`Avm>F1^
z85uc*fDFd%|Mi*J1eh4NOlNmsQe@)D+w3UN#khToBhxunCI*J-E$&ROSQ?WQ`L`E&
IF!iwm0Ca5`(EtDd