Updating scroll component on image load.

assets/components/releases/media.vue

@@ -64,13 +64,17 @@
 				<img
 					:src="`/media/${cover.thumbnail}`"
 					class="item cover"
+					@load="$parent.$emit('load')"
 				>
 			</a>
 		</template>
 
-		<a
+		<div
 			v-for="photo in photos"
 			:key="`media-${photo.index}`"
+			class="item-container"
+		>
+			<a
 				:href="`/media/${photo.path}`"
 				:class="{ sfw }"
 				class="item-link"
@@ -81,6 +85,7 @@
 					:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
 					:alt="`Photo ${photo.index + 1}`"
 					class="item"
+					@load="$parent.$emit('load')"
 				>
 
 				<span
@@ -91,6 +96,7 @@
 				</span>
 			</a>
 		</div>
+	</div>
 </template>
 
 <script>
@@ -141,7 +147,6 @@ export default {
 @import 'theme';
 
 .media {
-    background: var(--background-dim);
     flex-shrink: 0;
     white-space: nowrap;
     overflow-x: auto;
@@ -154,20 +159,11 @@ export default {
     }
 
 	&.expanded {
-		display: flex;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
+		grid-gap: 1rem;
 		justify-content: center;
-		flex-wrap: wrap;
+		margin: 0 0 1rem 0;
-
-		.item-link,
-		.trailer {
-			margin: 0 0 .5rem 0;
-			height: 18rem;
-			flex: 1;
-		}
-
-		.item {
-			height: 100%;
-		}
 	}
 }
 
@@ -198,12 +194,14 @@ export default {
     }
 }
 
-.item-link,
+.item-container,
 .trailer-container {
+	max-width: 100%;
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+	flex-shrink: 0;
 
     .warning {
         display: none;
@@ -238,9 +236,8 @@ export default {
 }
 
 .item {
-    height: 18rem;
+	max-height: 18rem;
-    vertical-align: middle;
+	max-width: 100%;
-	object-fit: cover;
 	box-shadow: 0 0 3px var(--shadow-weak);
 }
 

assets/components/releases/tile.vue

@@ -150,7 +150,7 @@ export default {
 		position: absolute;
 		top: 0;
 		right: 0;
-		padding: .15rem .25rem .15rem .3rem;
+		padding: .15rem .25rem .15rem .35rem;
 		border-radius: 0 0 0 .5rem;
 		color: var(--text-light);
 		background: var(--primary);

assets/components/scroll/scroll.vue

@@ -70,18 +70,17 @@ function scroll(direction) {
 function mounted() {
 	this.target = this.$slots.default[0].elm;
 
-	this.target.addEventListener('scroll', () => {
+	this.target.addEventListener('scroll', () => this.updateScroll());
-		this.updateScroll();
-	});
-
 	window.addEventListener('resize', this.updateScroll);
 
+	// typically triggered by slotted component when an image loads, affecting scrollWidth
+	this.$on('load', () => this.updateScroll());
 	this.updateScroll();
-	setTimeout(() => this.updateScroll(), 150); // allow CSS to calculate
 }
 
 function beforeDestroy() {
 	this.target.removeEventListener('scroll', this.updateScroll);
+
 	window.removeEventListener('resize', this.updateScroll);
 }