From 2dba24d0da54b5be3d5435c250af832276ae2c8e Mon Sep 17 00:00:00 2001
From: rinsuki <428rinsuki+git@gmail.com>
Date: Mon, 26 Mar 2018 16:56:46 +0900
Subject: mk-images -> mk-media-list, mk-images-image -> mk-media-image

---
 src/web/app/common/views/components/images.vue     | 63 --------------------
 src/web/app/common/views/components/index.ts       |  4 +-
 src/web/app/common/views/components/media-list.vue | 63 ++++++++++++++++++++
 .../views/components/images-image-dialog.vue       | 69 ----------------------
 .../app/desktop/views/components/images-image.vue  | 63 --------------------
 src/web/app/desktop/views/components/index.ts      |  8 +--
 .../views/components/media-image-dialog.vue        | 69 ++++++++++++++++++++++
 .../app/desktop/views/components/media-image.vue   | 63 ++++++++++++++++++++
 .../desktop/views/components/post-detail.sub.vue   |  2 +-
 .../app/desktop/views/components/post-detail.vue   |  2 +-
 .../app/desktop/views/components/posts.post.vue    |  2 +-
 .../desktop/views/components/sub-post-content.vue  |  2 +-
 .../app/mobile/views/components/images-image.vue   | 31 ----------
 src/web/app/mobile/views/components/index.ts       |  4 +-
 .../app/mobile/views/components/media-image.vue    | 31 ++++++++++
 .../app/mobile/views/components/post-detail.vue    |  2 +-
 src/web/app/mobile/views/components/post.vue       |  2 +-
 .../mobile/views/components/sub-post-content.vue   |  2 +-
 18 files changed, 241 insertions(+), 241 deletions(-)
 delete mode 100644 src/web/app/common/views/components/images.vue
 create mode 100644 src/web/app/common/views/components/media-list.vue
 delete mode 100644 src/web/app/desktop/views/components/images-image-dialog.vue
 delete mode 100644 src/web/app/desktop/views/components/images-image.vue
 create mode 100644 src/web/app/desktop/views/components/media-image-dialog.vue
 create mode 100644 src/web/app/desktop/views/components/media-image.vue
 delete mode 100644 src/web/app/mobile/views/components/images-image.vue
 create mode 100644 src/web/app/mobile/views/components/media-image.vue

