sankalp
71b700388b
Enhances user experience with dark‑mode detection, responsive layout, and streamlined role selection workflow
47 lines
3.6 KiB
HTML
47 lines
3.6 KiB
HTML
<!-- Edit Epic Modal -->
|
|
<div x-cloak x-show="editEpicOpen" class="fixed inset-0 z-50 flex items-center justify-center">
|
|
<div class="fixed inset-0 bg-black/50" @click="editEpicOpen = false"></div>
|
|
<div class="relative bg-white dark:bg-gray-950 rounded-xl shadow-xl border border-gray-200 dark:border-gray-600 w-full max-w-4xl mx-auto my-auto max-h-[90vh] overflow-y-auto z-10 p-6 md:p-8">
|
|
<div class="px-8 py-5 flex items-center justify-between">
|
|
<h3 class="text-xl font-bold text-gray-900 dark:text-white" x-text="'Edit ' + editEpicData.name">Edit Epic</h3>
|
|
<button @click="editEpicOpen = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
|
|
<i class="fas fa-times text-lg"></i>
|
|
</button>
|
|
</div>
|
|
<form method="post" :action="'/epics/' + editEpicData.id + '/edit/'">
|
|
{% csrf_token %}
|
|
<div class="px-8 pb-6 space-y-5">
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-900 dark:text-gray-300 mb-1.5">Epic Name<span class="text-red-500">*</span></label>
|
|
<input type="text" name="name" x-model="editEpicData.name" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-900 dark:text-gray-300 mb-1.5">Sort Order</label>
|
|
<input type="number" name="sort_order" x-model="editEpicData.sort_order" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<span class="text-xs text-gray-500 dark:text-gray-400 mt-1 block">Lower numbers appear first</span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-900 dark:text-gray-300 mb-1.5">Start Date</label>
|
|
<input type="date" name="start_date" x-model="editEpicData.start_date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-900 dark:text-gray-300 mb-1.5">End Date</label>
|
|
<input type="date" name="end_date" x-model="editEpicData.end_date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-900 dark:text-gray-300 mb-1.5">Description</label>
|
|
{% include "components/rich_text_editor.html" with input_name="description" alpine_model="editEpicData.description" %}
|
|
</div>
|
|
</div>
|
|
<div class="px-8 py-5 flex justify-start gap-3">
|
|
<button type="submit" class="px-5 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors shadow-sm">Save changes</button>
|
|
<button type="button" @click="editEpicOpen = false" class="px-5 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors shadow-sm">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|