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 -->
-  <!-- Top toolbar -->
+  <div class="result-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="muted">Editing: #{{ entry.id }}</span>
+      <span class="rt-count">Editing: #{{ entry.id }}</span>
     </div>
     <div class="rt-right">
       <a class="btn" href="{% url 'entry_view' entry.id %}">Cancel</a>
@@ -16,80 +16,86 @@
     </div>
   </div>
 
-  <div class="card form-card">
+  <!-- Card -->
-    <form id="entry-edit-form" method="post" novalidate>
+  <div class="card entry-form modern-form">
+    <form id="entry-edit-form" method="post">
       {% csrf_token %}
 
-      <div class="form-group">
+      <div class="f-grid">
-        <label class="form-label" for="id_subject">Subject</label>
+        <div class="f-row">
-        {{ form.subject.as_widget(attrs={
+          <div class="f-label">Subject</div>
-          'class': 'form-control',
+          <div class="f-control">
-          'placeholder': '',
+            {{ form.subject }}
-          'rows': '2'
+          </div>
-        }) }}
-      </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="form-group">
+        <div class="f-row tall">
-          <label class="form-label" for="id_talk_title">Talk Title</label>
+          <div class="f-label">Illustration</div>
-          {{ form.talk_title.as_widget(attrs={'class': 'form-control'}) }}
+          <div class="f-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>
 
-      <div class="form-grid-3">
+      <!-- bottom actions (hidden by CSS if you prefer only the top bar) -->
-        <div class="form-group">
+      <div class="form-actions bottom-actions">
-          <label class="form-label" for="id_talk_number">Talk Number</label>
+        <a class="btn btn-secondary" href="{% url 'entry_view' entry.id %}">Cancel</a>
-          {{ 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>