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 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}
{#if (type === 'video' && !blurhash) || type === 'audio'}
<button id={elementId}
type="button"
class="play-video-button focus-after {$largeInlineMedia ? '' : 'fixed-size'} {type === 'audio' ? 'play-audio-button' : ''}"
@ -36,7 +19,6 @@
/>
{/if}
</button>
{/if}
{:else}
<button id={elementId}
type="button"
@ -54,7 +36,7 @@
height={inlineHeight}
{focus}
/>
{:elseif type === 'gifv'}
{:elseif type === 'gifv' && !blurhash}
<NonAutoplayGifv
class={noNativeWidthHeight ? 'no-native-width-height' : ''}
label="Animated GIF: {description}"

View file

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