sankalp
0537ea5e5e
- Add custom border, background, and spacing utilities to base template - Enhance message notification styling and layout - Update delete modal button appearance and behavior - Refine comment card component with Tailwind classes and responsive behavior - Adjust sidebar responsiveness for mobile view
39 lines
2.4 KiB
HTML
39 lines
2.4 KiB
HTML
<input type="checkbox" id="{{ modal_id }}" class="hidden delete-modal-toggle" />
|
|
<div class="delete-modal-container fixed inset-0 z-50 hidden items-center justify-center" id="{{ modal_id }}-container">
|
|
<div class="fixed inset-0 bg-black/20" onclick="closeDeleteModal('{{ modal_id }}')"></div>
|
|
<div class="relative bg-white rounded-xl max-w-sm w-full mx-4 border border-subtle p-6 text-center">
|
|
<div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-3">
|
|
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-primary mb-1">{{ title|default:"Confirm Delete" }}</h3>
|
|
<p class="text-sm text-tertiary mb-5">{{ message|default:"Are you sure you want to delete this item? This action cannot be undone." }}</p>
|
|
<form method="post" action="{{ delete_url }}">
|
|
{% csrf_token %}
|
|
<div class="flex gap-2.5 justify-center">
|
|
<button type="submit" class="px-4 py-2 rounded-lg bg-red-600 text-white text-sm font-medium hover:bg-red-700 transition-colors cursor-pointer">Delete</button>
|
|
<button type="button" onclick="closeDeleteModal('{{ modal_id }}')" class="px-4 py-2 rounded-lg border border-soft text-sm font-medium text-secondary hover:bg-hover transition-colors cursor-pointer">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var checkbox = document.getElementById('{{ modal_id }}');
|
|
if (checkbox) {
|
|
checkbox.addEventListener('change', function() {
|
|
var container = document.getElementById('{{ modal_id }}-container');
|
|
if (container) {
|
|
container.style.display = this.checked ? 'flex' : 'none';
|
|
}
|
|
});
|
|
}
|
|
});
|
|
function closeDeleteModal(id) {
|
|
var checkbox = document.getElementById(id);
|
|
if (checkbox) checkbox.checked = false;
|
|
var container = document.getElementById(id + '-container');
|
|
if (container) container.style.display = 'none';
|
|
}
|
|
</script> |