From d206e37f3bb22f9173cc7f38e781afd7fa602d9e Mon Sep 17 00:00:00 2001
From: Joshua Laymon <joshlaymon@icloud.com>
Date: Thu, 14 Aug 2025 22:49:37 +0000
Subject: [PATCH] Update web/templates/entry_add.html

---
 web/templates/entry_add.html | 80 +++++++++++++++++++++++++-----------
 1 file changed, 56 insertions(+), 24 deletions(-)

diff --git a/web/templates/entry_add.html b/web/templates/entry_add.html
index 722b485..28d8de3 100644
--- a/web/templates/entry_add.html
+++ b/web/templates/entry_add.html
@@ -8,36 +8,36 @@
   <h1 class="page-title">Record New Illustration</h1>
   <p class="page-subtitle">Use this form to save a new illustration that you encountered.  Be sure to properly catagorize your entry with comma seperated subjects and to use the standard bible book abbreviations when recording a scripture.</p>
 
-  <form method="post" class="search-form card">
+  <form method="post" class="search-form card add-form-card">
     {% csrf_token %}
 
     <div class="form-grid">
       <div class="form-row">
-        <label>Subject</label>
+        <label class="f-label">Subject</label>
         {{ form.subject }}
         {% if form.subject.errors %}<div class="err">{{ form.subject.errors|striptags }}</div>{% endif %}
       </div>
 
       <div class="form-row">
-        <label>Illustration</label>
+        <label class="f-label">Illustration</label>
         {{ form.illustration }}
         {% if form.illustration.errors %}<div class="err">{{ form.illustration.errors|striptags }}</div>{% endif %}
       </div>
 
       <div class="form-row">
-        <label>Application</label>
+        <label class="f-label">Application</label>
         {{ form.application }}
         {% if form.application.errors %}<div class="err">{{ form.application.errors|striptags }}</div>{% endif %}
       </div>
 
       <div class="form-row two">
         <div>
-          <label>Scripture</label>
+          <label class="f-label">Scripture</label>
           {{ form.scripture_raw }}
           {% if form.scripture_raw.errors %}<div class="err">{{ form.scripture_raw.errors|striptags }}</div>{% endif %}
         </div>
         <div>
-          <label>Source</label>
+          <label class="f-label">Source</label>
           {{ form.source }}
           {% if form.source.errors %}<div class="err">{{ form.source.errors|striptags }}</div>{% endif %}
         </div>
@@ -45,29 +45,32 @@
 
       <div class="form-row two">
         <div>
-          <label>Talk Title</label>
+          <label class="f-label">Talk Title</label>
           {{ form.talk_title }}
           {% if form.talk_title.errors %}<div class="err">{{ form.talk_title.errors|striptags }}</div>{% endif %}
         </div>
         <div>
-          <label>Talk Number</label>
+          <label class="f-label">Talk Number</label>
           {{ form.talk_number }}
           {% if form.talk_number.errors %}<div class="err">{{ form.talk_number.errors|striptags }}</div>{% endif %}
         </div>
       </div>
 
-      <div class="form-row two">
+      <!-- Combined row: Entry Code + Date Added + Date Edited -->
+      <div class="form-row three">
         <div>
-          <label>Code</label>
+          <label class="f-label">Entry Code</label>
           {{ form.entry_code }}
           {% if form.entry_code.errors %}<div class="err">{{ form.entry_code.errors|striptags }}</div>{% endif %}
         </div>
         <div>
-          <label>Dates</label>
-          <div class="two">
-            {{ form.date_added }} {{ form.date_edited }}
-          </div>
+          <label class="f-label">Date Added</label>
+          {{ form.date_added }}
           {% if form.date_added.errors %}<div class="err">{{ form.date_added.errors|striptags }}</div>{% endif %}
+        </div>
+        <div>
+          <label class="f-label">Date Edited</label>
+          {{ form.date_edited }}
           {% if form.date_edited.errors %}<div class="err">{{ form.date_edited.errors|striptags }}</div>{% endif %}
         </div>
       </div>
@@ -83,9 +86,37 @@
   </form>
 </div>
 
+<style>
+  /* Card padding + breathing room */
+  .add-form-card {
+    padding: 22px 22px 18px;
+  }
+  .form-grid { display: grid; gap: 16px; }
+  .form-row { display: block; }
+  .form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+  .form-row.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
+
+  /* Bigger, bold labels (but not huge) */
+  .f-label {
+    display: block;
+    font-weight: 700;
+    font-size: 15px;
+    margin-bottom: 6px;
+    color: #111827;
+  }
+
+  /* Nudge inputs away from edges a bit more */
+  .search-input.input-hero { padding: 12px 14px; }
+  .textarea-hero { min-height: 140px; }
+  
+  @media (max-width: 860px) {
+    .form-row.two, .form-row.three { grid-template-columns: 1fr; }
+  }
+</style>
+
 <script>
 (function () {
-  // Gracefully load the mapping, then wire up behavior
+  // ----- Talk Number -> Talk Title auto-fill -----
   const talksUrl = "{% static 'talks.json' %}";
 
   function wireAutofill(talkMap) {
@@ -93,10 +124,8 @@
     const titleEl  = document.getElementById("id_talk_title");
     if (!numberEl || !titleEl) return;
 
-    // If the user types anything, we mark the field "dirty" so we won't overwrite it.
     let userTyped = false;
     titleEl.addEventListener("input", () => {
-      // If the user cleared the field, allow auto-fill again.
       userTyped = titleEl.value.trim().length > 0;
       if (!userTyped) titleEl.dataset.autofilled = "0";
     });
@@ -104,38 +133,41 @@
     function maybeAutofill() {
       const n = numberEl.value;
       const mapped = talkMap && talkMap[n] ? talkMap[n] : "";
-
-      // Only set if the user hasn't typed their own value
       if (!userTyped) {
         if (mapped) {
           titleEl.value = mapped;
           titleEl.dataset.autofilled = "1";
         } else if (titleEl.dataset.autofilled === "1") {
-          // Clear if the previous value was auto-filled and the new number has no mapping
           titleEl.value = "";
           titleEl.dataset.autofilled = "0";
         }
       }
     }
 
-    // On change
     numberEl.addEventListener("change", maybeAutofill);
 
-    // Initial fill on page load if title is empty
     if (titleEl.value.trim() === "") {
       userTyped = false;
       maybeAutofill();
     } else {
-      // User already has a value; don't overwrite
       userTyped = true;
     }
   }
 
-  // Try to fetch the mapping; if it fails, we just silently skip auto-fill
   fetch(talksUrl, {cache: "no-store"})
     .then(r => r.ok ? r.json() : {})
     .then(map => wireAutofill(map))
     .catch(() => wireAutofill({}));
+
+  // ----- Auto-set today's date for Date Added (only if empty) -----
+  const dateAddedEl = document.getElementById("id_date_added");
+  if (dateAddedEl && !dateAddedEl.value) {
+    const today = new Date();
+    const yyyy = today.getFullYear();
+    const mm = String(today.getMonth() + 1).padStart(2, "0");
+    const dd = String(today.getDate()).padStart(2, "0");
+    dateAddedEl.value = `${yyyy}-${mm}-${dd}`;
+  }
 })();
 </script>
 {% endblock %}
\ No newline at end of file