pinafore/routes/_components/status/MediaAttachments.html

75 lines
1.7 KiB
HTML
Raw Normal View History

<div class="status-media
{sensitive ? 'status-media-is-sensitive' : ''}
{oddCols ? 'odd-cols' : ''}
{twoCols ? 'two-cols' : ''}
{$groupedImages ? 'grouped-images' : ''}
"
style="grid-template-columns: repeat({nCols}, 1fr); " >
{#each mediaAttachments as media}
<Media {media} {uuid} />
{/each}
2018-02-05 03:56:06 +00:00
</div>
<style>
.status-media {
2018-02-10 04:07:48 +00:00
grid-area: media;
2018-02-05 03:56:06 +00:00
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;
2018-02-05 03:56:06 +00:00
}
.status-media.grouped-images {
grid-area: media-grp;
border-radius: 6px;
2018-02-05 03:56:06 +00:00
}
.status-media.grouped-images > :global(*) {
padding-bottom: 56.25%;
width: 100%;
2018-02-05 03:56:06 +00:00
}
.status-media.grouped-images.two-cols > :global(*) {
padding-bottom: calc(112.5% + 5px);
2018-02-05 03:56:06 +00:00
}
.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;
2018-02-05 03:56:06 +00:00
}
</style>
<script>
import Media from './Media.html'
export default {
computed: {
nCols:
({ mediaAttachments, $groupedImages }) => {
return ($groupedImages && mediaAttachments.length > 1) ? 2 : 1
},
oddCols:
({ mediaAttachments }) => {
return (mediaAttachments.length > 1 && (mediaAttachments.length % 2))
},
twoCols:
({ mediaAttachments }) => {
return (mediaAttachments.length === 2)
}
2018-02-05 03:56:06 +00:00
},
components: {
Media
}
}
</script>