wip

16 files changed, 57 insertions, 97 deletions

diff --git a/src/web/app/desktop/views/components/images.vue b/src/web/app/common/views/components/images.vue
index f02ecbaa8c..dc802a0180 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 5ef8ffcdae..b29428ac38 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 7d95d6de21..0000000000
--- 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
index a7a81aeb72..a7a81aeb72 100644
--- a/src/web/app/mobile/views/friends-maker.vue
+++ b/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 0000000000..e89923492d
--- /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
index 49f6a94d8e..49f6a94d8e 100644
--- a/src/web/app/mobile/views/post-form.vue
+++ b/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
index ccb8b5f336..ccb8b5f336 100644
--- a/src/web/app/mobile/views/post-preview.vue
+++ b/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
index 421d51b92e..421d51b92e 100644
--- a/src/web/app/mobile/views/posts-post-sub.vue
+++ b/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
index 4dd82e6486..4dd82e6486 100644
--- a/src/web/app/mobile/views/posts-post.vue
+++ b/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
index 0edda5e94c..0edda5e94c 100644
--- a/src/web/app/mobile/views/posts.vue
+++ b/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
index 48f3791aa5..48f3791aa5 100644
--- a/src/web/app/mobile/views/sub-post-content.vue
+++ b/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
index 77c24a4692..77c24a4692 100644
--- a/src/web/app/mobile/views/timeline.vue
+++ b/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
index 176751a663..176751a663 100644
--- a/src/web/app/mobile/views/ui-header.vue
+++ b/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
index 3765ce8870..3765ce8870 100644
--- a/src/web/app/mobile/views/ui-nav.vue
+++ b/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
index aa5e2457c0..aa5e2457c0 100644
--- a/src/web/app/mobile/views/ui.vue
+++ b/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
index f70def48f8..f70def48f8 100644
--- a/src/web/app/mobile/views/user-card.vue
+++ b/src/web/app/mobile/views/components/user-card.vue