fix: Fix the blurhash alignment and general style (#1418)

* Fix the blurhash alignment issue

* Fix the video blurhash style
This commit is contained in:
sgenoud 2019-08-22 07:31:14 +02:00 committed by Nolan Lawson
parent 43cb92bd61
commit ada6b9f699
2 changed files with 23 additions and 24 deletions

View file

@ -1,21 +1,4 @@
{#if type === 'video' || type === 'audio'} {#if (type === 'video' && !blurhash) || type === 'audio'}
{#if blurhash}
{#if type === 'video'}
<div>
<LazyImage
alt={description}
title={description}
src={previewUrl}
fallback={oneTransparentPixel}
blurhash={blurhash}
width={inlineWidth}
height={inlineHeight}
background="var(--loading-bg)"
{focus}
/>
</div>
{/if}
{:else}
<button id={elementId} <button id={elementId}
type="button" type="button"
class="play-video-button focus-after {$largeInlineMedia ? '' : 'fixed-size'} {type === 'audio' ? 'play-audio-button' : ''}" class="play-video-button focus-after {$largeInlineMedia ? '' : 'fixed-size'} {type === 'audio' ? 'play-audio-button' : ''}"
@ -36,7 +19,6 @@
/> />
{/if} {/if}
</button> </button>
{/if}
{:else} {:else}
<button id={elementId} <button id={elementId}
type="button" type="button"
@ -54,7 +36,7 @@
height={inlineHeight} height={inlineHeight}
{focus} {focus}
/> />
{:elseif type === 'gifv'} {:elseif type === 'gifv' && !blurhash}
<NonAutoplayGifv <NonAutoplayGifv
class={noNativeWidthHeight ? 'no-native-width-height' : ''} class={noNativeWidthHeight ? 'no-native-width-height' : ''}
label="Animated GIF: {description}" label="Animated GIF: {description}"

View file

@ -54,13 +54,12 @@
} }
.status-sensitive-media-container.grouped-images .status-sensitive-inner-div { .status-sensitive-media-container.grouped-images .status-sensitive-inner-div {
position: absolute; position: relative;
width: 100%; 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 {
@ -87,6 +86,7 @@
.status-sensitive-media-shown .status-sensitive-media-button.status-sensitive-media-button-transparent { .status-sensitive-media-shown .status-sensitive-media-button.status-sensitive-media-button-transparent {
top: 5px; top: 5px;
left: 5px;
} }
.status-sensitive-media-hidden .status-sensitive-media-button { .status-sensitive-media-hidden .status-sensitive-media-button {
@ -153,6 +153,7 @@
.status-sensitive-media-hidden .svg-wrapper.svg-wrapper-transparent { .status-sensitive-media-hidden .svg-wrapper.svg-wrapper-transparent {
top: 5px; top: 5px;
left: 5px;
} }
.status-sensitive-media-container.grouped-images .svg-wrapper { .status-sensitive-media-container.grouped-images .svg-wrapper {
@ -200,9 +201,11 @@
}, },
store: () => store, store: () => store,
computed: { computed: {
computedClass: ({ sensitiveShown, $largeInlineMedia }) => classname( computedClass: ({ sensitiveShown, oddCols, twoCols, $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',
oddCols && 'odd-cols',
twoCols && 'two-cols',
$largeInlineMedia ? 'not-grouped-images' : 'grouped-images' $largeInlineMedia ? 'not-grouped-images' : 'grouped-images'
), ),
mediaAttachments: ({ originalStatus }) => originalStatus.media_attachments, mediaAttachments: ({ originalStatus }) => originalStatus.media_attachments,
@ -233,7 +236,21 @@
sensitiveMediaIconClass: ({ canUseBlurhash }) => classname( sensitiveMediaIconClass: ({ canUseBlurhash }) => classname(
'status-sensitive-media-svg', 'status-sensitive-media-svg',
canUseBlurhash && 'status-sensitive-media-svg-transparent' canUseBlurhash && 'status-sensitive-media-svg-transparent'
) ),
nCols:
({ mediaAttachments, $largeInlineMedia }) => {
return (!$largeInlineMedia && mediaAttachments.length > 1) ? 2 : 1
},
oddCols:
({ mediaAttachments }) => {
return (mediaAttachments.length > 1 && (mediaAttachments.length % 2))
},
twoCols:
({ mediaAttachments }) => {
return (mediaAttachments.length === 2)
}
}, },
methods: { methods: {
toggleSensitiveMedia () { toggleSensitiveMedia () {