wip: Improved form for adding engagement components

- travel, planning, regulation and reporting forms look a bit nicer

2 files changed, 87 insertions, 24 deletions

diff --git a/core/static/css/output.css b/core/static/css/output.css
index 67f0dc9..89f69f1 100644
--- a/core/static/css/output.css
+++ b/core/static/css/output.css
@@ -1302,6 +1302,10 @@ html {
   margin-left: 1rem;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -1342,6 +1346,11 @@ html {
   display: grid;
 }
 
+.size-6 {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
 .min-h-full {
   min-height: 100%;
 }
@@ -1378,6 +1387,10 @@ html {
   flex-direction: column;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1773,6 +1786,18 @@ html {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.underline {
+  text-decoration-line: underline;
+}
+
+.decoration-pink-500 {
+  text-decoration-color: #ec4899;
+}
+
+.decoration-2 {
+  text-decoration-thickness: 2px;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
diff --git a/engagements/templates/engagements/engagement_effort_create.html b/engagements/templates/engagements/engagement_effort_create.html
index b776fd8..86deb2c 100644
--- a/engagements/templates/engagements/engagement_effort_create.html
+++ b/engagements/templates/engagements/engagement_effort_create.html
@@ -1,34 +1,72 @@
 {% extends "core/base.html" %}
+{% load widget_tweaks %}
 
 {% block title %}Add {{ etype }} effort to Engagement{% endblock title %}
 
 {% block content %}
 
-   <div class="container mx-auto max-w-2xl mt-8">
-    <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
-        <h2 class="text-2xl font-bold mb-6">Register your {{ etype|lower }} effort for the {{ engagement.engagement_type.name|title }} event</h2>
-        <p class="mb-6">{{ engagement.external_party }} on {{ engagement.proposed_start_date }}</p>
-
-        <form method="post" class="space-y-6">
-            {% csrf_token %}
-            {% for field in form %}
-                <div class="mb-4">
-                    <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
-                        {{ field.label }}
-                    </label>
-                    {{ field }}
-                    {% if field.help_text %}
-                        <p class="mt-2 text-sm text-gray-500">{{ field.help_text }}</p>
-                    {% endif %}
-                </div>
-            {% endfor %}
-            <div class="mt-6">
-                <button type="submit" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-                    Submit
-                </button>
+    <div class="map-pin">
+    </div>
+
+
+    <div class="container mx-auto max-w-2xl mt-8">
+        <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+            <h2 class="text-2xl font-bold mb-6">Register your {{ etype|lower }} effort for
+                the {{ engagement.engagement_type.name|title }} event</h2>
+            <div class="flex items-end mb-6">
+                <svg id="map-pin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                     stroke="currentColor"
+                     class="size-6 mr-2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                          d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"/>
+                </svg>
+                <p class="underline decoration-2 font-semibold decoration-pink-500">{{ engagement.external_party }}</p>
             </div>
-        </form>
+
+            <div class="flex items-end mb-6">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                     stroke="currentColor" class="size-6 mr-2">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                          d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"/>
+                </svg>
+                            <p class="text text-gray-500 font-medium">
+                                {% if engagement.proposed_start_date == engagement.proposed_end_date %}
+                                    {{ engagement.proposed_start_date|date:"j M Y" }}
+                                {% else %}
+                                    {{ engagement.proposed_start_date|date:"j M Y" }} - {{ engagement.proposed_end_date|date:"j M Y" }}
+                                {% endif %}
+                            </p>
+            </div>
+
+            <form method="post" class="space-y-6">
+                {% csrf_token %}
+                {% for field in form %}
+                    <div class="my-2">
+                        <div>
+                            <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
+                                {{ field.label }}
+                            </label>
+                        </div>
+                        <div>
+                            {% render_field field class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %}
+                            {% for error in field.errors %}
+                                {{ field }}
+                            {% endfor %}
+                        </div>
+                        {% if field.help_text %}
+                            <p class="mt-2 text-sm text-gray-500">{{ field.help_text }}</p>
+                        {% endif %}
+                    </div>
+                {% endfor %}
+                <div class="mt-6">
+                    <button type="submit"
+                            class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                        Submit
+                    </button>
+                </div>
+            </form>
+        </div>
     </div>
-</div>
 
 {% endblock content %}