diff --git a/app/javascript/mastodon/components/media_gallery.jsx b/app/javascript/mastodon/components/media_gallery.jsx index 51b25199e1..84699871c5 100644 --- a/app/javascript/mastodon/components/media_gallery.jsx +++ b/app/javascript/mastodon/components/media_gallery.jsx @@ -94,15 +94,21 @@ class Item extends React.PureComponent { height = 50; } - if (size === 5 || size === 6) { + if (size === 5 || size === 6 || size === 9 || size === 10 || size === 11 || size === 12) { height = 33; } - if (size === 7 || size === 8) { + if (size === 7 || size === 8 || size === 13 || size === 14 || size === 15 || size === 16) { height = 25; } if ((size === 5 && index === 4) || (size === 7 && index === 6)) { width = 100; } + if (size === 9) { + width = 33; + } + if (size === 10 || size === 11 || size === 12 || size === 13 || size === 14 || size === 15 || size === 16) { + width = 25; + } if (attachment.get('description')?.length > 0) { badges.push(ALT); @@ -310,7 +316,7 @@ class MediaGallery extends React.PureComponent { style.aspectRatio = '16 / 9'; } - const maxSize = displayMediaExpand ? 8 : 4; + const maxSize = displayMediaExpand ? 16 : 4; const size = media.take(maxSize).size; const uncached = media.every(attachment => attachment.get('type') === 'unknown'); @@ -337,8 +343,15 @@ class MediaGallery extends React.PureComponent { ); } + const rowClass = (size === 5 || size === 6 || size === 9 || size === 10 || size === 11 || size === 12) ? 'media-gallery--row3' : + (size === 7 || size === 8 || size === 13 || size === 14 || size === 15 || size === 16) ? 'media-gallery--row4' : + 'media-gallery--row2'; + const columnClass = (size === 9) ? 'media-gallery--column3' : + (size === 10 || size === 11 || size === 12 || size === 13 || size === 14 || size === 15 || size === 16) ? 'media-gallery--column4' : + 'media-gallery--column2'; + return ( -