From ad9ec5d47095d7304d67d62bd25bd5c9701727a7 Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Sun, 10 Nov 2024 23:48:23 +0000
Subject: [PATCH] modal style change & move to own html file

---
 apps/home/static/home/scss/venues.scss    | 20 +++++++
 apps/home/templates/home/venue-modal.html | 66 +++++++++++++++++++++++
 apps/home/templates/home/venues.html      | 63 +---------------------
 3 files changed, 87 insertions(+), 62 deletions(-)
 create mode 100644 apps/home/templates/home/venue-modal.html

diff --git a/apps/home/static/home/scss/venues.scss b/apps/home/static/home/scss/venues.scss
index e6d19e4..255e1c2 100644
--- a/apps/home/static/home/scss/venues.scss
+++ b/apps/home/static/home/scss/venues.scss
@@ -92,16 +92,30 @@
 
     .modal-content { min-height: 0 !important; }
 
+    .venue-modal-header {
+
+        @extend .modal-header;
+
+        color: #fff;
+        background-color: #04385c;
+        border-radius: 0;
+        padding: 1rem 1.5rem;
+
+    }
+
     .venue-modal-body {
 
         flex-grow: 1;
 
+        .form-control { border-radius: var(--bs-border-radius-sm); }
+
         textarea {
 
             --height: calc(6em + 0.75rem + calc(var(--bs-border-width) * 2));;
             max-height: var(--height);
             min-height: var(--height);
             height: var(--height);
+            resize: none;
 
         }
 
@@ -139,6 +153,12 @@
     
         }
 
+        .btn-primary {
+
+
+
+        }
+
     }
 
 
diff --git a/apps/home/templates/home/venue-modal.html b/apps/home/templates/home/venue-modal.html
new file mode 100644
index 0000000..09d5b7b
--- /dev/null
+++ b/apps/home/templates/home/venue-modal.html
@@ -0,0 +1,66 @@
+<div id="venueModal" class="venue-modal modal fade" data-bs-backdrop="static">
+    <div class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-lg">
+        <div class="modal-content rounded-1">
+            <div class="venue-modal-header" data-bs-theme="dark">
+                <h5 class="modal-title me-5 fw-bold">Create a Venue</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="venue-modal-body row g-0">
+                <div class="col-md-1">
+                    <div class="venue-modal-sidebar">
+                        <button type="button" class="venue-sidebar-btn active">
+                            <i class="bi bi-card-text"></i>
+                        </button>
+                        <button type="button" class="venue-sidebar-btn">
+                            <i class="bi bi-geo-alt"></i>
+                        </button>
+                        <button type="button" class="venue-sidebar-btn">
+                            <i class="bi bi-telephone"></i>
+                        </button>
+                        <button type="button" class="venue-sidebar-btn">
+                            <i class="bi bi-images"></i>
+                        </button>
+                        <button type="button" class="venue-sidebar-btn">
+                            <i class="bi bi-droplet-half"></i>
+                        </button>
+                        <button type="button" class="venue-sidebar-btn mt-auto">
+                            <i class="bi bi-check-lg"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="col-md-11">
+                    <div class="venue-modal-content">
+                        <div class="form-group">
+                            <label for="venueName" class="form-label">Name</label>
+                            <input type="text" name="venueName" id="venueName" class="form-control">
+                        </div>
+                        <div class="form-group mt-4">
+                            <label for="venueDescription" class="form-label">Description</label>
+                            <textarea name="venueDescription" id="venueDescription" class="form-control"></textarea>
+                        </div>
+                        <div class="mt-4">
+                            <label class="form-label w-100">Type</label>
+                            <div class="btn-group rounded-1">
+                                <input type="radio" name="venueType" id="venueTypeFishery" class="btn-check" value="fishery">
+                                <label for="venueTypeFishery" class="btn btn-secondary">Fishery</label>
+                                <input type="radio" name="venueType" id="venueTypeClub" class="btn-check" value="club">
+                                <label for="venueTypeClub" class="btn btn-secondary">Club</label>
+                                <input type="radio" name="venueType" id="venueTypePrivate" class="btn-check" value="private">
+                                <label for="venueTypePrivate" class="btn btn-secondary">Private</label>
+                            </div>
+                        </div>
+
+                        <div class="mt-5 text-end">
+                            <button type="button" class="btn btn-secondary rounded-1 me-3 d-none">
+                                Back
+                            </button>
+                            <button type="button" class="btn btn-primary rounded-1 px-4">
+                                Next
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/apps/home/templates/home/venues.html b/apps/home/templates/home/venues.html
index 21d7ef3..169c5ac 100644
--- a/apps/home/templates/home/venues.html
+++ b/apps/home/templates/home/venues.html
@@ -30,69 +30,8 @@
     <div id="venueContainer" class="row gy-0 venue-items"></div>
 </div>
 
-<div id="venueModal" class="venue-modal modal fade" data-bs-backdrop="static">
-    <div class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-lg">
-        <div class="modal-content rounded-1">
-            <div class="modal-header">
-                <h5 class="modal-title me-5 fw-bold">New Venue</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-            </div>
-            <div class="venue-modal-body row g-0">
-                <div class="col-md-1">
-                    <div class="venue-modal-sidebar">
-                        <button type="button" class="venue-sidebar-btn active">
-                            <i class="bi bi-file-earmark-text"></i>
-                        </button>
-                        <button type="button" class="venue-sidebar-btn">
-                            <i class="bi bi-geo-alt"></i>
-                        </button>
-                        <button type="button" class="venue-sidebar-btn">
-                            <i class="bi bi-telephone"></i>
-                        </button>
-                        <button type="button" class="venue-sidebar-btn">
-                            <i class="bi bi-droplet-half"></i>
-                        </button>
-                        <button type="button" class="venue-sidebar-btn mt-auto">
-                            <i class="bi bi-check-lg"></i>
-                        </button>
-                    </div>
-                </div>
-                <div class="col-md-11">
-                    <div class="venue-modal-content">
-                        <div class="form-group">
-                            <label for="venueName" class="form-label">Name</label>
-                            <input type="text" name="venueName" id="venueName" class="form-control">
-                        </div>
-                        <div class="form-group mt-4">
-                            <label for="venueDescription" class="form-label">Description</label>
-                            <textarea name="venueDescription" id="venueDescription" class="form-control"></textarea>
-                        </div>
-                        <div class="mt-4">
-                            <label class="form-label w-100">Type</label>
-                            <div class="btn-group">
-                                <input type="radio" name="venueType" id="venueTypeFishery" class="btn-check" value="fishery">
-                                <label for="venueTypeFishery" class="btn btn-outline-primary">Fishery</label>
-                                <input type="radio" name="venueType" id="venueTypeClub" class="btn-check" value="club">
-                                <label for="venueTypeClub" class="btn btn-outline-primary">Club</label>
-                                <input type="radio" name="venueType" id="venueTypePrivate" class="btn-check" value="private">
-                                <label for="venueTypePrivate" class="btn btn-outline-primary">Private</label>
-                            </div>
-                        </div>
+{% include "home/venue-modal.html" %}
 
-                        <div class="mt-5 text-end">
-                            <button type="button" class="btn btn-secondary rounded-1 me-3 d-none">
-                                Back
-                            </button>
-                            <button type="button" class="btn btn-primary rounded-1 px-4">
-                                Next
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
 {% endblock content %}
 
 {% block scripts %}