Игорь Надеин
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
240 lines
10 KiB
HTML
240 lines
10 KiB
HTML
{% extends 'base.html' %}
|
||
{% load static django_bootstrap5 %}
|
||
|
||
{% block title %}{% firstof post.title "Публикация" %}{% endblock %}
|
||
|
||
{% block content %}
|
||
{% firstof post.id post.pk as post_id %}
|
||
{% firstof post.author.id post.author.pk post.author_id as author_id %}
|
||
{% firstof post.department.id post.department.pk post.department_id as dept_id %}
|
||
|
||
<div class="container">
|
||
<div class="row gx-0">
|
||
<div class="col-12">
|
||
|
||
<!-- Навигация и действия -->
|
||
<div class="d-flex align-items-center gap-2 mb-3">
|
||
{% if post.type == 'company' %}
|
||
<a href="{% url 'feed:feed_list' %}" class="button button--ghost">
|
||
<i class="bi-arrow-left"></i> К ленте
|
||
</a>
|
||
{% elif post.type == 'department' and dept_id %}
|
||
<a href="{% url 'employees:department_detail' dept_id %}" class="button button--ghost">
|
||
<i class="bi-arrow-left"></i> К отделу
|
||
</a>
|
||
{% else %}
|
||
{% if author_id %}
|
||
<a href="{% url 'feed:employee_feed' author_id %}" class="button button--ghost">
|
||
<i class="bi-arrow-left"></i> К публикациям автора
|
||
</a>
|
||
{% else %}
|
||
<a href="{% url 'feed:feed_list' %}" class="button button--ghost">
|
||
<i class="bi-arrow-left"></i> К ленте
|
||
</a>
|
||
{% endif %}
|
||
{% endif %}
|
||
|
||
<span class="small text-secondary ms-auto">
|
||
</span>
|
||
|
||
{# Пин — без скобок в условии #}
|
||
{% if post_id %}
|
||
{% if post.type == 'company' and user.is_staff %}
|
||
<a href="{% url 'feed:pin_post' post_id %}" class="button button--ghost">
|
||
<i class="bi-pin-angle"></i> {% if post.pinned %}Открепить{% else %}Закрепить{% endif %}
|
||
</a>
|
||
{% elif post.type == 'department' and dept_id %}
|
||
{% if user.is_staff %}
|
||
<a href="{% url 'feed:pin_post' post_id %}" class="button button--ghost">
|
||
<i class="bi-pin-angle"></i> {% if post.pinned %}Открепить{% else %}Закрепить{% endif %}
|
||
</a>
|
||
{% elif post.department and post.department.head_id == user.id %}
|
||
<a href="{% url 'feed:pin_post' post_id %}" class="button button--ghost">
|
||
<i class="bi-pin-angle"></i> {% if post.pinned %}Открепить{% else %}Закрепить{% endif %}
|
||
</a>
|
||
{% endif %}
|
||
{% endif %}
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- Карточка поста -->
|
||
<article class="card" data-post-card>
|
||
<header class="card-header">
|
||
<div class="card-icon">
|
||
{% with a=post.author %}
|
||
{% if a %}
|
||
{% firstof a.avatar.url a.avatar as ava_url %}
|
||
{% if ava_url %}
|
||
<img src="{{ ava_url }}" alt="" loading="lazy">
|
||
{% else %}
|
||
<i class="bi-person"></i>
|
||
{% endif %}
|
||
{% else %}
|
||
<i class="bi-person"></i>
|
||
{% endif %}
|
||
{% endwith %}
|
||
</div>
|
||
<div class="card-meta">
|
||
<div class="card-title">
|
||
{% if author_id %}
|
||
<a href="{% url 'employees:employee_detail' author_id %}" class="text-decoration-none">
|
||
{% with a=post.author %}
|
||
{% if a %}
|
||
{% firstof a.full_name a.get_full_name as nm %}
|
||
{% if nm %}{{ nm }}{% else %}
|
||
{% if a.first_name or a.last_name %}
|
||
{{ a.first_name }}{% if a.last_name %} {{ a.last_name }}{% endif %}
|
||
{% else %}
|
||
{% firstof a.username a.email "Сотрудник" %}
|
||
{% endif %}
|
||
{% endif %}
|
||
{% else %}Сотрудник #{{ author_id }}{% endif %}
|
||
{% endwith %}
|
||
</a>
|
||
{% else %}Автор не указан{% endif %}
|
||
</div>
|
||
<div class="card-subtitle">
|
||
{% if post.created_at %}
|
||
{{ post.created_at_display }}
|
||
{% endif %}
|
||
{% if post.type == 'department' %}
|
||
{% firstof post.department.name post.department_name as dept_name %}
|
||
{% if dept_name %} · {{ dept_name }}{% endif %}
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
{% if post.pinned %}
|
||
<span class="feed-pin"><i class="bi-pin-angle"></i> </span>
|
||
{% endif %}
|
||
</header>
|
||
|
||
{% if post.image %}
|
||
{% firstof post.image.url post.image as img_url %}
|
||
{% if img_url %}
|
||
<div class="feed-img">
|
||
<img src="{{ img_url }}" alt="{% firstof post.title 'Публикация' %}" loading="lazy" decoding="async">
|
||
</div>
|
||
{% endif %}
|
||
{% endif %}
|
||
|
||
<div class="card-body">
|
||
<h1 class="feed-title fs-4 mb-2">{% firstof post.title "Без названия" %}</h1>
|
||
<div class="fs-6 lh-base">{{ post.body|linebreaks }}</div>
|
||
|
||
{% if post.attachment %}
|
||
{% firstof post.attachment.url post.attachment as att_url %}
|
||
{% if att_url %}
|
||
<div class="mt-3">
|
||
<a href="{{ att_url }}" target="_blank" class="button button--ghost">
|
||
<i class="bi-paperclip"></i> Вложение
|
||
</a>
|
||
</div>
|
||
{% endif %}
|
||
{% endif %}
|
||
</div>
|
||
|
||
<footer class="card-actions">
|
||
<a href="#comments" class="button button--ghost">
|
||
<i class="bi-chat-dots"></i> Комментарии ({{ comments|length }})
|
||
</a>
|
||
|
||
<span class="ms-auto"></span>
|
||
|
||
{% if user.is_authenticated and post_id %}
|
||
<form method="post" action="{% url 'feed:toggle_like' post_id %}">
|
||
{% csrf_token %}
|
||
<button type="submit"
|
||
class="button button--ghost {% if post.is_liked or is_liked %}is-liked{% endif %}"
|
||
data-like-post="{{ post_id }}"
|
||
data-like-url="{% url 'feed:toggle_like' post_id %}"
|
||
aria-pressed="{% if post.is_liked or is_liked %}true{% else %}false{% endif %}">
|
||
<i class="bi {% if post.is_liked or is_liked %}bi-heart-fill{% else %}bi-heart{% endif %}"></i>
|
||
<span data-like-count>{{ post.likes_count|default:0 }}</span>
|
||
</button>
|
||
</form>
|
||
{% else %}
|
||
<span class="small text-secondary d-inline-flex align-items-center gap-1">
|
||
<i class="bi-heart{% if post.is_liked %}-fill{% endif %}"></i>
|
||
<span data-like-count>{{ post.likes_count|default:0 }}</span>
|
||
</span>
|
||
{% endif %}
|
||
</footer>
|
||
</article>
|
||
|
||
<!-- Комментарии -->
|
||
<section id="comments" class="mt-4">
|
||
<div class="comments-section-header">
|
||
<i class="bi-chat-dots comments-icon"></i>
|
||
<h3 class="comments-title">Комментарии</h3>
|
||
<span class="comments-count">({{ comments|length }})</span>
|
||
</div>
|
||
|
||
{% if comments %}
|
||
<div class="comments-list">
|
||
{% for c in comments %}
|
||
{% firstof c.id c.pk as cid %}
|
||
{% firstof c.author.id c.author.pk c.author_id as c_author_id %}
|
||
<div id="c{{ cid }}" class="comment-item">
|
||
<div class="comment-header">
|
||
{% if c_author_id %}
|
||
<a href="{% url 'employees:employee_detail' c_author_id %}" class="comment-author">
|
||
{% with a=c.author %}
|
||
{% if a %}
|
||
{% firstof a.full_name a.get_full_name as nm %}
|
||
{% if nm %}{{ nm }}{% else %}
|
||
{% if a.first_name or a.last_name %}
|
||
{{ a.first_name }}{% if a.last_name %} {{ a.last_name }}{% endif %}
|
||
{% else %}
|
||
{% firstof a.username a.email "Сотрудник" %}
|
||
{% endif %}
|
||
{% endif %}
|
||
{% else %}Сотрудник #{{ c_author_id }}{% endif %}
|
||
{% endwith %}
|
||
</a>
|
||
{% else %}<span class="comment-author">Автор</span>{% endif %}
|
||
<span class="comment-separator">·</span>
|
||
<time class="comment-date">
|
||
{% if c.created_at %}
|
||
{{ c.created_at_display }}
|
||
{% endif %}
|
||
</time>
|
||
</div>
|
||
<div class="comment-body">{{ c.text|linebreaks }}</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<div class="alert alert-info shadow-sm rounded-3">Пока нет комментариев.</div>
|
||
{% endif %}
|
||
</section>
|
||
|
||
<!-- Форма добавления комментария -->
|
||
{% if user.is_authenticated and post_id %}
|
||
<div class="card mt-3">
|
||
<div class="card-body">
|
||
<h6 class="mb-2">Оставить комментарий</h6>
|
||
<form method="post" action="">
|
||
{% csrf_token %}
|
||
<div class="message-field">
|
||
<textarea name="text" class="form-control message-input" rows="2" placeholder="Напишите комментарий…"></textarea>
|
||
<button class="button button--primary message-send" type="submit">
|
||
<i class="bi-send"></i>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
{% else %}
|
||
<div class="text-center mt-3">
|
||
<a class="button button--primary" href="{% url 'auth_front:login' %}?next={{ request.path|urlencode }}">
|
||
Войдите, чтобы комментировать
|
||
</a>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div class="mb-5"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|