wip

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>

src/web/app/desktop/views/components/images-image.vue

@@ -1,11 +1,14 @@
 <template>
-<a class="mk-images-image"
+<div>
-	:href="image.url"
+	<a class="mk-images-image"
-	@mousemove="onMousemove"
+		:href="image.url"
-	@mouseleave="onMouseleave"
+		@mousemove="onMousemove"
-	@click.prevent="onClick"
+		@mouseleave="onMouseleave"
-	:style="style"
+		@click.prevent="onClick"
-	:title="image.name"></a>
+		: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
 

src/web/app/mobile/tags/images.tag

@@ -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>

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>