forked from
did:plc:2hcnfmbfr4ucfbjpnvjqvt3e/bbell
wip bsky client for the web & android
feat: link to profiles in feeditems
+24
-12
+13
-6
src/components/Feed/FeedItem.vue
+13
-6
src/components/Feed/FeedItem.vue
···
156
156
</div>
157
157
158
158
<div class="post-layout">
159
-
<div class="post-avatar">
159
+
<AppLink name="user-profile" :params="{ id: displayPost.author.did }" class="post-avatar">
160
160
<img
161
161
v-if="displayPost.author.avatar"
162
162
:src="displayPost.author.avatar"
···
164
164
loading="lazy"
165
165
/>
166
166
<div v-else class="avatar-fallback"></div>
167
-
</div>
167
+
</AppLink>
168
168
169
169
<div class="post-content">
170
170
<div class="post-header">
171
-
<span class="display-name">{{
172
-
displayPost.author.displayName || displayPost.author.handle
173
-
}}</span>
174
-
<span class="handle">@{{ displayPost.author.handle }}</span>
171
+
<AppLink
172
+
class="display-name"
173
+
name="user-profile"
174
+
:params="{ id: displayPost.author.did }"
175
+
>
176
+
{{ displayPost.author.displayName || displayPost.author.handle }}
177
+
</AppLink>
178
+
179
+
<AppLink class="handle" name="user-profile" :params="{ id: displayPost.author.did }">
180
+
@{{ displayPost.author.handle }}
181
+
</AppLink>
175
182
<template v-if="displayPost.author.pronouns">
176
183
<span class="dot" aria-hidden="true">·</span>
177
184
<span class="pronouns">{{ displayPost.author.pronouns }}</span>
+1
-1
src/utils/keys.ts
+1
-1
src/utils/keys.ts
+10
-5
src/views/Root/HomeView.vue
+10
-5
src/views/Root/HomeView.vue
···
219
219
z-index: -1;
220
220
pointer-events: none;
221
221
}
222
-
&:hover::before {
223
-
background-color: hsla(var(--surface2) / 0.3);
222
+
&:hover {
223
+
color: hsl(var(--text));
224
+
225
+
&::before {
226
+
background-color: hsla(var(--surface2) / 0.3);
227
+
scale: 1.05;
228
+
}
229
+
&.active::before {
230
+
background-color: hsla(var(--accent) / 0.3);
231
+
}
224
232
}
225
233
&.active::before {
226
234
background-color: hsla(var(--accent) / 0.2);
227
235
}
228
236
&:active::before {
229
237
scale: 0.95;
230
-
}
231
-
&.active {
232
-
color: hsl(var(--text));
233
238
}
234
239
}
235
240
</style>