diff options
| -rw-r--r-- | core/static/css/output.css | 25 | ||||
| -rw-r--r-- | engagements/templates/engagements/engagement_effort_create.html | 86 |
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 %} |