forked from cybrespace/pinafore
fix: Change the size of sensitive media box (#784)
It is now slightly bigger than what images in a box would look like. fixes #771
This commit is contained in:
parent
76a8072e04
commit
30705da19d
|
@ -1,5 +1,6 @@
|
|||
{#if sensitive }
|
||||
<div class={computedClass}>
|
||||
<div class={computedClass} style={customSize}>
|
||||
<div class="status-sensitive-inner-div">
|
||||
{#if sensitiveShown}
|
||||
<button type="button"
|
||||
class="status-sensitive-media-button"
|
||||
|
@ -28,6 +29,7 @@
|
|||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<MediaAttachments {mediaAttachments} {sensitive} {uuid} />
|
||||
|
@ -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 () {
|
||||
|
|
Loading…
Reference in New Issue