natty
/
magnetar
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

Frontend: Prettier notification groups

This commit is contained in:
Natty 2024-04-29 21:49:42 +02:00
parent bca16253af
commit 6c7e3d79e0
Signed by: natty
GPG Key ID: BF6CB659ADEE60EC
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
fe_calckey/frontend/client/src/components/MagNotificationGroup.vue
View File

@ -69,11 +69,13 @@
<MagAvatar
v-if="notif.type === 'Renote'"
class="icon"
:class="{ 'is-read': notif.is_read }"
:user="notif.note.user"
/>
<MagAvatar
v-else-if="notif.type === 'Reaction'"
class="icon"
:class="{ 'is-read': notif.is_read }"
:user="notif.user"
/>
<div class="sub-icon" :class="notif.type">
@ -264,6 +266,11 @@ const hookTooltip = (
width: 100%;
height: 100%;
border-radius: 6px;
&:not(.is-read) {
outline: 1px solid var(--accentDarken);
outline-offset: 2px;
}
}
> .sub-icon {
@ -314,7 +321,7 @@ const hookTooltip = (
flex-wrap: wrap;
align-items: baseline;
margin-inline-end: 10px;
gap: 0.2em;
gap: 0.4em;
> .name {
text-overflow: ellipsis;
@ -322,10 +329,15 @@ const hookTooltip = (
overflow: hidden;
min-width: 0;
flex: 0 1 auto;
}
max-width: 150px;
border: 1px solid var(--accentedBg);
border-radius: 20px;
padding-inline: 10px;
> .name:not(:last-child)::after {
content: ",";
&:hover {
background-color: var(--accentedBg);
border-color: var(--accent);
}
}
}