Update web/templates/entry_edit.html

web/templates/entry_edit.html

@@ -1,14 +1,14 @@
 {% extends "base.html" %}
 {% block body_class %}themed-bg{% endblock %}
-{% load static %}
 
 {% block content %}
 <div class="page">
-  <!-- Top bar -->
+
-  <div class="result-toolbar">
+  <!-- Top toolbar -->
+  <div class="result-toolbar" style="margin-bottom:12px;">
     <div class="rt-left">
       <a class="btn btn-secondary" href="{% url 'entry_view' entry.id %}">← Back to Entry</a>
-      <span class="rt-count">Editing: #{{ entry.id }}</span>
+      <span class="muted">Editing: #{{ entry.id }}</span>
     </div>
     <div class="rt-right">
       <a class="btn" href="{% url 'entry_view' entry.id %}">Cancel</a>
@@ -16,86 +16,80 @@
     </div>
   </div>
 
-  <!-- Card -->
+  <div class="card form-card">
-  <div class="card entry-form modern-form">
+    <form id="entry-edit-form" method="post" novalidate>
-    <form id="entry-edit-form" method="post">
       {% csrf_token %}
 
-      <div class="f-grid">
+      <div class="form-group">
-        <div class="f-row">
+        <label class="form-label" for="id_subject">Subject</label>
-          <div class="f-label">Subject</div>
+        {{ form.subject.as_widget(attrs={
-          <div class="f-control">
+          'class': 'form-control',
-            {{ form.subject }}
+          'placeholder': '',
-          </div>
+          'rows': '2'
+        }) }}
+      </div>
+
+      <div class="form-group">
+        <label class="form-label" for="id_illustration">Illustration</label>
+        {{ form.illustration.as_widget(attrs={
+          'class': 'form-control form-textarea-tall',
+          'rows': '12'
+        }) }}
+      </div>
+
+      <div class="form-group">
+        <label class="form-label" for="id_application">Application</label>
+        {{ form.application.as_widget(attrs={
+          'class': 'form-control form-textarea-tall',
+          'rows': '10'
+        }) }}
+      </div>
+
+      <div class="form-group">
+        <label class="form-label" for="id_scripture_raw">Scripture</label>
+        {{ form.scripture_raw.as_widget(attrs={
+          'class': 'form-control',
+          'placeholder': ''
+        }) }}
+      </div>
+
+      <div class="form-grid-2">
+        <div class="form-group">
+          <label class="form-label" for="id_source">Source</label>
+          {{ form.source.as_widget(attrs={'class': 'form-control'}) }}
         </div>
 
-        <div class="f-row tall">
+        <div class="form-group">
-          <div class="f-label">Illustration</div>
+          <label class="form-label" for="id_talk_title">Talk Title</label>
-          <div class="f-control">
+          {{ form.talk_title.as_widget(attrs={'class': 'form-control'}) }}
-            {{ form.illustration }}
-          </div>
-        </div>
-
-        <div class="f-row tall">
-          <div class="f-label">Application</div>
-          <div class="f-control">
-            {{ form.application }}
-          </div>
-        </div>
-
-        <div class="f-row">
-          <div class="f-label">Scripture</div>
-          <div class="f-control">
-            {{ form.scripture_raw }}
-          </div>
-        </div>
-
-        <div class="f-row">
-          <div class="f-label">Source</div>
-          <div class="f-control">
-            {{ form.source }}
-          </div>
-        </div>
-
-        <div class="f-row">
-          <div class="f-label">Talk Title</div>
-          <div class="f-control">
-            {{ form.talk_title }}
-          </div>
-        </div>
-
-        <div class="f-row">
-          <div class="f-label">Talk Number</div>
-          <div class="f-control">
-            {{ form.talk_number }}
-          </div>
-        </div>
-
-        <div class="f-row">
-          <div class="f-label">Entry Code</div>
-          <div class="f-control">
-            {{ form.entry_code }}
-          </div>
-        </div>
-
-        <div class="f-row">
-          <div class="f-label">Date Added</div>
-          <div class="f-control">
-            {{ form.date_added }}
-          </div>
-        </div>
-
-        <div class="f-row">
-          <div class="f-label">Date Edited</div>
-          <div class="f-control">
-            {{ form.date_edited }}
-          </div>
         </div>
       </div>
 
-      <!-- bottom actions (hidden by CSS if you prefer only the top bar) -->
+      <div class="form-grid-3">
-      <div class="form-actions bottom-actions">
+        <div class="form-group">
-        <a class="btn btn-secondary" href="{% url 'entry_view' entry.id %}">Cancel</a>
+          <label class="form-label" for="id_talk_number">Talk Number</label>
+          {{ form.talk_number.as_widget(attrs={'class': 'form-control'}) }}
+        </div>
+
+        <div class="form-group">
+          <label class="form-label" for="id_entry_code">Entry Code</label>
+          {{ form.entry_code.as_widget(attrs={'class': 'form-control'}) }}
+        </div>
+
+        <div class="form-group">
+          <label class="form-label" for="id_date_added">Date Added</label>
+          {{ form.date_added.as_widget(attrs={'class': 'form-control'}) }}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="form-label" for="id_date_edited">Date Edited</label>
+        <!-- Will be overwritten to today on save by the view -->
+        {{ form.date_edited.as_widget(attrs={'class': 'form-control'}) }}
+      </div>
+
+      <div class="form-actions">
+        <a class="btn" href="{% url 'entry_view' entry.id %}">Cancel</a>
         <button class="btn btn-primary">Save</button>
       </div>
     </form>