new media list layout

packages/client/src/components/MkImgWithBlurhash.vue

@@ -1,5 +1,4 @@
 <template>
-	<div class="xubzgfgb" :class="{ cover }" :title="title">
 	<canvas
 		v-if="!loaded"
 		ref="canvas"
@@ -13,9 +12,11 @@
 		:title="title"
 		:type="type"
 		:alt="alt"
+		:class="{ cover }"
+		:style="{ 'object-fit': cover ? 'cover' : null }"
+		loading="lazy"
 		@load="onLoad"
 	/>
-	</div>
 </template>
 
 <script lang="ts" setup>
@@ -64,31 +65,20 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.xubzgfgb {
+canvas,
-	position: relative;
+img {
-	width: 100%;
-	height: 100%;
-
-	> canvas,
-	> img {
 	display: block;
 	width: 100%;
 	height: 100%;
 }
 
-	> canvas {
+canvas {
 	position: absolute;
+	inset: 0;
 	object-fit: cover;
 }
 
-	> img {
+img {
 	object-fit: contain;
 }
-
-	&.cover {
-		> img {
-			object-fit: cover;
-		}
-	}
-}
 </style>

packages/client/src/components/MkMediaImage.vue

@@ -1,7 +1,6 @@
 <template>
 	<button v-if="hide" class="qjewsnkg" @click="hide = false">
 		<ImgWithBlurhash
-			class="bg"
 			:hash="image.blurhash"
 			:title="image.comment"
 			:alt="image.comment"
@@ -82,20 +81,17 @@ watch(
 	all: unset;
 	position: relative;
 
-	> .bg {
-		filter: brightness(0.5);
-	}
-
 	> .text {
-		position: absolute;
+		position: relative;
-		left: 0;
-		top: 0;
 		width: 100%;
 		height: 100%;
 		z-index: 1;
 		display: flex;
 		justify-content: center;
 		align-items: center;
+		padding: 30px;
+		box-sizing: border-box;
+		background: rgba(0,0,0,0.5);
 
 		> .wrapper {
 			display: table-cell;
@@ -112,7 +108,6 @@ watch(
 
 .gqnyydlz {
 	position: relative;
-	//box-shadow: 0 0 0 1px var(--divider) inset;
 	background: var(--bg);
 
 	> .hide {

packages/client/src/components/MkMediaList.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="hoawjimk">
+	<div class="hoawjimk files">
 		<XBanner
 			v-for="media in mediaList.filter((media) => !previewable(media))"
 			:key="media.id"
@@ -7,14 +7,16 @@
 		/>
 		<div
 			v-if="mediaList.filter((media) => previewable(media)).length > 0"
-			class="gird-container"
+			class="grid-container"
+			:data-count="
+				mediaList.filter((media) => previewable(media)).length < 5
+				? mediaList.filter((media) => previewable(media)).length
+				: null
+			"
 			:class="{ dmWidth: inDm }"
 		>
 			<div
 				ref="gallery"
-				:data-count="
-					mediaList.filter((media) => previewable(media)).length
-				"
 				@click.stop
 			>
 				<template
@@ -200,7 +202,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 		max-width: 40rem;
 	}
 
-	> .gird-container {
+	> .grid-container {
 		position: relative;
 		width: 100%;
 		margin-top: 4px;
@@ -208,37 +210,24 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 		overflow: hidden;
 		pointer-events: none;
 
-		&:before {
+		&[data-count] {
-			content: "";
-			display: block;
 			padding-top: 56.25%; // 16:9;
-		}
-
 			> div {
 				position: absolute;
-			top: 0;
+				inset: 0;
-			right: 0;
+			}
-			bottom: 0;
-			left: 0;
-			display: grid;
-			grid-gap: 8px;
-
-			> * {
-				overflow: hidden;
-				border-radius: 6px;
-				pointer-events: all;
 		}
 
-			&[data-count="1"] {
+		&[data-count="1"] > div {
 			grid-template-rows: 1fr;
 		}
 
-			&[data-count="2"] {
+		&[data-count="2"] > div {
 			grid-template-columns: 1fr 1fr;
 			grid-template-rows: 1fr;
 		}
 
-			&[data-count="3"] {
+		&[data-count="3"] > div {
 			grid-template-columns: 1fr 0.5fr;
 			grid-template-rows: 1fr 1fr;
 
@@ -252,27 +241,43 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 			}
 		}
 
-			&[data-count="4"] {
+		&[data-count="4"] > div {
 			grid-template-columns: 1fr 1fr;
 			grid-template-rows: 1fr 1fr;
 		}
 
-			> *:nth-child(1) {
+		&:not([data-count]) > div > div {
+			max-height: 300px;
+		}
+
+		> div {
+			display: grid;
+			grid-gap: 8px;
+
+			> div, > button {
+				overflow: hidden;
+				border-radius: 6px;
+				pointer-events: all;
+				min-height: 50px;
+			}
+
+
+			> :nth-child(1) {
 				grid-column: 1 / 2;
 				grid-row: 1 / 2;
 			}
 
-			> *:nth-child(2) {
+			> :nth-child(2) {
 				grid-column: 2 / 3;
 				grid-row: 1 / 2;
 			}
 
-			> *:nth-child(3) {
+			> :nth-child(3) {
 				grid-column: 1 / 2;
 				grid-row: 2 / 3;
 			}
 
-			> *:nth-child(4) {
+			> :nth-child(4) {
 				grid-column: 2 / 3;
 				grid-row: 2 / 3;
 			}

packages/client/src/components/MkSubNoteContent.vue

@@ -34,6 +34,7 @@
 			:class="{
 				collapsed,
 				isLong,
+				manyImages: note.files.length > 4,
 				showContent: note.cw && !showContent,
 				disableAnim: disableMfm,
 			}"
@@ -96,9 +97,7 @@
 					:to="`/notes/${note.renoteId}`"
 					>{{ i18n.ts.quoteAttached }}: ...</MkA
 				>
-				<div v-if="note.files.length > 0" class="files">
+				<XMediaList v-if="note.files.length > 0" :media-list="note.files" />
-					<XMediaList :media-list="note.files" />
-				</div>
 				<XPoll v-if="note.poll" :note="note" class="poll" />
 				<template v-if="detailed">
 					<MkUrlPreview
@@ -188,11 +187,14 @@ const emit = defineEmits<{
 
 const cwButton = ref<HTMLElement>();
 const showMoreButton = ref<HTMLElement>();
-const isLong =
+const isLong = !props.detailedView
-	!props.detailedView &&
+	&& ( props.note.cw == null
-	props.note.cw == null &&
+		&& (props.note.text != null
-	props.note.text != null &&
+			&& (props.note.text.split("\n").length > 9 || props.note.text.length > 500)
-	(props.note.text.split("\n").length > 9 || props.note.text.length > 500);
+		)
+		|| props.note.files.length > 4
+	);
+
 const collapsed = $ref(props.note.cw == null && isLong);
 
 const urls = props.note.text
@@ -285,7 +287,7 @@ function focusFooter(ev) {
 					background: var(--buttonHoverBg);
 				}
 			}
-			> .files {
+			> :deep(.files) {
 				margin-top: 0.4em;
 				margin-bottom: 0.4em;
 			}
@@ -332,9 +334,15 @@ function focusFooter(ev) {
 				-webkit-user-select: none;
 				-moz-user-select: none;
 			}
-			&.collapsed > .body {
+		}
+		&.collapsed {
+			&.manyImages {
+				max-height: calc(9em + 200px);
+			}
+			> .body {
 				box-sizing: border-box;
 			}
+		}
 		&.showContent {
 			> .body {
 				min-height: 2em;
@@ -353,7 +361,6 @@ function focusFooter(ev) {
 				top: 40px;
 			}
 		}
-		}
 
 		&.disableAnim :deep(span) {
 			animation: none !important;