diff --git a/src/routes/_components/status/StatusMediaAttachments.html b/src/routes/_components/status/StatusMediaAttachments.html
index 1560bde..ebe12d1 100644
--- a/src/routes/_components/status/StatusMediaAttachments.html
+++ b/src/routes/_components/status/StatusMediaAttachments.html
@@ -1,5 +1,6 @@
{#if sensitive }
-
+
+
{#if sensitiveShown}
{/if}
+
{:else}
@@ -43,8 +45,18 @@
background: none;
}
+ .status-sensitive-inner-div {
+ height: 100%;
+ }
+
+ .status-sensitive-media-container.grouped-images .status-sensitive-inner-div {
+ position: absolute;
+ width: 100%;
+ }
+
.status-sensitive-media-container.grouped-images {
grid-area: media-grp;
+ padding-bottom: 58%;
}
.status-sensitive-media-button {
@@ -79,7 +91,9 @@
.status-sensitive-media-container.status-sensitive-media-hidden {
width: 100%;
margin: 10px auto;
- height: 200px;
+ }
+ .status-sensitive-media-container.status-sensitive-media-hidden.not-grouped-images {
+ height: 200px;
}
.status-sensitive-media-container .status-sensitive-media-warning {
@@ -123,7 +137,7 @@
fill: var(--mask-svg-fill);
border-radius: 2px;
background: var(--mask-opaque-bg);
- margin: 1px;
+ margin: 5px;
padding: 6px 10px;
}
.status-sensitive-media-container.status-sensitive-media-hidden .status-sensitive-media-svg {
@@ -150,14 +164,20 @@
computedClass: ({ sensitiveShown, $largeInlineMedia }) => classname(
'status-sensitive-media-container',
sensitiveShown ? 'status-sensitive-media-shown' : 'status-sensitive-media-hidden',
- !$largeInlineMedia && 'grouped-images'
+ $largeInlineMedia ? 'not-grouped-images' : 'grouped-images'
),
mediaAttachments: ({ originalStatus }) => originalStatus.media_attachments,
sensitiveShown: ({ $sensitivesShown, uuid }) => !!$sensitivesShown[uuid],
sensitive: ({ originalStatus, $markMediaAsSensitive, $neverMarkMediaAsSensitive }) => (
!$neverMarkMediaAsSensitive && ($markMediaAsSensitive || originalStatus.sensitive)
),
- delegateKey: ({ uuid }) => `sensitive-${uuid}`
+ delegateKey: ({ uuid }) => `sensitive-${uuid}`,
+ customSize: ({ $largeInlineMedia, mediaAttachments }) => {
+ if ($largeInlineMedia || !mediaAttachments || mediaAttachments.length < 5) {
+ return ''
+ }
+ return `padding-bottom: ${Math.ceil(mediaAttachments.length / 2) * 29}%;`
+ }
},
methods: {
onClickSensitiveMediaButton () {