From 7f3878453b1d640761517c29d580885d571a0ba9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 15 Feb 2018 15:14:28 +0900
Subject: [PATCH] wip

---
 .../views/components/images.vue               | 17 ++--
 .../desktop/views/components/images-image.vue | 18 ++--
 src/web/app/mobile/tags/images.tag            | 82 -------------------
 .../views/{ => components}/friends-maker.vue  |  0
 .../mobile/views/components/images-image.vue  | 37 +++++++++
 .../views/{ => components}/post-form.vue      |  0
 .../views/{ => components}/post-preview.vue   |  0
 .../views/{ => components}/posts-post-sub.vue |  0
 .../views/{ => components}/posts-post.vue     |  0
 .../mobile/views/{ => components}/posts.vue   |  0
 .../{ => components}/sub-post-content.vue     |  0
 .../views/{ => components}/timeline.vue       |  0
 .../views/{ => components}/ui-header.vue      |  0
 .../mobile/views/{ => components}/ui-nav.vue  |  0
 .../app/mobile/views/{ => components}/ui.vue  |  0
 .../views/{ => components}/user-card.vue      |  0
 16 files changed, 57 insertions(+), 97 deletions(-)
 rename src/web/app/{desktop => common}/views/components/images.vue (97%)
 delete mode 100644 src/web/app/mobile/tags/images.tag
 rename src/web/app/mobile/views/{ => components}/friends-maker.vue (100%)
 create mode 100644 src/web/app/mobile/views/components/images-image.vue
 rename src/web/app/mobile/views/{ => components}/post-form.vue (100%)
 rename src/web/app/mobile/views/{ => components}/post-preview.vue (100%)
 rename src/web/app/mobile/views/{ => components}/posts-post-sub.vue (100%)
 rename src/web/app/mobile/views/{ => components}/posts-post.vue (100%)
 rename src/web/app/mobile/views/{ => components}/posts.vue (100%)
 rename src/web/app/mobile/views/{ => components}/sub-post-content.vue (100%)
 rename src/web/app/mobile/views/{ => components}/timeline.vue (100%)
 rename src/web/app/mobile/views/{ => components}/ui-header.vue (100%)
 rename src/web/app/mobile/views/{ => components}/ui-nav.vue (100%)
 rename src/web/app/mobile/views/{ => components}/ui.vue (100%)
 rename src/web/app/mobile/views/{ => components}/user-card.vue (100%)

diff --git a/src/web/app/desktop/views/components/images.vue b/src/web/app/common/views/components/images.vue
similarity index 97%
rename from src/web/app/desktop/views/components/images.vue
rename to src/web/app/common/views/components/images.vue
index f02ecbaa8..dc802a018 100644
--- a/src/web/app/desktop/views/components/images.vue
+++ b/src/web/app/common/views/components/images.vue
@@ -4,13 +4,6 @@
 </div>
 </template>
 
-<style lang="stylus" scoped>
-.mk-images
-	display grid
-	grid-gap 4px
-	height 256px
-</style>
-
 <script lang="ts">
 import Vue from 'vue';
 
@@ -58,3 +51,13 @@ export default Vue.extend({
 	}
 });
 </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/desktop/views/components/images-image.vue b/src/web/app/desktop/views/components/images-image.vue
index 5ef8ffcda..b29428ac3 100644
--- a/src/web/app/desktop/views/components/images-image.vue
+++ b/src/web/app/desktop/views/components/images-image.vue
@@ -1,11 +1,14 @@
 <template>
-<a class="mk-images-image"
-	:href="image.url"
-	@mousemove="onMousemove"
-	@mouseleave="onMouseleave"
-	@click.prevent="onClick"
-	:style="style"
-	:title="image.name"></a>
+<div>
+	<a class="mk-images-image"
+		:href="image.url"
+		@mousemove="onMousemove"
+		@mouseleave="onMouseleave"
+		@click.prevent="onClick"
+		:style="style"
+		:title="image.name"
+	></a>
+</div>
 </template>
 
 <script lang="ts">
@@ -50,7 +53,6 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-images-image
-	display block
 	overflow hidden
 	border-radius 4px
 
