pinafore/routes/_components/dialog/components/ImageDialog.html
sgenoud 530ad6b35c feat: Allow Media to be shown in a grid (as an option) (#747)
* Allow Media to be shown in a grid

* Bring back the sidebar for ungrouped images
2018-12-08 09:42:38 -08:00

62 lines
1.1 KiB
HTML

<ModalDialog
{id}
{label}
background="var(--muted-modal-bg)"
muted="true"
className="image-modal-dialog"
>
{#if type === 'gifv'}
<video
class="autoplay-video"
aria-label="Animated GIF: {description || ''}"
style="background-image: url({poster}); "
{width}
{height}
{src}
autoplay
muted
loop
webkit-playsinline
playsinline
/>
{:else}
<img
{src}
{width}
{height}
alt={description || ''}
title={description || ''}
/>
{/if}
</ModalDialog>
<style>
:global(.image-modal-dialog img, .image-modal-dialog video) {
object-fit: contain;
max-width: calc(100vw - 20px);
max-height: calc(100% - 20px);
overflow: hidden;
}
.autoplay-video {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
</style>
<script>
import ModalDialog from './ModalDialog.html'
import { show } from '../helpers/showDialog'
import { oncreate } from '../helpers/onCreateDialog'
export default {
oncreate,
components: {
ModalDialog
},
methods: {
show
}
}
</script>