Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-24 08:48:47 +01:00
Code Issues Projects Releases Packages Wiki Activity

Handle > 4 medias

Browse source 
- 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
This commit is contained in:
Lim Chee Aun 2022-12-28 10:51:57 +08:00
parent 8b6cae5611
commit fa0ccece32
2 changed files with 41 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/components/status.css
View file

@ -280,37 +280,48 @@
.status .media-container { .status .media-container {
margin-top: 8px; margin-top: 8px;
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
gap: 2px; gap: 2px;
flex-direction: row; height: 160px;
} }
.status:not(.large) .media-container.media-gt4 { .status .media-container.media-gt2 {
flex-wrap: nowrap; height: 200px;
overflow: auto; }
.status.large :is(.media-container, .media-container.media-gt2) {
height: auto;
max-height: 80vh;
} }
.status .media { .status .media {
flex-grow: 1;
flex-basis: calc(50% - 8px);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
max-height: 160px;
min-height: 80px; min-height: 80px;
border: 1px solid var(--outline-color); border: 1px solid var(--outline-color);
} }
.status .media-container.media-gt2 .media { .status .media:only-child {
aspect-ratio: 1 / 1; grid-area: span 2 / span 2;
} }
.status:not(.large) .media-container.media-gt4 .media { .status .media:first-child:nth-last-child(3) {
min-width: 80px; grid-area: span 2;
} }
.status:not(.large) .media-container.media-gt4 .media:last-child {
position: relative;
}
.status:not(.large) .media-container.media-gt4 .media:last-child:after {
content: '4+';
position: absolute;
inset: 0;
display: flex;
place-content: center;
place-items: center;
background-color: var(--bg-faded-blur-color);
}
.status .media:hover { .status .media:hover {
border-color: var(--outline-hover-color); border-color: var(--outline-hover-color);
} }
.status .media.block {
flex-basis: 100%;
max-height: auto;
}
.status .media :is(img, video) { .status .media :is(img, video) {
width: 100%; width: 100%;
height: 100%; height: 100%;

5
src/components/status.jsx
View file

@ -417,8 +417,11 @@ function Status({
mediaAttachments.length > 2 ? 'media-gt2' : '' mediaAttachments.length > 2 ? 'media-gt2' : ''
} ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`} } ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`}
> >
{mediaAttachments.map((media, i) => ( {mediaAttachments
.slice(0, size === 'l' ? undefined : 4)
.map((media, i) => (
<Media <Media
key={media.id}
media={media} media={media}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();