Merge branch 'master' of https://github.com/syuilo/misskey

3 files changed, 58 insertions, 65 deletions

diff --git a/src/web/app/common/views/components/images.vue b/src/web/app/common/views/components/images.vue
deleted file mode 100644
index dc802a0180..0000000000
--- a/src/web/app/common/views/components/images.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-<div class="mk-images">
-	<mk-images-image v-for="image in images" ref="image" :image="image" :key="image.id"/>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['images'],
-	mounted() {
-		const tags = this.$refs.image as Vue[];
-
-		if (this.images.length == 1) {
-			(this.$el.style as any).gridTemplateRows = '1fr';
-
-			(tags[0].$el.style as any).gridColumn = '1 / 2';
-			(tags[0].$el.style as any).gridRow = '1 / 2';
-		} else if (this.images.length == 2) {
-			(this.$el.style as any).gridTemplateColumns = '1fr 1fr';
-			(this.$el.style as any).gridTemplateRows = '1fr';
-
-			(tags[0].$el.style as any).gridColumn = '1 / 2';
-			(tags[0].$el.style as any).gridRow = '1 / 2';
-			(tags[1].$el.style as any).gridColumn = '2 / 3';
-			(tags[1].$el.style as any).gridRow = '1 / 2';
-		} else if (this.images.length == 3) {
-			(this.$el.style as any).gridTemplateColumns = '1fr 0.5fr';
-			(this.$el.style as any).gridTemplateRows = '1fr 1fr';
-
-			(tags[0].$el.style as any).gridColumn = '1 / 2';
-			(tags[0].$el.style as any).gridRow = '1 / 3';
-			(tags[1].$el.style as any).gridColumn = '2 / 3';
-			(tags[1].$el.style as any).gridRow = '1 / 2';
-			(tags[2].$el.style as any).gridColumn = '2 / 3';
-			(tags[2].$el.style as any).gridRow = '2 / 3';
-		} else if (this.images.length == 4) {
-			(this.$el.style as any).gridTemplateColumns = '1fr 1fr';
-			(this.$el.style as any).gridTemplateRows = '1fr 1fr';
-
-			(tags[0].$el.style as any).gridColumn = '1 / 2';
-			(tags[0].$el.style as any).gridRow = '1 / 2';
-			(tags[1].$el.style as any).gridColumn = '2 / 3';
-			(tags[1].$el.style as any).gridRow = '1 / 2';
-			(tags[2].$el.style as any).gridColumn = '1 / 2';
-			(tags[2].$el.style as any).gridRow = '2 / 3';
-			(tags[3].$el.style as any).gridColumn = '2 / 3';
-			(tags[3].$el.style as any).gridRow = '2 / 3';
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-images
-	display grid
-	grid-gap 4px
-	height 256px
-
-	@media (max-width 500px)
-		height 192px
-</style>
diff --git a/src/web/app/common/views/components/index.ts b/src/web/app/common/views/components/index.ts
index fbf9d22a0b..b58ba37ecb 100644
--- a/src/web/app/common/views/components/index.ts
+++ b/src/web/app/common/views/components/index.ts
@@ -11,7 +11,7 @@ import reactionIcon from './reaction-icon.vue';
 import reactionsViewer from './reactions-viewer.vue';
 import time from './time.vue';
 import timer from './timer.vue';
-import images from './images.vue';
+import mediaList from './media-list.vue';
 import uploader from './uploader.vue';
 import specialMessage from './special-message.vue';
 import streamIndicator from './stream-indicator.vue';
@@ -36,7 +36,7 @@ Vue.component('mk-reaction-icon', reactionIcon);
 Vue.component('mk-reactions-viewer', reactionsViewer);
 Vue.component('mk-time', time);
 Vue.component('mk-timer', timer);
-Vue.component('mk-images', images);
+Vue.component('mk-media-list', mediaList);
 Vue.component('mk-uploader', uploader);
 Vue.component('mk-special-message', specialMessage);
 Vue.component('mk-stream-indicator', streamIndicator);
diff --git a/src/web/app/common/views/components/media-list.vue b/src/web/app/common/views/components/media-list.vue
new file mode 100644
index 0000000000..d0da584a40
--- /dev/null
+++ b/src/web/app/common/views/components/media-list.vue
@@ -0,0 +1,56 @@
+<template>
+<div class="mk-media-list" :data-count="mediaList.length">
+	<template v-for="media in mediaList">
+		<mk-media-image :image="media" :key="media.id"/>
+	</template>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['mediaList'],
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-media-list
+	display grid
+	grid-gap 4px
+	height 256px
+
+	@media (max-width 500px)
+		height 192px
+	
+	&[data-count="1"]
+		grid-template-rows 1fr
+	&[data-count="2"]
+		grid-template-columns 1fr 1fr
+		grid-template-rows 1fr
+	&[data-count="3"]
+		grid-template-columns 1fr 0.5fr
+		grid-template-rows 1fr 1fr
+		:nth-child(1)
+			grid-row 1 / 3
+		:nth-child(3)
+			grid-column 2 / 3
+			grid-row 2/3
+	&[data-count="4"]
+		grid-template-columns 1fr 1fr
+		grid-template-rows 1fr 1fr
+	
+	:nth-child(1)
+		grid-column 1 / 2
+		grid-row 1 / 2
+	:nth-child(2)
+		grid-column 2 / 3
+		grid-row 1 / 2
+	:nth-child(3)
+		grid-column 1 / 2
+		grid-row 2 / 3
+	:nth-child(4)
+		grid-column 2 / 3
+		grid-row 2 / 3
+		
+</style>