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 () {