Effort form looking much better

3 files changed, 99 insertions, 19 deletions

diff --git a/core/static/css/output.css b/core/static/css/output.css
index 89f69f1..0a5c4ee 100644
--- a/core/static/css/output.css
+++ b/core/static/css/output.css
@@ -1255,6 +1255,22 @@ html {
   position: static;
 }
 
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.right-2 {
+  right: 0.5rem;
+}
+
+.top-2 {
+  top: 0.5rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -1346,11 +1362,20 @@ html {
   display: grid;
 }
 
+.size-4 {
+  width: 1rem;
+  height: 1rem;
+}
+
 .size-6 {
   width: 1.5rem;
   height: 1.5rem;
 }
 
+.h-6 {
+  height: 1.5rem;
+}
+
 .min-h-full {
   min-height: 100%;
 }
@@ -1359,6 +1384,10 @@ html {
   width: 66.666667%;
 }
 
+.w-6 {
+  width: 1.5rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -1387,6 +1416,10 @@ html {
   flex-direction: column;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .items-end {
   align-items: flex-end;
 }
@@ -1480,6 +1513,11 @@ html {
   border-top-width: 1px;
 }
 
+.border-blue-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(191 219 254 / var(--tw-border-opacity));
+}
+
 .border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
@@ -1712,6 +1750,10 @@ html {
   font-weight: 500;
 }
 
+.font-normal {
+  font-weight: 400;
+}
+
 .font-semibold {
   font-weight: 600;
 }
@@ -1746,6 +1788,11 @@ html {
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
+.text-blue-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
+}
+
 .text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -1790,6 +1837,10 @@ html {
   text-decoration-line: underline;
 }
 
+.decoration-blue-500 {
+  text-decoration-color: #3b82f6;
+}
+
 .decoration-pink-500 {
   text-decoration-color: #ec4899;
 }
diff --git a/engagements/forms.py b/engagements/forms.py
index e3ac85a..2532892 100644
--- a/engagements/forms.py
+++ b/engagements/forms.py
@@ -16,6 +16,10 @@ class EngagementEffortReportingCreateForm(forms.ModelForm):
 
     class Meta:
         model = EngagementEffort
+        help_texts = {
+            "is_planned": ("To distinguish planned events from retrospective recording."),
+            "officers": ("Include yourself here but you can also add effort for your colleagues.")
+        }
         fields = [
             'is_planned',
             'proposed_start_date',
@@ -63,7 +67,7 @@ class EngagementEffortRegulationCreateForm(forms.ModelForm):
             "notes",
         ]
         help_texts = {
-            "is_planned": ("<br><small><em>To distinguish planned events from retrospective recording</em></small>")
+            "is_planned": ("To distinguish planned events from retrospective recording.")
         }
         widgets = {
             "proposed_start_date": forms.DateTimeInput(
@@ -93,7 +97,7 @@ class EngagementEffortPlanningCreateForm(forms.ModelForm):
             "notes",
         ]
         help_texts = {
-            "is_planned": ("<br><small><em>To distinguish planned events from retrospective recording</em></small>")
+            "is_planned": ("To distinguish planned events from retrospective recording.")
         }
         widgets = {
             "proposed_start_date": forms.DateTimeInput(
@@ -126,6 +130,9 @@ class EngagementEffortTravelCreateForm(forms.ModelForm):
             "proposed_start_date": forms.DateTimeInput(attrs={"type": "datetime-local"}),
             "proposed_end_date": forms.DateTimeInput(attrs={"type": "datetime-local"}),
         }
+        help_texts = {
+            "is_planned": ("To distinguish planned events from retrospective recording.")
+        }
 
 
 class EngagementEffortCreateForm(forms.ModelForm):
diff --git a/engagements/templates/engagements/engagement_effort_create.html b/engagements/templates/engagements/engagement_effort_create.html
index 86deb2c..09a357a 100644
--- a/engagements/templates/engagements/engagement_effort_create.html
+++ b/engagements/templates/engagements/engagement_effort_create.html
@@ -5,14 +5,14 @@
 
 {% block content %}
 
-    <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="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 relative">
+            <a href="{{ request.META.HTTP_REFERER }}" class="absolute top-2 right-2">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </a>
+            <h2 class="text-2xl font-bold mb-6">Register <span class="underline decoration-blue-500 decoration-2">{{ etype|lower }}</span> time</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"
@@ -21,7 +21,12 @@
                     <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 class="flex items-end flex-wrap">
+                    <p class="underline decoration-2 font-semibold decoration-pink-500 mr-2">{{ engagement.external_party }} </p>
+                    <p class="font-normal">
+                        ({{ engagement.engagement_type.name|title }})
+                    </p>
+                </div>
             </div>
 
             <div class="flex items-end mb-6">
@@ -30,13 +35,23 @@
                     <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>
+                <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>
+
+            <div class="bg-blue-50 border border-blue-200 rounded-md p-4 mb-6">
+                <p class="text-sm text-blue-800">
+                    Please fill out the form below to log your <strong>{{ etype|lower }}</strong> effort for this engagement. 
+                    Make sure to provide accurate information for proper tracking and reporting.
+                </p>
+                <hr class="my-2">
+                <p><a class="text-sm font-bold underline text-blue-800" href="#">Help</a></p>
             </div>
 
             <form method="post" class="space-y-6">
@@ -44,7 +59,7 @@
                 {% 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">
+                            <label for="{{ field.id_for_label }}" class="block text-sm font-bold text-gray-700 mb-2">
                                 {{ field.label }}
                             </label>
                         </div>
@@ -55,7 +70,14 @@
                             {% endfor %}
                         </div>
                         {% if field.help_text %}
-                            <p class="mt-2 text-sm text-gray-500">{{ field.help_text }}</p>
+                            <div class="flex items-end mb-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                     stroke-width="1.0" stroke="currentColor" class="size-4 text-gray-500 mr-2">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                          d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/>
+                                </svg>
+                                <p class="mt-2 text-xs text-gray-500">{{ field.help_text }}</p>
+                            </div>
                         {% endif %}
                     </div>
                 {% endfor %}