Игорь Надеин
8159c6f472
### Custom Button System Implementation Created modern button system to replace Bootstrap buttons: - ✅ Created core/_buttons-custom.scss (550+ lines) - ✅ CSS Custom Properties for easy customization - ✅ 8 color variants (primary, secondary, success, danger, warning, info, light, dark) - ✅ Outline and Ghost variants - ✅ 4 sizes (sm, md, lg, xl) - ✅ Special variants (block, icon, circle, link) - ✅ Loading state with spinner animation - ✅ Button groups support - ✅ Modern animations (hover, active, focus) ### Template Migration Migrated 65 HTML templates using automated Python script: - Replaced .btn → .button - Replaced .btn-primary → .button--primary - Replaced .btn-outline-* → .button--outline button--* - Replaced size classes .btn-sm → .button--sm - Total changes: 354 → 347 button usages ### Results - app.css: 137 KB → 148 KB (+11 KB for custom buttons) - Templates changed: 65 files - Remaining .btn classes: 133 (mostly btn-close for modals) - New .button classes: 347 ### Backward Compatibility Kept @extend rules in _buttons-custom.scss for gradual migration. Can be removed after complete migration. Next step: Remove Bootstrap button imports from custom-bootstrap.scss
98 lines
3.7 KiB
HTML
98 lines
3.7 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static django_bootstrap5 %}
|
|
|
|
{% block title %}
|
|
{% if is_update %}Редактировать{% else %}Создать{% endif %} публикацию
|
|
{% endblock %}
|
|
|
|
{% block extra_css %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Header (без кнопки Отмена) -->
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<i class="bi-megaphone fs-3 text-primary"></i>
|
|
<h2 class="mb-0">
|
|
{% if is_update %}Редактировать{% else %}Создать{% endif %} публикацию
|
|
</h2>
|
|
{% if context_type == 'department' and department %}
|
|
<span class="badge bg-secondary">Отдел: {{ department.name }}</span>
|
|
{% elif context_type == 'company' %}
|
|
<span class="badge bg-secondary">Компания</span>
|
|
{% elif context_type == 'employee' %}
|
|
<span class="badge bg-secondary">Личная публикация</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<form method="post" enctype="multipart/form-data" class="card shadow-sm border-0">
|
|
<div class="card-body">
|
|
{% csrf_token %}
|
|
|
|
<div class="row g-4">
|
|
<div class="col-lg-8">
|
|
{% if form.title %}{% bootstrap_field form.title %}{% endif %}
|
|
{% if form.body %}{% bootstrap_field form.body %}{% endif %}
|
|
{% if form.type %}{{ form.type }}{% endif %}
|
|
{% if form.department %}{% bootstrap_field form.department %}{% endif %}
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<div class="border rounded-3 p-3">
|
|
<div class="mb-3">
|
|
<div class="fw-semibold mb-2">Изображение</div>
|
|
{% if form.instance.pk and form.instance.image %}
|
|
<div class="mb-2">
|
|
<img src="{{ form.instance.image.url }}" alt="Превью" class="img-fluid rounded" id="currentImagePreview">
|
|
</div>
|
|
{% endif %}
|
|
{% if form.image %}{% bootstrap_field form.image %}{% endif %}
|
|
<img id="newImagePreview" class="img-fluid rounded d-none" alt="Превью выбранного изображения">
|
|
</div>
|
|
|
|
<div>
|
|
<div class="fw-semibold mb-2">Вложение</div>
|
|
{% if form.instance.pk and form.instance.attachment %}
|
|
<p class="mb-2">
|
|
Текущее вложение:
|
|
<a href="{{ form.instance.attachment.url }}" target="_blank">
|
|
{{ form.instance.attachment.name|cut:"feed/attachments/" }}
|
|
</a>
|
|
</p>
|
|
{% endif %}
|
|
{% if form.attachment %}{% bootstrap_field form.attachment %}{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions: одна Отмена -->
|
|
<div class="mt-4 d-flex align-items-center gap-2">
|
|
<button type="submit" class="button button--success">
|
|
<i class="bi-check2"></i> Сохранить
|
|
</button>
|
|
|
|
{% if cancel_url %}
|
|
<a href="{{ cancel_url }}" class="button button--outline button--secondary">Отмена</a>
|
|
{% else %}
|
|
<a href="javascript:history.back()" class="button button--outline button--secondary">Отмена</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { initImagePreview } from "{% static 'js/components/imagePreviewHandler.js' %}";
|
|
|
|
// Превью изображения
|
|
initImagePreview({
|
|
inputId: 'id_image',
|
|
previewId: 'newImagePreview',
|
|
currentPreviewId: 'currentImagePreview'
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|