No OneTemporary
Actions

Authored By

Unknown

Size

1 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
	index ea525c95c5..f0433f10fe 100644
	--- a/src/components/gallery/gallery.vue
	+++ b/src/components/gallery/gallery.vue
	@@ -1,65 +1,67 @@
	<template>
	<div ref="galleryContainer" style="width: 100%;">
	<div class="gallery-row" v-for="row in rows" :style="rowHeight(row.length)" :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }">
	<attachment
	v-for="attachment in row"
	:setMedia="setMedia"
	:nsfw="nsfw"
	:attachment="attachment"
	:allowPlay="false"
	:key="attachment.id"
	/>
	</div>
	</div>
	</template>

	<script src='./gallery.js'></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.gallery-row {
	height: 200px;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: stretch;
	flex-grow: 1;
	margin-top: 0.5em;

	- .attachments, .attachment {
	+ // FIXME: specificity problem with this and .attachments.attachment
	+ // we shouldn't have the need for .image here
	+ .attachment.image {
	margin: 0 0.5em 0 0;
	flex-grow: 1;
	height: 100%;
	box-sizing: border-box;
	// to make failed images a bit more noticeable on chromium
	min-width: 2em;
	&:last-child {
	margin: 0;
	}
	}

	.image-attachment {
	width: 100%;
	height: 100%;
	}

	.video-container {
	height: 100%;
	}

	&.contain-fit {
	img, video {
	object-fit: contain;
	}
	}

	&.cover-fit {
	img, video {
	object-fit: cover;
	}
	}
	}

	</style>