pinafore/routes/_components/status/MediaAttachments.html

78 lines
1.8 KiB
HTML

<div class={computedClass}
style="grid-template-columns: repeat({nCols}, 1fr);" >
{#each mediaAttachments as media}
<Media {media} {uuid} />
{/each}
</div>
<style>
.status-media {
grid-area: media;
display: grid;
align-items: center;
justify-content: center;
justify-items: center;
grid-column-gap: 5px;
grid-row-gap: 5px;
overflow: hidden;
max-width: calc(100vw - 40px);
margin: 10px 10px 10px 5px;
}
.status-media.grouped-images {
grid-area: media-grp;
border-radius: 6px;
}
.status-media.grouped-images > :global(*) {
padding-bottom: 56.25%;
width: 100%;
}
.status-media.grouped-images.two-cols > :global(*) {
padding-bottom: calc(112.5% + 5px);
}
.status-media.grouped-images.odd-cols > :global(:first-child) {
grid-row-end: span 2;
padding-bottom: calc(112.5% + 5px);
background-color: blue;
}
.status-media.status-media-is-sensitive {
margin: 0;
}
</style>
<script>
import Media from './Media.html'
import { classname } from '../../_utils/classname'
export default {
computed: {
computedClass: ({ sensitive, $largeInlineMedia, oddCols, twoCols }) => classname(
'status-media',
sensitive && 'status-media-is-sensitive',
oddCols && 'odd-cols',
twoCols && 'two-cols',
!$largeInlineMedia && 'grouped-images'
),
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)
}
},
components: {
Media
}
}
</script>