DatseMultimediaSites
/
Sharkey
mirror of https://activitypub.software/TransFem-org/Sharkey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

merge: Styling of following feed. (!738) 

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/738

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <github@yuugi.dev>
This commit is contained in:
dakkar 2024-11-11 11:14:52 +00:00
parent cd2e597223 7f9a151055
commit 917e67d356
2 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/frontend/src/components/SkFollowingFeedEntry.vue
View File

@ -54,6 +54,7 @@ defineEmits<{
overflow-wrap: break-word; overflow-wrap: break-word;
display: flex; display: flex;
contain: content; contain: content;
cursor: pointer;
} }
.avatar { .avatar {

17
packages/frontend/src/pages/following-feed.vue
View File

@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #default="{ items: notes }"> <template #default="{ items: notes }">
<MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.panel" :noGap="true"> <MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.panel" :noGap="true">
<SkFollowingFeedEntry v-if="!isHardMuted(note)" :isMuted="isSoftMuted(note)" :note="note" @select="userSelected"/> <SkFollowingFeedEntry v-if="!isHardMuted(note)" :isMuted="isSoftMuted(note)" :note="note" :class="selectedUserId == note.userId && $style.selected" @select="userSelected"/>
</MkDateSeparatedList> </MkDateSeparatedList>
</template> </template>
</MkPagination> </MkPagination>
@ -257,6 +257,21 @@ definePageMetadata(() => ({
margin-bottom: 12px; margin-bottom: 12px;
} }
@keyframes border {
from {border-left: 0px solid var(--accent);}
to {border-left: 6px solid var(--accent);}
}
.selected {
animation: border 0.2s ease-out 0s 1 forwards;
&:first-child {
border-top-left-radius: 5px;
}
&:last-child {
border-bottom-left-radius: 5px;
}
}
@media (min-width: 750px) { @media (min-width: 750px) {
.root { .root {
grid-template-columns: min-content 4fr 6fr min-content; grid-template-columns: min-content 4fr 6fr min-content;