(limited to 'src')

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..b0e6685082
--- /dev/null
+++ b/src/web/app/common/views/components/media-list.vue
@@ -0,0 +1,63 @@
+<template>
+<div class="mk-media-list">
+	<mk-media-image v-for="media in mediaList" ref="media" :image="media" :key="media.id"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['mediaList'],
+	mounted() {
+		const tags = this.$refs.media as Vue[];
+
+		if (this.mediaList.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.mediaList.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.mediaList.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.mediaList.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-media-list
+	display grid
+	grid-gap 4px
+	height 256px
+
+	@media (max-width 500px)
+		height 192px
+</style>
diff --git a/src/web/app/desktop/views/components/images-image-dialog.vue b/src/web/app/desktop/views/components/images-image-dialog.vue
deleted file mode 100644
index 60afa7af82..0000000000
--- a/src/web/app/desktop/views/components/images-image-dialog.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-<div class="mk-images-image-dialog">
-	<div class="bg" @click="close"></div>
-	<img :src="image.url" :alt="image.name" :title="image.name" @click="close"/>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import * as anime from 'animejs';
-
-export default Vue.extend({
-	props: ['image'],
-	mounted() {
-		anime({
-			targets: this.$el,
-			opacity: 1,
-			duration: 100,
-			easing: 'linear'
-		});
-	},
-	methods: {
-		close() {
-			anime({
-				targets: this.$el,
-				opacity: 0,
-				duration: 100,
-				easing: 'linear',
-				complete: () => this.$destroy()
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-images-image-dialog
-	display block
-	position fixed
-	z-index 2048
-	top 0
-	left 0
-	width 100%
-	height 100%
-	opacity 0
-
-	> .bg
-		display block
-		position fixed
-		z-index 1
-		top 0
-		left 0
-		width 100%
-		height 100%
-		background rgba(0, 0, 0, 0.7)
-
-	> img
-		position fixed
-		z-index 2
-		top 0
-		right 0
-		bottom 0
-		left 0
-		max-width 100%
-		max-height 100%
-		margin auto
-		cursor zoom-out
-
-</style>
diff --git a/src/web/app/desktop/views/components/images-image.vue b/src/web/app/desktop/views/components/images-image.vue
deleted file mode 100644
index 5b7dc41739..0000000000
--- a/src/web/app/desktop/views/components/images-image.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-<a class="mk-images-image"
-	:href="image.url"
-	@mousemove="onMousemove"
-	@mouseleave="onMouseleave"
-	@click.prevent="onClick"
-	:style="style"
-	:title="image.name"
-></a>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import MkImagesImageDialog from './images-image-dialog.vue';
-
-export default Vue.extend({
-	props: ['image'],
-	computed: {
-		style(): any {
-			return {
-				'background-color': this.image.properties.average_color ? `rgb(${this.image.properties.average_color.join(',')})` : 'transparent',
-				'background-image': `url(${this.image.url}?thumbnail&size=512)`
-			};
-		}
-	},
-	methods: {
-		onMousemove(e) {
-			const rect = this.$el.getBoundingClientRect();
-			const mouseX = e.clientX - rect.left;
-			const mouseY = e.clientY - rect.top;
-			const xp = mouseX / this.$el.offsetWidth * 100;
-			const yp = mouseY / this.$el.offsetHeight * 100;
-			this.$el.style.backgroundPosition = xp + '% ' + yp + '%';
-			this.$el.style.backgroundImage = 'url("' + this.image.url + '?thumbnail")';
-		},
-
-		onMouseleave() {
-			this.$el.style.backgroundPosition = '';
-		},
-
-		onClick() {
-			(this as any).os.new(MkImagesImageDialog, {
-				image: this.image
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-images-image
-	display block
-	cursor zoom-in
-	overflow hidden
-	width 100%
-	height 100%
-	background-position center
-	border-radius 4px
-
-	&:not(:hover)
-		background-size cover
-
-</style>
diff --git a/src/web/app/desktop/views/components/index.ts b/src/web/app/desktop/views/components/index.ts
index 52b9680baa..9bca603a53 100644
--- a/src/web/app/desktop/views/components/index.ts
+++ b/src/web/app/desktop/views/components/index.ts
@@ -11,8 +11,8 @@ import postFormWindow from './post-form-window.vue';
 import repostFormWindow from './repost-form-window.vue';
 import analogClock from './analog-clock.vue';
 import ellipsisIcon from './ellipsis-icon.vue';
-import imagesImage from './images-image.vue';
-import imagesImageDialog from './images-image-dialog.vue';
+import mediaImage from './media-image.vue';
+import mediaImageDialog from './media-image-dialog.vue';
 import notifications from './notifications.vue';
 import postForm from './post-form.vue';
 import repostForm from './repost-form.vue';
@@ -40,8 +40,8 @@ Vue.component('mk-post-form-window', postFormWindow);
 Vue.component('mk-repost-form-window', repostFormWindow);
 Vue.component('mk-analog-clock', analogClock);
 Vue.component('mk-ellipsis-icon', ellipsisIcon);
-Vue.component('mk-images-image', imagesImage);
-Vue.component('mk-images-image-dialog', imagesImageDialog);
+Vue.component('mk-media-image', mediaImage);
+Vue.component('mk-media-image-dialog', mediaImageDialog);
 Vue.component('mk-notifications', notifications);
 Vue.component('mk-post-form', postForm);
 Vue.component('mk-repost-form', repostForm);
diff --git a/src/web/app/desktop/views/components/media-image-dialog.vue b/src/web/app/desktop/views/components/media-image-dialog.vue
new file mode 100644
index 0000000000..dec140d1c9
--- /dev/null
+++ b/src/web/app/desktop/views/components/media-image-dialog.vue
@@ -0,0 +1,69 @@
+<template>
+<div class="mk-media-image-dialog">
+	<div class="bg" @click="close"></div>
+	<img :src="image.url" :alt="image.name" :title="image.name" @click="close"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+
+export default Vue.extend({
+	props: ['image'],
+	mounted() {
+		anime({
+			targets: this.$el,
+			opacity: 1,
+			duration: 100,
+			easing: 'linear'
+		});
+	},
+	methods: {
+		close() {
+			anime({
+				targets: this.$el,
+				opacity: 0,
+				duration: 100,
+				easing: 'linear',
+				complete: () => this.$destroy()
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-media-image-dialog
+	display block
+	position fixed
+	z-index 2048
+	top 0
+	left 0
+	width 100%
+	height 100%
+	opacity 0
+
+	> .bg
+		display block
+		position fixed
+		z-index 1
+		top 0
+		left 0
+		width 100%
+		height 100%
+		background rgba(0, 0, 0, 0.7)
+
+	> img
+		position fixed
+		z-index 2
+		top 0
+		right 0
+		bottom 0
+		left 0
+		max-width 100%
+		max-height 100%
+		margin auto
+		cursor zoom-out
+
+</style>
diff --git a/src/web/app/desktop/views/components/media-image.vue b/src/web/app/desktop/views/components/media-image.vue
new file mode 100644
index 0000000000..bc02d0f9be
--- /dev/null
+++ b/src/web/app/desktop/views/components/media-image.vue
@@ -0,0 +1,63 @@
+<template>
+<a class="mk-media-image"
+	:href="image.url"
+	@mousemove="onMousemove"
+	@mouseleave="onMouseleave"
+	@click.prevent="onClick"
+	:style="style"
+	:title="image.name"
+></a>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import MkMediaImageDialog from './media-image-dialog.vue';
+
+export default Vue.extend({
+	props: ['image'],
+	computed: {
+		style(): any {
+			return {
+				'background-color': this.image.properties.average_color ? `rgb(${this.image.properties.average_color.join(',')})` : 'transparent',
+				'background-image': `url(${this.image.url}?thumbnail&size=512)`
+			};
+		}
+	},
+	methods: {
+		onMousemove(e) {
+			const rect = this.$el.getBoundingClientRect();
+			const mouseX = e.clientX - rect.left;
+			const mouseY = e.clientY - rect.top;
+			const xp = mouseX / this.$el.offsetWidth * 100;
+			const yp = mouseY / this.$el.offsetHeight * 100;
+			this.$el.style.backgroundPosition = xp + '% ' + yp + '%';
+			this.$el.style.backgroundImage = 'url("' + this.image.url + '?thumbnail")';
+		},
+
+		onMouseleave() {
+			this.$el.style.backgroundPosition = '';
+		},
+
+		onClick() {
+			(this as any).os.new(MkMediaImageDialog, {
+				image: this.image
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-media-image
+	display block
+	cursor zoom-in
+	overflow hidden
+	width 100%
+	height 100%
+	background-position center
+	border-radius 4px
+
+	&:not(:hover)
+		background-size cover
+
+</style>
diff --git a/src/web/app/desktop/views/components/post-detail.sub.vue b/src/web/app/desktop/views/components/post-detail.sub.vue
index bf6e3ac3b2..322e1a173a 100644
--- a/src/web/app/desktop/views/components/post-detail.sub.vue
+++ b/src/web/app/desktop/views/components/post-detail.sub.vue
@@ -18,7 +18,7 @@
 		<div class="body">
 			<mk-post-html v-if="post.ast" :ast="post.ast" :i="os.i" :class="$style.text"/>
 			<div class="media" v-if="post.media">
-				<mk-images :images="post.media"/>
+				<mk-media-list :mediaList="post.media"/>
 			</div>
 		</div>
 	</div>
diff --git a/src/web/app/desktop/views/components/post-detail.vue b/src/web/app/desktop/views/components/post-detail.vue
index 98777e224d..59cd01fbf3 100644
--- a/src/web/app/desktop/views/components/post-detail.vue
+++ b/src/web/app/desktop/views/components/post-detail.vue
@@ -40,7 +40,7 @@
 		<div class="body">
 			<mk-post-html :class="$style.text" v-if="p.ast" :ast="p.ast" :i="os.i"/>
 			<div class="media" v-if="p.media">
-				<mk-images :images="p.media"/>
+				<mk-media-list :mediaList="p.media"/>
 			</div>
 			<mk-poll v-if="p.poll" :post="p"/>
 			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
diff --git a/src/web/app/desktop/views/components/posts.post.vue b/src/web/app/desktop/views/components/posts.post.vue
index 073b89957a..cde9b6f85e 100644
--- a/src/web/app/desktop/views/components/posts.post.vue
+++ b/src/web/app/desktop/views/components/posts.post.vue
@@ -42,7 +42,7 @@
 					<a class="rp" v-if="p.repost">RP:</a>
 				</div>
 				<div class="media" v-if="p.media">
-					<mk-images :images="p.media"/>
+					<mk-media-list :mediaList="p.media"/>
 				</div>
 				<mk-poll v-if="p.poll" :post="p" ref="pollViewer"/>
 				<div class="tags" v-if="p.tags && p.tags.length > 0">
diff --git a/src/web/app/desktop/views/components/sub-post-content.vue b/src/web/app/desktop/views/components/sub-post-content.vue
index 7f4c3b4f6f..662853f65a 100644
--- a/src/web/app/desktop/views/components/sub-post-content.vue
+++ b/src/web/app/desktop/views/components/sub-post-content.vue
@@ -8,7 +8,7 @@
 	</div>
 	<details v-if="post.media">
 		<summary>({{ post.media.length }}つのメディア)</summary>
-		<mk-images :images="post.media"/>
+		<mk-media-list :mediaList="post.media"/>
 	</details>
 	<details v-if="post.poll">
 		<summary>投票</summary>
diff --git a/src/web/app/mobile/views/components/images-image.vue b/src/web/app/mobile/views/components/images-image.vue
deleted file mode 100644
index 6bc1dc0aee..0000000000
--- a/src/web/app/mobile/views/components/images-image.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-<a class="mk-images-image" :href="image.url" target="_blank" :style="style" :title="image.name"></a>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['image'],
-	computed: {
-		style(): any {
-			return {
-				'background-color': this.image.properties.average_color ? `rgb(${this.image.properties.average_color.join(',')})` : 'transparent',
-				'background-image': `url(${this.image.url}?thumbnail&size=512)`
-			};
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-images-image
-	display block
-	overflow hidden
-	width 100%
-	height 100%
-	background-position center
-	background-size cover
-	border-radius 4px
-
-</style>
diff --git a/src/web/app/mobile/views/components/index.ts b/src/web/app/mobile/views/components/index.ts
index 19135d08dc..4743f50e0d 100644
--- a/src/web/app/mobile/views/components/index.ts
+++ b/src/web/app/mobile/views/components/index.ts
@@ -4,7 +4,7 @@ import ui from './ui.vue';
 import timeline from './timeline.vue';
 import post from './post.vue';
 import posts from './posts.vue';
-import imagesImage from './images-image.vue';
+import mediaImage from './media-image.vue';
 import drive from './drive.vue';
 import postPreview from './post-preview.vue';
 import subPostContent from './sub-post-content.vue';
@@ -26,7 +26,7 @@ Vue.component('mk-ui', ui);
 Vue.component('mk-timeline', timeline);
 Vue.component('mk-post', post);
 Vue.component('mk-posts', posts);
-Vue.component('mk-images-image', imagesImage);
+Vue.component('mk-media-image', mediaImage);
 Vue.component('mk-drive', drive);
 Vue.component('mk-post-preview', postPreview);
 Vue.component('mk-sub-post-content', subPostContent);
diff --git a/src/web/app/mobile/views/components/media-image.vue b/src/web/app/mobile/views/components/media-image.vue
new file mode 100644
index 0000000000..faf8bad48a
--- /dev/null
+++ b/src/web/app/mobile/views/components/media-image.vue
@@ -0,0 +1,31 @@
+<template>
+<a class="mk-media-image" :href="image.url" target="_blank" :style="style" :title="image.name"></a>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['image'],
+	computed: {
+		style(): any {
+			return {
+				'background-color': this.image.properties.average_color ? `rgb(${this.image.properties.average_color.join(',')})` : 'transparent',
+				'background-image': `url(${this.image.url}?thumbnail&size=512)`
+			};
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-media-image
+	display block
+	overflow hidden
+	width 100%
+	height 100%
+	background-position center
+	background-size cover
+	border-radius 4px
+
+</style>
diff --git a/src/web/app/mobile/views/components/post-detail.vue b/src/web/app/mobile/views/components/post-detail.vue
index 4b0b59eff4..db7509d0f0 100644
--- a/src/web/app/mobile/views/components/post-detail.vue
+++ b/src/web/app/mobile/views/components/post-detail.vue
@@ -43,7 +43,7 @@
 				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
 			</div>
 			<div class="media" v-if="p.media">
-				<mk-images :images="p.media"/>
+				<mk-media-list :mediaList="p.media"/>
 			</div>
 			<mk-poll v-if="p.poll" :post="p"/>
 			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
diff --git a/src/web/app/mobile/views/components/post.vue b/src/web/app/mobile/views/components/post.vue
index 8df4dbf22e..cf4c38337d 100644
--- a/src/web/app/mobile/views/components/post.vue
+++ b/src/web/app/mobile/views/components/post.vue
@@ -41,7 +41,7 @@
 					<a class="rp" v-if="p.repost != null">RP:</a>
 				</div>
 				<div class="media" v-if="p.media">
-					<mk-images :images="p.media"/>
+					<mk-media-list :mediaList="p.media"/>
 				</div>
 				<mk-poll v-if="p.poll" :post="p" ref="pollViewer"/>
 				<div class="tags" v-if="p.tags && p.tags.length > 0">
diff --git a/src/web/app/mobile/views/components/sub-post-content.vue b/src/web/app/mobile/views/components/sub-post-content.vue
index b97f082559..7a9fcb633c 100644
--- a/src/web/app/mobile/views/components/sub-post-content.vue
+++ b/src/web/app/mobile/views/components/sub-post-content.vue
@@ -7,7 +7,7 @@
 	</div>
 	<details v-if="post.media">
 		<summary>({{ post.media.length }}個のメディア)</summary>
-		<mk-images :images="post.media"/>
+		<mk-media-list :mediaList="post.media"/>
 	</details>
 	<details v-if="post.poll">
 		<summary>%i18n:mobile.tags.mk-sub-post-content.poll%</summary>
-- 
cgit v1.2.3-freya


From 4d25db59a9593dbd234423b99fdd792e8d7b6cc7 Mon Sep 17 00:00:00 2001
From: rinsuki <428rinsuki+git@gmail.com>
Date: Mon, 26 Mar 2018 17:03:20 +0900
Subject: :mediaList -> :media-list

---
 src/web/app/desktop/views/components/post-detail.sub.vue  | 2 +-
 src/web/app/desktop/views/components/post-detail.vue      | 2 +-
 src/web/app/desktop/views/components/posts.post.vue       | 2 +-
 src/web/app/desktop/views/components/sub-post-content.vue | 2 +-
 src/web/app/mobile/views/components/post-detail.vue       | 2 +-
 src/web/app/mobile/views/components/post.vue              | 2 +-
 src/web/app/mobile/views/components/sub-post-content.vue  | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/web/app/desktop/views/components/post-detail.sub.vue b/src/web/app/desktop/views/components/post-detail.sub.vue
index 322e1a173a..c35a07d7ca 100644
--- a/src/web/app/desktop/views/components/post-detail.sub.vue
+++ b/src/web/app/desktop/views/components/post-detail.sub.vue
@@ -18,7 +18,7 @@
 		<div class="body">
 			<mk-post-html v-if="post.ast" :ast="post.ast" :i="os.i" :class="$style.text"/>
 			<div class="media" v-if="post.media">
-				<mk-media-list :mediaList="post.media"/>
+				<mk-media-list :media-list="post.media"/>
 			</div>
 		</div>
 	</div>
diff --git a/src/web/app/desktop/views/components/post-detail.vue b/src/web/app/desktop/views/components/post-detail.vue
index 59cd01fbf3..5845ab4f8f 100644
--- a/src/web/app/desktop/views/components/post-detail.vue
+++ b/src/web/app/desktop/views/components/post-detail.vue
@@ -40,7 +40,7 @@
 		<div class="body">
 			<mk-post-html :class="$style.text" v-if="p.ast" :ast="p.ast" :i="os.i"/>
 			<div class="media" v-if="p.media">
-				<mk-media-list :mediaList="p.media"/>
+				<mk-media-list :media-list="p.media"/>
 			</div>
 			<mk-poll v-if="p.poll" :post="p"/>
 			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
diff --git a/src/web/app/desktop/views/components/posts.post.vue b/src/web/app/desktop/views/components/posts.post.vue
index cde9b6f85e..71cbbc68d2 100644
--- a/src/web/app/desktop/views/components/posts.post.vue
+++ b/src/web/app/desktop/views/components/posts.post.vue
@@ -42,7 +42,7 @@
 					<a class="rp" v-if="p.repost">RP:</a>
 				</div>
 				<div class="media" v-if="p.media">
-					<mk-media-list :mediaList="p.media"/>
+					<mk-media-list :media-list="p.media"/>
 				</div>
 				<mk-poll v-if="p.poll" :post="p" ref="pollViewer"/>
 				<div class="tags" v-if="p.tags && p.tags.length > 0">
diff --git a/src/web/app/desktop/views/components/sub-post-content.vue b/src/web/app/desktop/views/components/sub-post-content.vue
index 662853f65a..8c8f42c801 100644
--- a/src/web/app/desktop/views/components/sub-post-content.vue
+++ b/src/web/app/desktop/views/components/sub-post-content.vue
@@ -8,7 +8,7 @@
 	</div>
 	<details v-if="post.media">
 		<summary>({{ post.media.length }}つのメディア)</summary>
-		<mk-media-list :mediaList="post.media"/>
+		<mk-media-list :media-list="post.media"/>
 	</details>
 	<details v-if="post.poll">
 		<summary>投票</summary>
diff --git a/src/web/app/mobile/views/components/post-detail.vue b/src/web/app/mobile/views/components/post-detail.vue
index db7509d0f0..9baa5de6d0 100644
--- a/src/web/app/mobile/views/components/post-detail.vue
+++ b/src/web/app/mobile/views/components/post-detail.vue
@@ -43,7 +43,7 @@
 				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
 			</div>
 			<div class="media" v-if="p.media">
-				<mk-media-list :mediaList="p.media"/>
+				<mk-media-list :media-list="p.media"/>
 			</div>
 			<mk-poll v-if="p.poll" :post="p"/>
 			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
diff --git a/src/web/app/mobile/views/components/post.vue b/src/web/app/mobile/views/components/post.vue
index cf4c38337d..d53649b117 100644
--- a/src/web/app/mobile/views/components/post.vue
+++ b/src/web/app/mobile/views/components/post.vue
@@ -41,7 +41,7 @@
 					<a class="rp" v-if="p.repost != null">RP:</a>
 				</div>
 				<div class="media" v-if="p.media">
-					<mk-media-list :mediaList="p.media"/>
+					<mk-media-list :media-list="p.media"/>
 				</div>
 				<mk-poll v-if="p.poll" :post="p" ref="pollViewer"/>
 				<div class="tags" v-if="p.tags && p.tags.length > 0">
diff --git a/src/web/app/mobile/views/components/sub-post-content.vue b/src/web/app/mobile/views/components/sub-post-content.vue
index 7a9fcb633c..389fc420ea 100644
--- a/src/web/app/mobile/views/components/sub-post-content.vue
+++ b/src/web/app/mobile/views/components/sub-post-content.vue
@@ -7,7 +7,7 @@
 	</div>
 	<details v-if="post.media">
 		<summary>({{ post.media.length }}個のメディア)</summary>
-		<mk-media-list :mediaList="post.media"/>
+		<mk-media-list :media-list="post.media"/>
 	</details>
 	<details v-if="post.poll">
 		<summary>%i18n:mobile.tags.mk-sub-post-content.poll%</summary>
-- 
cgit v1.2.3-freya


From 1696c50c8690382160c0986533a37d27d140791b Mon Sep 17 00:00:00 2001
From: rinsuki <428rinsuki+git@gmail.com>
Date: Mon, 26 Mar 2018 17:26:21 +0900
Subject: media-listのgridの処理をJSからCSSに移行
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/web/app/common/views/components/media-list.vue | 77 ++++++++++------------
 1 file changed, 35 insertions(+), 42 deletions(-)

(limited to 'src')

diff --git a/src/web/app/common/views/components/media-list.vue b/src/web/app/common/views/components/media-list.vue
index b0e6685082..d0da584a40 100644
--- a/src/web/app/common/views/components/media-list.vue
+++ b/src/web/app/common/views/components/media-list.vue
@@ -1,6 +1,8 @@
 <template>
-<div class="mk-media-list">
-	<mk-media-image v-for="media in mediaList" ref="media" :image="media" :key="media.id"/>
+<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>
 
@@ -9,46 +11,6 @@ import Vue from 'vue';
 
 export default Vue.extend({
 	props: ['mediaList'],
-	mounted() {
-		const tags = this.$refs.media as Vue[];
-
-		if (this.mediaList.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.mediaList.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.mediaList.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.mediaList.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>
 
@@ -60,4 +22,35 @@ export default Vue.extend({
 
 	@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>
-- 
cgit v1.2.3-freya