data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix: Change the size of sensitive media box (#784)

Browse source 
It is now slightly bigger than what images in a box would look
like.

fixes #771
This commit is contained in:
sgenoud 2018-12-13 08:44:29 +01:00 committed by Nolan Lawson
parent 76a8072e04
commit 30705da19d
1 changed files with 25 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/routes/_components/status/StatusMediaAttachments.html
View file

@ -1,5 +1,6 @@
{#if sensitive } {#if sensitive }
<div class={computedClass}> <div class={computedClass} style={customSize}>
<div class="status-sensitive-inner-div">
{#if sensitiveShown} {#if sensitiveShown}
<button type="button" <button type="button"
class="status-sensitive-media-button" class="status-sensitive-media-button"
@ -28,6 +29,7 @@
</div> </div>
</button> </button>
{/if} {/if}
</div>
</div> </div>
{:else} {:else}
<MediaAttachments {mediaAttachments} {sensitive} {uuid} /> <MediaAttachments {mediaAttachments} {sensitive} {uuid} />
@ -43,8 +45,18 @@
background: none; 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 { .status-sensitive-media-container.grouped-images {
grid-area: media-grp; grid-area: media-grp;
padding-bottom: 58%;
} }
.status-sensitive-media-button { .status-sensitive-media-button {
@ -79,7 +91,9 @@
.status-sensitive-media-container.status-sensitive-media-hidden { .status-sensitive-media-container.status-sensitive-media-hidden {
width: 100%; width: 100%;
margin: 10px auto; 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 { .status-sensitive-media-container .status-sensitive-media-warning {
@ -123,7 +137,7 @@
fill: var(--mask-svg-fill); fill: var(--mask-svg-fill);
border-radius: 2px; border-radius: 2px;
background: var(--mask-opaque-bg); background: var(--mask-opaque-bg);
margin: 1px; margin: 5px;
padding: 6px 10px; padding: 6px 10px;
} }
.status-sensitive-media-container.status-sensitive-media-hidden .status-sensitive-media-svg { .status-sensitive-media-container.status-sensitive-media-hidden .status-sensitive-media-svg {
@ -150,14 +164,20 @@
computedClass: ({ sensitiveShown, $largeInlineMedia }) => classname( computedClass: ({ sensitiveShown, $largeInlineMedia }) => classname(
'status-sensitive-media-container', 'status-sensitive-media-container',
sensitiveShown ? 'status-sensitive-media-shown' : 'status-sensitive-media-hidden', sensitiveShown ? 'status-sensitive-media-shown' : 'status-sensitive-media-hidden',
!$largeInlineMedia && 'grouped-images' $largeInlineMedia ? 'not-grouped-images' : 'grouped-images'
), ),
mediaAttachments: ({ originalStatus }) => originalStatus.media_attachments, mediaAttachments: ({ originalStatus }) => originalStatus.media_attachments,
sensitiveShown: ({ $sensitivesShown, uuid }) => !!$sensitivesShown[uuid], sensitiveShown: ({ $sensitivesShown, uuid }) => !!$sensitivesShown[uuid],
sensitive: ({ originalStatus, $markMediaAsSensitive, $neverMarkMediaAsSensitive }) => ( sensitive: ({ originalStatus, $markMediaAsSensitive, $neverMarkMediaAsSensitive }) => (
!$neverMarkMediaAsSensitive && ($markMediaAsSensitive || originalStatus.sensitive) !$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: { methods: {
onClickSensitiveMediaButton () { onClickSensitiveMediaButton () {