diff --git a/src/app.css b/src/app.css index 5855581c..0e2fd50a 100644 --- a/src/app.css +++ b/src/app.css @@ -641,6 +641,16 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { .status-reply-to:not(.visibility-direct):not(.status-card) { background-image: none; } +.timeline:not(.flat) + > li.timeline-item-diff-author + > .status-link + > .status + > a + > .avatar { + transform: scale(0.8); + filter: drop-shadow(0 0 16px var(--bg-color)) + drop-shadow(0 0 8px var(--bg-color)) drop-shadow(0 0 8px var(--bg-color)); +} .timeline .show-more { padding-left: calc(var(--line-end) + var(--line-margin-end)) !important; diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx index 500db726..56ad9b6b 100644 --- a/src/components/timeline.jsx +++ b/src/components/timeline.jsx @@ -398,7 +398,7 @@ function Timeline({ } const manyItems = items.length > 3; return items.map((item, i) => { - const { id: statusID } = item; + const { id: statusID, _differentAuthor } = item; const url = instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`; @@ -416,6 +416,8 @@ function Timeline({ : i === items.length - 1 ? 'end' : 'middle' + } ${ + _differentAuthor ? 'timeline-item-diff-author' : '' }`} > diff --git a/src/utils/timeline-utils.jsx b/src/utils/timeline-utils.jsx index b81af192..d718069e 100644 --- a/src/utils/timeline-utils.jsx +++ b/src/utils/timeline-utils.jsx @@ -130,6 +130,16 @@ export function groupContext(items) { }); }); + // Tag items that has different author than first post's author + contexts.forEach((context) => { + const firstItemAccountID = context[0].account.id; + context.forEach((item) => { + if (item.account.id !== firstItemAccountID) { + item._differentAuthor = true; + } + }); + }); + if (contexts.length) console.log('🧵 Contexts', contexts); const newItems = [];