Игорь Надеин
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
234 lines
10 KiB
HTML
234 lines
10 KiB
HTML
{% load static %}
|
|
{% for post in items %}
|
|
{% firstof post.id post.pk as post_id %}
|
|
<article class="feed-post"
|
|
id="post-{{ post_id }}"
|
|
data-post-card
|
|
data-searchtitle="{{ post.title|default:'Без названия'|escape }}"
|
|
data-searchauthor="{% with a=post.author %}{% if a %}{% firstof a.full_name a.get_full_name a.first_name a.last_name a.username a.email 'Автор' %}{% else %}Автор{% endif %}{% endwith %}"
|
|
data-searchbody="{{ post.body|striptags|truncatewords:50|default:'Без содержания'|escape }}">
|
|
<header class="card-header">
|
|
<div class="card-icon d-flex align-items-center justify-content-center">
|
|
{% with a=post.author %}
|
|
{% if a %}
|
|
{% firstof 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">
|
|
{% with a=post.author %}
|
|
{% firstof a.id post.author_id as author_id %}
|
|
{% if author_id %}
|
|
<a href="{% url 'employees:employee_detail' author_id %}" class="text-decoration-none">
|
|
{% 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 %}
|
|
</a>
|
|
{% else %}
|
|
Автор не указан
|
|
{% endif %}
|
|
{% endwith %}
|
|
</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">
|
|
{% if post_id %}<a href="#" data-post-link data-post-id="{{ post_id }}" class="stretched-link"></a>{% endif %}
|
|
<img src="{{ img_url }}" alt="{{ post.title|default:'Публикация' }}" loading="lazy" decoding="async">
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
<div class="card-body">
|
|
<h3 class="feed-title mb-1">
|
|
{% if post_id %}
|
|
<a href="#" data-post-link data-post-id="{{ post_id }}" class="text-decoration-none stretched-link">
|
|
{{ post.title|default:"Без названия" }}
|
|
</a>
|
|
{% else %}
|
|
{{ post.title|default:"Без названия" }}
|
|
{% endif %}
|
|
</h3>
|
|
{% with body=post.body|default_if_none:"" %}
|
|
{% if body|wordcount > 42 %}
|
|
<div class="feed-text mb-1" id="excerpt-{{ post_id }}">
|
|
{{ body|truncatewords:42 }}
|
|
<button class="button p-0 mt-1 small text-secondary text-decoration-none bg-transparent border-0 readmore-toggle"
|
|
id="more-{{ post_id }}"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#full-{{ post_id }}"
|
|
aria-controls="full-{{ post_id }}"
|
|
aria-expanded="false">
|
|
<span class="txt-more">Подробнее</span>
|
|
</button>
|
|
</div>
|
|
<div id="full-{{ post_id }}" class="collapse" data-excerpt="#excerpt-{{ post_id }}" data-button="#more-{{ post_id }}">
|
|
<div class="feed-full mt-1">
|
|
{{ body|linebreaksbr }}
|
|
<button class="button p-0 mt-1 small text-secondary text-decoration-none bg-transparent readmore-toggle"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#full-{{ post_id }}"
|
|
aria-controls="full-{{ post_id }}"
|
|
aria-expanded="false">
|
|
<span class="txt-more">Скрыть</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="feed-full">{{ body|linebreaksbr }}</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
</div>
|
|
<footer class="card-actions border-0">
|
|
{% if post_id %}
|
|
{% if user.is_authenticated %}
|
|
<button class="button button--ghost d-inline-flex align-items-center gap-1"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#ccoll-{{ post_id }}"
|
|
aria-controls="ccoll-{{ post_id }}"
|
|
aria-expanded="false">
|
|
<i class="bi-chat-dots"></i>
|
|
<span class="txt-open">{{ post.comments_count|default:0 }}</span>
|
|
<span class="txt-close">Скрыть</span>
|
|
</button>
|
|
{% else %}
|
|
<a href="#" data-post-link data-post-id="{{ post_id }}" class="button button--ghost d-inline-flex align-items-center gap-1">
|
|
<i class="bi-chat-dots"></i><span>{{ post.comments_count|default:0 }}</span>
|
|
</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% if post.attachment %}
|
|
{% firstof post.attachment.url post.attachment as att_url %}
|
|
{% if att_url %}
|
|
<a href="{{ att_url }}" class="button button--ghost d-inline-flex align-items-center gap-1">
|
|
<i class="bi-paperclip"></i><span>Вложение</span>
|
|
</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
<span class="ms-auto"></span>
|
|
{% if user.is_authenticated and post_id %}
|
|
<button type="button" class="button button--ghost d-inline-flex align-items-center gap-1 like-btn-card" data-post-id="{{ post_id }}" data-liked="{% if post.is_liked %}true{% else %}false{% endif %}">
|
|
<i class="bi-heart{% if post.is_liked %}-fill text-danger{% endif %}"></i>
|
|
<span class="like-count">{{ post.likes_count|default:0 }}</span>
|
|
</button>
|
|
{% else %}
|
|
<span class="button button--ghost d-inline-flex align-items-center gap-1">
|
|
<i class="bi-heart"></i>
|
|
<span>{{ post.likes_count|default:0 }}</span>
|
|
</span>
|
|
{% endif %}
|
|
</footer>
|
|
|
|
{# ===== СКЛАДНОЙ БЛОК КОММЕНТАРИЕВ ===== #}
|
|
<div id="ccoll-{{ post_id }}" class="collapse">
|
|
{% if post.comments_count %}
|
|
<div class="px-3 pt-2">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<a class="small text-primary text-decoration-none"
|
|
href="#" data-post-link data-post-id="{{ post_id }}">
|
|
Показать все комментарии записи ({{ post.comments_count }})
|
|
</a>
|
|
</div>
|
|
|
|
{% with last=post.last_comment_list|first %}
|
|
{% if last %}
|
|
<div class="comment-item">
|
|
<div class="comment-header">
|
|
{% firstof last.author.id last.author.pk as last_author_id %}
|
|
<a href="{% url 'employees:employee_detail' last_author_id %}"
|
|
class="comment-author">
|
|
{% firstof last.author.get_full_name last.author.username "Сотрудник" %}
|
|
</a>
|
|
<span class="comment-separator">·</span>
|
|
<time class="comment-date">
|
|
{% firstof last.created_at|date:"d.m.Y H:i" last.created_at %}
|
|
</time>
|
|
</div>
|
|
<div class="comment-body">{{ last.text|truncatechars:220 }}</div>
|
|
</div>
|
|
{% elif post.last_comment %}
|
|
{% with lc=post.last_comment %}
|
|
<div class="comment-item">
|
|
<div class="comment-header">
|
|
{% if lc.author.id %}
|
|
<a href="{% url 'employees:employee_detail' lc.author.id %}"
|
|
class="comment-author">
|
|
{{ lc.author.full_name|default:"Сотрудник" }}
|
|
</a>
|
|
{% else %}
|
|
<span class="comment-author">{{ lc.author.full_name|default:"Сотрудник" }}</span>
|
|
{% endif %}
|
|
<span class="comment-separator">·</span>
|
|
<time class="comment-date">
|
|
{% firstof lc.created_at_display lc.created_at %}
|
|
</time>
|
|
</div>
|
|
<div class="comment-body">{{ lc.text|truncatechars:220 }}</div>
|
|
</div>
|
|
{% endwith %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if user.is_authenticated and post_id %}
|
|
<form class="px-3 pb-3 pt-2 comment-form-quick" data-post-id="{{ post_id }}">
|
|
<div class="message-field message-field--compact">
|
|
<!-- Кнопка выбора эмодзи -->
|
|
<div class="dropdown message-emoji">
|
|
<button type="button" class="button button--ghost btn-emoji message-icon-button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
title="Вставить смайлик">
|
|
<i class="bi-emoji-smile"></i>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-start message-emoji-menu">
|
|
<emoji-picker data-emoji-picker class="chat-emoji-picker"></emoji-picker>
|
|
</div>
|
|
</div>
|
|
<textarea name="text" class="form-control message-input" rows="1" placeholder="Оставить комментарий…" required></textarea>
|
|
<button class="button button--primary message-send" type="submit" title="Отправить"><i class="bi-send"></i></button>
|
|
</div>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</article>
|
|
{% empty %}
|
|
<div class="alert alert-info shadow-sm">Пока нет новостей.</div>
|
|
{% endfor %}
|