simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Handle media > 2 taking a lot of vertical space

Browse source 
Also handle media > 4, which I think some instances probably allow
This commit is contained in:
Lim Chee Aun 2022-12-22 10:47:45 +08:00
parent ade3ebb5ae
commit 3c4c59106a
2 changed files with 15 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/status.css
View file

@ -277,6 +277,10 @@
gap: 2px; gap: 2px;
flex-direction: row; flex-direction: row;
} }
.status:not(.large) .media-container.media-gt4 {
flex-wrap: nowrap;
overflow: auto;
}
.status .media { .status .media {
flex-grow: 1; flex-grow: 1;
flex-basis: calc(50% - 8px); flex-basis: calc(50% - 8px);
@ -286,6 +290,12 @@
min-height: 80px; min-height: 80px;
border: 1px solid var(--outline-color); border: 1px solid var(--outline-color);
} }
.status .media-container.media-gt2 .media {
aspect-ratio: 1 / 1;
}
.status:not(.large) .media-container.media-gt4 .media {
min-width: 80px;
}
.status .media:hover { .status .media:hover {
border-color: var(--outline-hover-color); border-color: var(--outline-hover-color);
} }

6
src/components/status.jsx
View file

@ -406,7 +406,11 @@ function Status({
</button> </button>
)} )}
{!!mediaAttachments.length && ( {!!mediaAttachments.length && (
<div class="media-container"> <div
class={`media-container ${
mediaAttachments.length > 2 ? 'media-gt2' : ''
} ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`}
>
{mediaAttachments.map((media, i) => ( {mediaAttachments.map((media, i) => (
<Media <Media
media={media} media={media}