diff --git a/static/js/ctzn-tags/post-view.js b/static/js/ctzn-tags/post-view.js index 0378989e..034f9bfc 100644 --- a/static/js/ctzn-tags/post-view.js +++ b/static/js/ctzn-tags/post-view.js @@ -292,7 +292,7 @@ export class PostView extends LitElement { ${this.renderPostTextNonFull()} ${this.renderMedia()} ${this.hasReactionsOrGifts ? html` -
+
${this.renderGiftedItems()} ${this.renderReactions()}
@@ -468,17 +468,20 @@ export class PostView extends LitElement { return '' } return html` - ${repeat(this.post.relatedItemTransfers, item => html` + ${repeat(this.post.relatedItemTransfers, item => { + let tooltipUser = item.dbmethodCall?.authorId + return html` + class="flex-shrink-0 inline-flex items-center border border-gray-300 px-1 py-0.5 rounded mr-1.5 text-sm font-semibold tooltip-top" + data-tooltip="${tooltipUser}"> ${item.qty} - `)} + `} + )} ` } @@ -488,12 +491,15 @@ export class PostView extends LitElement { } return html` ${repeat(Object.entries(this.post.reactions), ([reaction, userIds]) => { + let tooltipUsersText = (userIds?.slice(0,4) || []).join(", ") const colors = this.haveIReacted(reaction) ? 'bg-blue-50 hov:hover:bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-500 hov:hover:bg-gray-200' return html` this.onClickReaction(e, reaction)} - >${unsafeHTML(emojify(makeSafe(reaction)))} ${userIds.length} + data-tooltip="${tooltipUsersText}${userIds?.length > 4 ? '...' : ''}" + >${unsafeHTML(emojify(makeSafe(reaction)))} ${userIds.length} + ` })} ` diff --git a/static/js/ctzn-tags/posts-feed.js b/static/js/ctzn-tags/posts-feed.js index bf3ce3a1..7adbe53e 100644 --- a/static/js/ctzn-tags/posts-feed.js +++ b/static/js/ctzn-tags/posts-feed.js @@ -282,7 +282,7 @@ export class PostsFeed extends LitElement { renderResult (post) { return html` -
+