Andrey Smakotin
d9903cd721
Изменения:
- ProductCreateView/UpdateView теперь показывают warnings для предупреждений о лимите фото
- Разделение сообщений: error (красный) vs warning (желтый)
- Улучшен components/messages.html:
* Добавлены иконки для каждого типа сообщения
* Bootstrap Icons интеграция
* Кастомные цвета для alerts
* Лучший visual feedback для пользователя
Теперь пользователи видят понятные сообщения везде на сайте!
🤖 Generated with Claude Code
66 lines
2.0 KiB
HTML
66 lines
2.0 KiB
HTML
<!-- Компонент для отображения Django Messages -->
|
|
<!-- Использование: include 'components/messages.html' -->
|
|
{% if messages %}
|
|
<div class="container mt-3">
|
|
{% for message in messages %}
|
|
<div class="alert alert-{{ message.tags }} alert-dismissible fade show d-flex align-items-start" role="alert">
|
|
<!-- Иконка в зависимости от типа сообщения -->
|
|
<div class="me-2" style="font-size: 1.3rem; margin-top: 2px;">
|
|
{% if message.tags == 'success' %}
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
{% elif message.tags == 'error' %}
|
|
<i class="bi bi-exclamation-triangle-fill"></i>
|
|
{% elif message.tags == 'warning' %}
|
|
<i class="bi bi-exclamation-circle-fill"></i>
|
|
{% else %}
|
|
<i class="bi bi-info-circle-fill"></i>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
{{ message }}
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Закрыть"></button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<style>
|
|
/* Кастомные цвета для alerts */
|
|
.alert-success {
|
|
background-color: #d4edda;
|
|
border-color: #c3e6cb;
|
|
color: #155724;
|
|
}
|
|
.alert-success .bi {
|
|
color: #28a745;
|
|
}
|
|
|
|
.alert-error {
|
|
background-color: #f8d7da;
|
|
border-color: #f5c6cb;
|
|
color: #721c24;
|
|
}
|
|
.alert-error .bi {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.alert-warning {
|
|
background-color: #fff3cd;
|
|
border-color: #ffeaa7;
|
|
color: #856404;
|
|
}
|
|
.alert-warning .bi {
|
|
color: #ffc107;
|
|
}
|
|
|
|
.alert-info {
|
|
background-color: #d1ecf1;
|
|
border-color: #bee5eb;
|
|
color: #0c5460;
|
|
}
|
|
.alert-info .bi {
|
|
color: #17a2b8;
|
|
}
|
|
</style>
|
|
{% endif %}
|