diff options
| -rw-r--r-- | core/static/css/output.css | 173 | ||||
| -rw-r--r-- | engagements/forms.py | 1 | ||||
| -rw-r--r-- | engagements/templates/engagements/engagement_form.html | 114 |
3 files changed, 91 insertions, 197 deletions
diff --git a/core/static/css/output.css b/core/static/css/output.css index 1be34cb..67f0dc9 100644 --- a/core/static/css/output.css +++ b/core/static/css/output.css @@ -875,22 +875,6 @@ html { } } -.checkbox { - flex-shrink: 0; - --chkbg: var(--fallback-bc,oklch(var(--bc)/1)); - --chkfg: var(--fallback-b1,oklch(var(--b1)/1)); - height: 1.5rem; - width: 1.5rem; - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: var(--rounded-btn, 0.5rem); - border-width: 1px; - border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); - --tw-border-opacity: 0.2; -} - .label { display: flex; -webkit-user-select: none; @@ -947,40 +931,6 @@ html { align-items: center; } -.select { - display: inline-flex; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - height: 3rem; - min-height: 3rem; - padding-inline-start: 1rem; - padding-inline-end: 2.5rem; - font-size: 0.875rem; - line-height: 1.25rem; - line-height: 2; - border-radius: var(--rounded-btn, 0.5rem); - border-width: 1px; - border-color: transparent; - --tw-bg-opacity: 1; - background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); - background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), - linear-gradient(135deg, currentColor 50%, transparent 50%); - background-position: calc(100% - 20px) calc(1px + 50%), - calc(100% - 16.1px) calc(1px + 50%); - background-size: 4px 4px, - 4px 4px; - background-repeat: no-repeat; -} - -.select[multiple] { - height: auto; -} - .table { position: relative; width: 100%; @@ -1063,54 +1013,6 @@ html { } } -.checkbox:focus { - box-shadow: none; -} - -.checkbox:focus-visible { - outline-style: solid; - outline-width: 2px; - outline-offset: 2px; - outline-color: var(--fallback-bc,oklch(var(--bc)/1)); -} - -.checkbox:disabled { - border-width: 0px; - cursor: not-allowed; - border-color: transparent; - --tw-bg-opacity: 1; - background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); - opacity: 0.2; -} - -.checkbox:checked, - .checkbox[aria-checked="true"] { - background-repeat: no-repeat; - animation: checkmark var(--animation-input, 0.2s) ease-out; - background-color: var(--chkbg); - background-image: linear-gradient(-45deg, transparent 65%, var(--chkbg) 65.99%), - linear-gradient(45deg, transparent 75%, var(--chkbg) 75.99%), - linear-gradient(-45deg, var(--chkbg) 40%, transparent 40.99%), - linear-gradient( - 45deg, - var(--chkbg) 30%, - var(--chkfg) 30.99%, - var(--chkfg) 40%, - transparent 40.99% - ), - linear-gradient(-45deg, var(--chkfg) 50%, var(--chkbg) 50.99%); -} - -.checkbox:indeterminate { - --tw-bg-opacity: 1; - background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); - background-repeat: no-repeat; - animation: checkmark var(--animation-input, 0.2s) ease-out; - background-image: linear-gradient(90deg, transparent 80%, var(--chkbg) 80%), - linear-gradient(-90deg, transparent 80%, var(--chkbg) 80%), - linear-gradient(0deg, var(--chkbg) 43%, var(--chkfg) 43%, var(--chkfg) 57%, var(--chkbg) 57%); -} - @keyframes checkmark { 0% { background-position-y: 5px; @@ -1288,50 +1190,6 @@ html { } } -.select:focus { - box-shadow: none; - border-color: var(--fallback-bc,oklch(var(--bc)/0.2)); - outline-style: solid; - outline-width: 2px; - outline-offset: 2px; - outline-color: var(--fallback-bc,oklch(var(--bc)/0.2)); -} - -.select-disabled, - .select:disabled, - .select[disabled] { - cursor: not-allowed; - --tw-border-opacity: 1; - border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); - --tw-bg-opacity: 1; - background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); - color: var(--fallback-bc,oklch(var(--bc)/0.4)); -} - -.select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder { - color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); - --tw-placeholder-opacity: 0.2; -} - -.select-disabled::placeholder, - .select:disabled::placeholder, - .select[disabled]::placeholder { - color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); - --tw-placeholder-opacity: 0.2; -} - -.select-multiple, - .select[multiple], - .select[size].select:not([size="1"]) { - background-image: none; - padding-right: 1rem; -} - -[dir="rtl"] .select { - background-position: calc(0% + 12px) calc(1px + 50%), - calc(0% + 16px) calc(1px + 50%); -} - @keyframes skeleton { from { background-position: 150%; @@ -1402,6 +1260,11 @@ html { margin-right: auto; } +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + .my-8 { margin-top: 2rem; margin-bottom: 2rem; @@ -1479,16 +1342,12 @@ html { display: grid; } -.h-4 { - height: 1rem; -} - .min-h-full { min-height: 100%; } -.w-4 { - width: 1rem; +.w-2\/3 { + width: 66.666667%; } .w-full { @@ -1772,6 +1631,10 @@ html { padding-bottom: 2rem; } +.pt-1 { + padding-top: 0.25rem; +} + .pt-6 { padding-top: 1.5rem; } @@ -1895,6 +1758,11 @@ html { color: rgb(79 70 229 / var(--tw-text-opacity)); } +.text-red-500 { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity)); +} + .text-red-600 { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity)); @@ -1992,11 +1860,6 @@ html { text-decoration-line: underline; } -.focus\:border-blue-500:focus { - --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity)); -} - .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; @@ -2065,6 +1928,10 @@ html { border-radius: 0.5rem; } + .sm\:p-2 { + padding: 0.5rem; + } + .sm\:p-6 { padding: 1.5rem; } diff --git a/engagements/forms.py b/engagements/forms.py index a1c3c44..e3ac85a 100644 --- a/engagements/forms.py +++ b/engagements/forms.py @@ -186,6 +186,7 @@ class EngagementCreateForm(forms.ModelForm): "proposed_start_date", "proposed_end_date", "engagement_type", + "external_party", "officers", ] labels = { diff --git a/engagements/templates/engagements/engagement_form.html b/engagements/templates/engagements/engagement_form.html index 3dfe249..a0cdea2 100644 --- a/engagements/templates/engagements/engagement_form.html +++ b/engagements/templates/engagements/engagement_form.html @@ -1,60 +1,87 @@ {% extends "core/base.html" %} {% load static %} +{% load widget_tweaks %} {% block title %}Create new engagement{% endblock title %} {% block content %} -<div class="container mx-auto px-4 py-8"> - <div class="bg-white shadow-md rounded-lg overflow-hidden"> - <header class="bg-blue-100 p-4"> - <h2 class="text-3xl font-bold text-center">{{ title }}</h2> - </header> - <div class="p-6"> - <div class="mb-8"> - <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg"> - <h4 class="text-lg font-semibold mb-2">Step 1</h4> - <p class="mb-4">To roughly plan out future events, you provide the minimal details here: <strong>start date</strong>, <strong>end date</strong> (optional), the <strong>type of Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external site</strong> or operation and finally the <strong>inspectors</strong> who are carrying out the work.</p> - <h4 class="text-lg font-semibold mb-2">Step 2</h4> - <p>So that we can track the finer details involved with an Assessment or Inspection, each Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to these components. In addition, each component can be associated with <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the overarching Engagement using this form, you will have the opportunity to add components.</p> + <div class="container mx-auto w-2/3 px-4 py-8"> + <div class="bg-white shadow-md rounded-lg overflow-hidden"> + <header class="bg-blue-100 p-4"> + <h2 class="text-3xl font-bold text-center">{{ title }}</h2> + </header> + <div class="p-6"> + <div class="mb-8"> + <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg"> + <h4 class="text-lg font-semibold mb-2">Step 1</h4> + <p class="mb-4">To roughly plan out future events, you provide the minimal details here: + <strong>start date</strong>, <strong>end date</strong> (optional), the <strong>type of + Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external + site</strong> or operation and finally the <strong>inspectors</strong> who are carrying + out the work.</p> + <h4 class="text-lg font-semibold mb-2">Step 2</h4> + <p>So that we can track the finer details involved with an Assessment or Inspection, each + Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, + <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to + these components. In addition, each component can be associated with + <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the + overarching Engagement using this form, you will have the opportunity to add components.</p> + </div> </div> - </div> - <div class="mt-8"> - <h4 class="text-xl font-semibold mb-4">Enter main details:</h4> - <div class="bg-white shadow overflow-hidden sm:rounded-lg"> - <div class="px-4 py-5 sm:p-6"> + <div class="mt-8 mx-auto border p-6 bg-white shadow-md rounded-lg"> + <h4 class="text-xl font-semibold mb-1">Enter main details:</h4> + <div class="px-2 pt-1 sm:p-2"> <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-1"> - {{ field.label }} - </label> - {% if field.field.widget.input_type == 'checkbox' %} - <div class="flex items-center"> - <input type="checkbox" name="{{ field.name }}" id="{{ field.id_for_label }}" {% if field.value %}checked{% endif %} class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> - <span class="ml-2 text-gray-700">{{ field.help_text|safe }}</span> - </div> - {% elif field.field.widget.input_type == 'select' %} - <select name="{{ field.name }}" id="{{ field.id_for_label }}" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> - {% for choice in field.field.choices %} - <option value="{{ choice.0 }}" {% if choice.0 == field.value %}selected{% endif %}>{{ choice.1 }}</option> - {% endfor %} - </select> - {% else %} - <input type="{{ field.field.widget.input_type }}" name="{{ field.name }}" id="{{ field.id_for_label }}" value="{{ field.value|default:'' }}" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"> - {% endif %} - {% if field.help_text and field.field.widget.input_type != 'checkbox' %} - <p class="mt-2 text-sm text-gray-500">{{ field.help_text|safe }}</p> - {% endif %} - {% for error in field.errors %} - <p class="mt-2 text-sm text-red-600">{{ error }}</p> + <div> + {{ form.external_party.label_tag }} + <div class="my-2"> + {% render_field form.external_party 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 form.external_party.errors %} + <p class="text-red-500 text-sm">{{ error }}</p> + {% endfor %} + </div> + </div> + + <div> + {{ form.proposed_start_date.label_tag }} + <div class="my-2"> + {% render_field form.proposed_start_date 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" %} + </div> + </div> + + <div> + {{ form.proposed_end_date.label_tag }} + <div class="my-2"> + {% render_field form.proposed_end_date 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" %} + </div> + </div> + + <div> + {{ form.engagement_type.label_tag }} + <div class="my-2"> + {% render_field form.engagement_type 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 form.engagement_type.errors %} + <p class="text-red-500 text-sm">{{ error }}</p> {% endfor %} </div> - {% endfor %} + </div> + + <div> + {{ form.officers.label_tag }} + <div class="my-2"> + {% render_field form.officers 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 form.officers.errors %} + <p class="text-red-500 text-sm">{{ error }}</p> + {% endfor %} + </div> + </div> + <div> - <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> + <button type="submit" + class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> Save </button> </div> @@ -64,5 +91,4 @@ </div> </div> </div> -</div> {% endblock content %} |