mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-21 12:31:09 -05:00
7d745cd517
Integrates django-cotton into the project by adding it to INSTALLED_APPS and pyproject.toml, and refactors base.html to use cotton components for the auth modal and toast container, creating new component files for these elements. Replit-Commit-Author: Agent Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/jGCMVeA
76 lines
3.0 KiB
HTML
76 lines
3.0 KiB
HTML
{% comment %}
|
|
Cotton Toast Container Component
|
|
Converts the existing toast container to use Django Cotton's component system
|
|
{% endcomment %}
|
|
|
|
{% load static %}
|
|
|
|
<!-- Cotton Toast Container Component -->
|
|
<c-vars
|
|
container_classes="{{ container_classes|default:'fixed top-4 right-4 z-50 space-y-2 max-w-sm' }}"
|
|
toast_classes="{{ toast_classes|default:'p-4 rounded-lg shadow-lg border backdrop-blur-sm transition-all duration-300 flex items-start gap-3' }}"
|
|
icon_classes="{{ icon_classes|default:'w-5 h-5 flex-shrink-0 mt-0.5' }}"
|
|
content_classes="{{ content_classes|default:'flex-grow min-w-0' }}"
|
|
close_classes="{{ close_classes|default:'p-1 hover:bg-black/10 rounded transition-colors flex-shrink-0' }}"
|
|
progress_classes="{{ progress_classes|default:'absolute bottom-0 left-0 h-1 bg-current opacity-30 transition-all duration-100 ease-linear' }}"
|
|
/>
|
|
|
|
<div
|
|
x-data="{}"
|
|
x-show="$store.toast.toasts.length > 0"
|
|
x-cloak
|
|
class="{{ container_classes }}"
|
|
>
|
|
<template x-for="toast in $store.toast.toasts" :key="toast.id">
|
|
<div
|
|
x-show="toast.visible"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="transform opacity-0 scale-95 translate-x-full"
|
|
x-transition:enter-end="transform opacity-100 scale-100 translate-x-0"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="transform opacity-100 scale-100 translate-x-0"
|
|
x-transition:leave-end="transform opacity-0 scale-95 translate-x-full"
|
|
class="{{ toast_classes }}"
|
|
:class="{
|
|
'bg-green-50 border-green-200 text-green-800': toast.type === 'success',
|
|
'bg-red-50 border-red-200 text-red-800': toast.type === 'error',
|
|
'bg-blue-50 border-blue-200 text-blue-800': toast.type === 'info',
|
|
'bg-yellow-50 border-yellow-200 text-yellow-800': toast.type === 'warning'
|
|
}"
|
|
>
|
|
<!-- Toast Icon -->
|
|
<div class="{{ icon_classes }}">
|
|
<i
|
|
:class="{
|
|
'fas fa-check-circle text-green-600': toast.type === 'success',
|
|
'fas fa-exclamation-circle text-red-600': toast.type === 'error',
|
|
'fas fa-info-circle text-blue-600': toast.type === 'info',
|
|
'fas fa-exclamation-triangle text-yellow-600': toast.type === 'warning'
|
|
}"
|
|
></i>
|
|
</div>
|
|
|
|
<!-- Toast Content -->
|
|
<div class="{{ content_classes }}">
|
|
<p class="font-medium text-sm" x-text="toast.message"></p>
|
|
<p x-show="toast.description" class="text-xs opacity-90 mt-1" x-text="toast.description"></p>
|
|
</div>
|
|
|
|
<!-- Close Button -->
|
|
<button
|
|
@click="$store.toast.remove(toast.id)"
|
|
class="{{ close_classes }}"
|
|
type="button"
|
|
>
|
|
<i class="fas fa-times w-4 h-4"></i>
|
|
</button>
|
|
|
|
<!-- Progress Bar (if duration is set) -->
|
|
<div
|
|
x-show="toast.duration"
|
|
class="{{ progress_classes }}"
|
|
:style="`width: ${toast.progress}%`"
|
|
></div>
|
|
</div>
|
|
</template>
|
|
</div> |