diff --git a/src/web/app/mobile/tags/images.tag b/src/web/app/mobile/tags/images.tag
deleted file mode 100644
index 7d95d6de2..000000000
--- a/src/web/app/mobile/tags/images.tag
+++ /dev/null
@@ -1,82 +0,0 @@
-<mk-images>
-	<template each={ image in images }>
-		<mk-images-image image={ image }/>
-	</template>
-	<style lang="stylus" scoped>
-		:scope
-			display grid
-			grid-gap 4px
-			height 256px
-
-			@media (max-width 500px)
-				height 192px
-	</style>
-	<script lang="typescript">
-		this.images = this.opts.images;
-
-		this.on('mount', () => {
-			if (this.images.length == 1) {
-				this.root.style.gridTemplateRows = '1fr';
-
-				this.tags['mk-images-image'].root.style.gridColumn = '1 / 2';
-				this.tags['mk-images-image'].root.style.gridRow = '1 / 2';
-			} else if (this.images.length == 2) {
-				this.root.style.gridTemplateColumns = '1fr 1fr';
-				this.root.style.gridTemplateRows = '1fr';
-
-				this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
-				this.tags['mk-images-image'][0].root.style.gridRow = '1 / 2';
-				this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
-				this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
-			} else if (this.images.length == 3) {
-				this.root.style.gridTemplateColumns = '1fr 0.5fr';
-				this.root.style.gridTemplateRows = '1fr 1fr';
-
-				this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
-				this.tags['mk-images-image'][0].root.style.gridRow = '1 / 3';
-				this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
-				this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
-				this.tags['mk-images-image'][2].root.style.gridColumn = '2 / 3';
-				this.tags['mk-images-image'][2].root.style.gridRow = '2 / 3';
-			} else if (this.images.length == 4) {
-				this.root.style.gridTemplateColumns = '1fr 1fr';
-				this.root.style.gridTemplateRows = '1fr 1fr';
-
-				this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
-				this.tags['mk-images-image'][0].root.style.gridRow = '1 / 2';
-				this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
-				this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
-				this.tags['mk-images-image'][2].root.style.gridColumn = '1 / 2';
-				this.tags['mk-images-image'][2].root.style.gridRow = '2 / 3';
-				this.tags['mk-images-image'][3].root.style.gridColumn = '2 / 3';
-				this.tags['mk-images-image'][3].root.style.gridRow = '2 / 3';
-			}
-		});
-	</script>
-</mk-images>
-
-<mk-images-image>
-	<a ref="view" href={ image.url } target="_blank" style={ styles } title={ image.name }></a>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			overflow hidden
-			border-radius 4px
-
-			> a
-				display block
-				overflow hidden
-				width 100%
-				height 100%
-				background-position center
-				background-size cover
-
-	</style>
-	<script lang="typescript">
-		this.image = this.opts.image;
-		this.styles = {
-			'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>
-</mk-images-image>
diff --git a/src/web/app/mobile/views/friends-maker.vue b/src/web/app/mobile/views/components/friends-maker.vue
similarity index 100%
rename from src/web/app/mobile/views/friends-maker.vue
rename to src/web/app/mobile/views/components/friends-maker.vue
diff --git a/src/web/app/mobile/views/components/images-image.vue b/src/web/app/mobile/views/components/images-image.vue
new file mode 100644
index 000000000..e89923492
--- /dev/null
+++ b/src/web/app/mobile/views/components/images-image.vue
@@ -0,0 +1,37 @@
+<template>
+<div>
+	<a class="mk-images-image" :href="image.url" target="_blank" :style="style" :title="image.name"></a>
+</div>
+</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
+	border-radius 4px
+
+	> a
+		display block
+		overflow hidden
+		width 100%
+		height 100%
+		background-position center
+		background-size cover
+
+</style>
diff --git a/src/web/app/mobile/views/post-form.vue b/src/web/app/mobile/views/components/post-form.vue
similarity index 100%
rename from src/web/app/mobile/views/post-form.vue
rename to src/web/app/mobile/views/components/post-form.vue
diff --git a/src/web/app/mobile/views/post-preview.vue b/src/web/app/mobile/views/components/post-preview.vue
similarity index 100%
rename from src/web/app/mobile/views/post-preview.vue
rename to src/web/app/mobile/views/components/post-preview.vue
diff --git a/src/web/app/mobile/views/posts-post-sub.vue b/src/web/app/mobile/views/components/posts-post-sub.vue
similarity index 100%
rename from src/web/app/mobile/views/posts-post-sub.vue
rename to src/web/app/mobile/views/components/posts-post-sub.vue
diff --git a/src/web/app/mobile/views/posts-post.vue b/src/web/app/mobile/views/components/posts-post.vue
similarity index 100%
rename from src/web/app/mobile/views/posts-post.vue
rename to src/web/app/mobile/views/components/posts-post.vue
diff --git a/src/web/app/mobile/views/posts.vue b/src/web/app/mobile/views/components/posts.vue
similarity index 100%
rename from src/web/app/mobile/views/posts.vue
rename to src/web/app/mobile/views/components/posts.vue
diff --git a/src/web/app/mobile/views/sub-post-content.vue b/src/web/app/mobile/views/components/sub-post-content.vue
similarity index 100%
rename from src/web/app/mobile/views/sub-post-content.vue
rename to src/web/app/mobile/views/components/sub-post-content.vue
diff --git a/src/web/app/mobile/views/timeline.vue b/src/web/app/mobile/views/components/timeline.vue
similarity index 100%
rename from src/web/app/mobile/views/timeline.vue
rename to src/web/app/mobile/views/components/timeline.vue
diff --git a/src/web/app/mobile/views/ui-header.vue b/src/web/app/mobile/views/components/ui-header.vue
similarity index 100%
rename from src/web/app/mobile/views/ui-header.vue
rename to src/web/app/mobile/views/components/ui-header.vue
diff --git a/src/web/app/mobile/views/ui-nav.vue b/src/web/app/mobile/views/components/ui-nav.vue
similarity index 100%
rename from src/web/app/mobile/views/ui-nav.vue
rename to src/web/app/mobile/views/components/ui-nav.vue
diff --git a/src/web/app/mobile/views/ui.vue b/src/web/app/mobile/views/components/ui.vue
similarity index 100%
rename from src/web/app/mobile/views/ui.vue
rename to src/web/app/mobile/views/components/ui.vue
diff --git a/src/web/app/mobile/views/user-card.vue b/src/web/app/mobile/views/components/user-card.vue
similarity index 100%
rename from src/web/app/mobile/views/user-card.vue
rename to src/web/app/mobile/views/components/user-card.vue