From 35dbc2492d5f496883b5bf3a8240a078933e8666 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=98=D0=B3=D0=BE=D1=80=D1=8C=20=D0=9D=D0=B0=D0=B4=D0=B5?= =?UTF-8?q?=D0=B8=D0=BD?= Date: Fri, 5 Dec 2025 10:45:36 +0300 Subject: [PATCH] =?UTF-8?q?fix:=20=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D1=83=D0=BA=D1=82?= =?UTF-8?q?=D1=83=D1=80=D0=B0=20=D1=84=D1=83=D1=82=D0=B5=D1=80=D0=B0=20?= =?UTF-8?q?=D0=B8=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BE=D0=BA=20=D0=B2=20=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D1=82=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Изменен класс футера на card-actions border-0 - Кнопки имеют правильный класс btn btn-ghost - Лайк справа через ms-auto spacer - Кнопка комментариев работает через collapse - Добавлен collapse блок для комментариев - Убрано подчеркивание кнопок --- backend/static/js/components/feedList.js | 122 ++++++++++++++++++----- 1 file changed, 96 insertions(+), 26 deletions(-) diff --git a/backend/static/js/components/feedList.js b/backend/static/js/components/feedList.js index 8dfbb807..4d4ed581 100644 --- a/backend/static/js/components/feedList.js +++ b/backend/static/js/components/feedList.js @@ -137,6 +137,12 @@ export class FeedList { const footer = this.createPostFooter(post); article.appendChild(footer); + // Collapse block for comments (пустой пока) + if (post.comments_count > 0) { + const collapseDiv = this.createCommentsCollapse(post); + article.appendChild(collapseDiv); + } + return article; } @@ -276,46 +282,110 @@ export class FeedList { */ createPostFooter(post) { const footer = document.createElement('footer'); - footer.className = 'feed-ft'; + footer.className = 'card-actions border-0'; - const statsDiv = document.createElement('div'); - statsDiv.className = 'feed-stats'; - - // Likes - const likeBtn = document.createElement('button'); - likeBtn.className = 'btn btn-link p-0'; - likeBtn.dataset.action = 'like'; - likeBtn.dataset.postId = post.id; - - const likeIcon = document.createElement('i'); - likeIcon.className = post.is_liked ? 'bi-heart-fill text-danger' : 'bi-heart'; - - likeBtn.appendChild(likeIcon); - likeBtn.appendChild(document.createTextNode(` ${post.likes_count || 0}`)); - - statsDiv.appendChild(likeBtn); - - // Comments + // Comments button (collapse toggle) if (post.comments_count > 0) { const commentBtn = document.createElement('button'); - commentBtn.className = 'btn btn-link p-0 ms-3'; - commentBtn.dataset.postLink = ''; - commentBtn.dataset.postId = post.id; + commentBtn.className = 'btn btn-ghost d-inline-flex align-items-center gap-1'; + commentBtn.type = 'button'; + commentBtn.dataset.bsToggle = 'collapse'; + commentBtn.dataset.bsTarget = `#ccoll-${post.id}`; + commentBtn.setAttribute('aria-controls', `ccoll-${post.id}`); + commentBtn.setAttribute('aria-expanded', 'false'); const commentIcon = document.createElement('i'); commentIcon.className = 'bi-chat-dots'; - commentBtn.appendChild(commentIcon); - commentBtn.appendChild(document.createTextNode(` ${post.comments_count}`)); + const commentCount = document.createElement('span'); + commentCount.className = 'txt-open'; + commentCount.textContent = post.comments_count || 0; - statsDiv.appendChild(commentBtn); + const hideText = document.createElement('span'); + hideText.className = 'txt-close'; + hideText.textContent = 'Скрыть'; + + commentBtn.appendChild(commentIcon); + commentBtn.appendChild(commentCount); + commentBtn.appendChild(hideText); + + footer.appendChild(commentBtn); } - footer.appendChild(statsDiv); + // Attachment button + if (post.attachment) { + const attachBtn = document.createElement('a'); + attachBtn.href = post.attachment; + attachBtn.className = 'btn btn-ghost d-inline-flex align-items-center gap-1'; + + const attachIcon = document.createElement('i'); + attachIcon.className = 'bi-paperclip'; + + const attachText = document.createElement('span'); + attachText.textContent = 'Вложение'; + + attachBtn.appendChild(attachIcon); + attachBtn.appendChild(attachText); + + footer.appendChild(attachBtn); + } + + // Spacer - pushes like button to the right + const spacer = document.createElement('span'); + spacer.className = 'ms-auto'; + footer.appendChild(spacer); + + // Like button - на правой стороне + const likeBtn = document.createElement('button'); + likeBtn.type = 'button'; + likeBtn.className = 'btn btn-ghost d-inline-flex align-items-center gap-1 like-btn-card'; + likeBtn.dataset.postId = post.id; + likeBtn.dataset.liked = post.is_liked ? 'true' : 'false'; + + const likeIcon = document.createElement('i'); + likeIcon.className = post.is_liked ? 'bi-heart-fill text-danger' : 'bi-heart'; + + const likeCount = document.createElement('span'); + likeCount.className = 'like-count'; + likeCount.textContent = post.likes_count || 0; + + likeBtn.appendChild(likeIcon); + likeBtn.appendChild(likeCount); + + footer.appendChild(likeBtn); return footer; } + /** + * Создание collapse блока с комментариями + */ + createCommentsCollapse(post) { + const collapseDiv = document.createElement('div'); + collapseDiv.id = `ccoll-${post.id}`; + collapseDiv.className = 'collapse'; + + // Заглушка - показываем кнопку "Показать все комментарии" + const contentDiv = document.createElement('div'); + contentDiv.className = 'px-3 pt-2'; + + const linkContainer = document.createElement('div'); + linkContainer.className = 'd-flex justify-content-between align-items-center mb-2'; + + const showAllLink = document.createElement('a'); + showAllLink.className = 'small text-primary text-decoration-none'; + showAllLink.href = '#'; + showAllLink.dataset.postLink = ''; + showAllLink.dataset.postId = post.id; + showAllLink.textContent = `Показать все комментарии записи (${post.comments_count})`; + + linkContainer.appendChild(showAllLink); + contentDiv.appendChild(linkContainer); + collapseDiv.appendChild(contentDiv); + + return collapseDiv; + } + /** * Показать лоадер */