pinafore/routes/_components/status/MediaAttachments.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

75 lines
1.7 KiB
HTML

<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}
</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'
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)
}
},
components: {
Media
}
}
</script>