nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Emphasize mentions on notifications

Browse source
This commit is contained in:
Lim Chee Aun 2022-12-21 08:48:11 +08:00
parent 3589438556
commit becb8aa89d
2 changed files with 42 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/pages/notifications.css
View file

@ -30,7 +30,7 @@
.notification .status-link {
border-radius: 8px 8px 0 0;
border: 1px solid var(--divider-color);
border: 1px solid var(--outline-color);
max-height: 160px;
overflow: hidden;
/* fade out mask gradient bottom */
@ -41,9 +41,16 @@
);
filter: saturate(0.25);
}
.notification .status-link.status-type-mention {
max-height: 320px;
filter: none;
background-color: var(--bg-color);
margin-top: calc(-16px - 1px);
}
.notification .status-link:hover {
background-color: var(--bg-blur-color);
filter: saturate(1);
border-color: var(--outline-hover-color);
}
.notification .status-link > * {
pointer-events: none;

63
src/pages/notifications.jsx
View file

@ -82,34 +82,36 @@ function Notification({ notification }) {
/>
</div>
<div class="notification-content">
<p>
{!/poll|update/i.test(type) && (
<>
{_accounts?.length > 1 ? (
<>
<b>{_accounts.length} people</b>{' '}
</>
) : (
<>
<NameText account={account} showAvatar />{' '}
</>
)}
</>
)}
{text}
{type === 'mention' && (
<span class="insignificant">
{' '}
•{' '}
<relative-time
datetime={notification.createdAt}
format="micro"
threshold="P1D"
prefix=""
/>
</span>
)}
</p>
{type !== 'mention' && (
<p>
{!/poll|update/i.test(type) && (
<>
{_accounts?.length > 1 ? (
<>
<b>{_accounts.length} people</b>{' '}
</>
) : (
<>
<NameText account={account} showAvatar />{' '}
</>
)}
</>
)}
{text}
{type === 'mention' && (
<span class="insignificant">
{' '}
•{' '}
<relative-time
datetime={notification.createdAt}
format="micro"
threshold="P1D"
prefix=""
/>
</span>
)}
</p>
)}
{_accounts?.length > 1 && (
<p>
{_accounts.map((account, i) => (
@ -142,7 +144,10 @@ function Notification({ notification }) {
</p>
)}
{status && (
<Link class="status-link" href={`#/s/${actualStatusID}`}>
<Link
class={`status-link status-type-${type}`}
href={`#/s/${actualStatusID}`}
>
<Status status={status} size="s" />
</Link>
)}