this repo has no description
Use useTruncated for notification items
+38
-6
+10
-4
src/components/notification.jsx
+10
-4
src/components/notification.jsx
···
1
1
import shortenNumber from '../utils/shorten-number';
2
2
import states from '../utils/states';
3
3
import store from '../utils/store';
4
+
import useTruncated from '../utils/useTruncated';
4
5
5
6
import Avatar from './avatar';
6
7
import FollowRequestButtons from './follow-request-buttons';
···
266
267
<ul class="notification-group-statuses">
267
268
{_statuses.map((status) => (
268
269
<li key={status.id}>
269
-
<Link
270
+
<TruncatedLink
270
271
class={`status-link status-type-${type}`}
271
272
to={
272
273
instance ? `/${instance}/s/${status.id}` : `/s/${status.id}`
273
274
}
274
275
>
275
276
<Status status={status} size="s" />
276
-
</Link>
277
+
</TruncatedLink>
277
278
</li>
278
279
))}
279
280
</ul>
280
281
)}
281
282
{status && (!_statuses?.length || _statuses?.length <= 1) && (
282
-
<Link
283
+
<TruncatedLink
283
284
class={`status-link status-type-${type}`}
284
285
to={
285
286
instance
···
306
307
) : (
307
308
<Status statusID={actualStatusID} size="s" />
308
309
)}
309
-
</Link>
310
+
</TruncatedLink>
310
311
)}
311
312
</div>
312
313
</div>
313
314
);
315
+
}
316
+
317
+
function TruncatedLink(props) {
318
+
const ref = useTruncated();
319
+
return <Link {...props} data-read-more="Read more →" ref={ref} />;
314
320
}
315
321
316
322
export default Notification;
+28
-2
src/pages/notifications.css
+28
-2
src/pages/notifications.css
···
98
98
}
99
99
.notification .status-link:not(.status-type-mention) > .status {
100
100
font-size: calc(var(--text-size) * 0.9);
101
-
max-height: 160px;
102
-
overflow: hidden;
101
+
}
102
+
.notification .status-link.truncated:not(.status-type-mention) > .status {
103
103
/* fade out mask gradient bottom */
104
104
mask-image: linear-gradient(
105
105
rgba(0, 0, 0, 1) 130px,
106
106
rgba(0, 0, 0, 0.5) 145px,
107
107
transparent 159px
108
108
);
109
+
}
110
+
.notification .status-link.truncated {
111
+
position: relative;
112
+
}
113
+
.notification .status-link.truncated:after {
114
+
content: attr(data-read-more);
115
+
line-height: 1;
116
+
display: inline-block;
117
+
position: absolute;
118
+
--inset-offset: 16px;
119
+
inset-block-end: var(--inset-offset);
120
+
inset-inline-end: var(--inset-offset);
121
+
color: var(--link-color);
122
+
background-color: var(--bg-faded-blur-color);
123
+
backdrop-filter: blur(8px);
124
+
border: 1px solid var(--outline-color);
125
+
padding: 0.5em 0.75em;
126
+
border-radius: 10em;
127
+
font-size: 90%;
128
+
white-space: nowrap;
129
+
transition: all 0.2s ease-out;
130
+
}
131
+
.notification .status-link:is(:hover, :focus).truncated:after {
132
+
border-color: var(--link-color);
133
+
background-color: var(--bg-color);
134
+
transform: translate(2px, 0);
109
135
}
110
136
.notification .status-link.status-type-mention {
111
137
max-height: 320px;