this repo has no description
Handle > 4 medias
- Mastodon now doesn't allow >4, so this is for the future or maybe the forks.
- Using grid for better control on how images lay out
+41
-27
+28
-17
src/components/status.css
+28
-17
src/components/status.css
···
280
280
281
281
.status .media-container {
282
282
margin-top: 8px;
283
-
display: flex;
284
-
flex-wrap: wrap;
283
+
display: grid;
284
+
grid-template-columns: 1fr 1fr;
285
+
grid-auto-rows: 1fr;
285
286
gap: 2px;
286
-
flex-direction: row;
287
+
height: 160px;
287
288
}
288
-
.status:not(.large) .media-container.media-gt4 {
289
-
flex-wrap: nowrap;
290
-
overflow: auto;
289
+
.status .media-container.media-gt2 {
290
+
height: 200px;
291
+
}
292
+
.status.large :is(.media-container, .media-container.media-gt2) {
293
+
height: auto;
294
+
max-height: 80vh;
291
295
}
292
296
.status .media {
293
-
flex-grow: 1;
294
-
flex-basis: calc(50% - 8px);
295
297
border-radius: 8px;
296
298
overflow: hidden;
297
-
max-height: 160px;
298
299
min-height: 80px;
299
300
border: 1px solid var(--outline-color);
300
301
}
301
-
.status .media-container.media-gt2 .media {
302
-
aspect-ratio: 1 / 1;
302
+
.status .media:only-child {
303
+
grid-area: span 2 / span 2;
304
+
}
305
+
.status .media:first-child:nth-last-child(3) {
306
+
grid-area: span 2;
303
307
}
304
-
.status:not(.large) .media-container.media-gt4 .media {
305
-
min-width: 80px;
308
+
309
+
.status:not(.large) .media-container.media-gt4 .media:last-child {
310
+
position: relative;
306
311
}
312
+
.status:not(.large) .media-container.media-gt4 .media:last-child:after {
313
+
content: '4+';
314
+
position: absolute;
315
+
inset: 0;
316
+
display: flex;
317
+
place-content: center;
318
+
place-items: center;
319
+
background-color: var(--bg-faded-blur-color);
320
+
}
321
+
307
322
.status .media:hover {
308
323
border-color: var(--outline-hover-color);
309
-
}
310
-
.status .media.block {
311
-
flex-basis: 100%;
312
-
max-height: auto;
313
324
}
314
325
.status .media :is(img, video) {
315
326
width: 100%;
+13
-10
src/components/status.jsx
+13
-10
src/components/status.jsx
···
417
417
mediaAttachments.length > 2 ? 'media-gt2' : ''
418
418
} ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`}
419
419
>
420
-
{mediaAttachments.map((media, i) => (
421
-
<Media
422
-
media={media}
423
-
onClick={(e) => {
424
-
e.preventDefault();
425
-
e.stopPropagation();
426
-
setShowMediaModal(i);
427
-
}}
428
-
/>
429
-
))}
420
+
{mediaAttachments
421
+
.slice(0, size === 'l' ? undefined : 4)
422
+
.map((media, i) => (
423
+
<Media
424
+
key={media.id}
425
+
media={media}
426
+
onClick={(e) => {
427
+
e.preventDefault();
428
+
e.stopPropagation();
429
+
setShowMediaModal(i);
430
+
}}
431
+
/>
432
+
))}
430
433
</div>
431
434
)}
432
435
{!!card &&