78 lines
1.8 KiB
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>
|