Merge pull request #982 from tamaina/display-image-better

Display image better #981

src/web/app/desktop/tags/images-viewer.tag

@@ -1,32 +1,47 @@
 <mk-images-viewer>
-	<div class="image" ref="view" onmousemove={ mousemove } style={ 'background-image: url(' + image.url + '?thumbnail' } onclick={ click }><img src={ image.url + '?thumbnail&size=512' } alt={ image.name } title={ image.name }/></div>
+	<virtual each={ image in images }>
+		<mk-images-viewer-image ref="wrap" image={ image } images={ images }/>
+	</virtual>
 	<style>
 		:scope
-			display block
+			display grid
 			overflow hidden
 			border-radius 4px
+			grid-gap .25em
 
-			> .image
+			> div
 				cursor zoom-in
+				overflow hidden
+				background-position center
 
 				> img
 					display block
-					max-height 256px
+					visibility hidden
-					max-width 100%
+					max-width: 100%
-					margin 0 auto
+					max-height: 256px
-
-				&:hover
-					> img
-						visibility hidden
 
 				&:not(:hover)
-					background-image none !important
+					background-size cover
 
+				&:nth-child(1):nth-last-child(3)
+					grid-row 1 / 3
 	</style>
 	<script>
 		this.images = this.opts.images;
-		this.image = this.images[0];
 
+		this.on('mount', () => {
+			if(this.images.length >= 3) this.refs.wrap.style.gridAutoRows = "9em";
+			if(this.images.length == 2) this.refs.wrap.style.gridAutoRows = "12em";
+			if(this.images.length == 1) this.refs.wrap.style.gridAutoRows = "256px";
+			if(this.images.length == 4 || this.images.length == 2) this.refs.wrap.style.gridTemplateColumns = "repeat(2, 1fr)";
+			if(this.images.length == 3) this.refs.wrap.style.gridTemplateColumns = "65% 1fr";
+		})
+	</script>
+</mk-images-viewer>
+
+<mk-images-viewer-image>
+	<div ref="view" onmousemove={ mousemove } onmouseleave={ mouseleave } style={ 'background-image: url(' + image.url + '?thumbnail&size=512' } onclick={ click }><img ref="image" src={ image.url + '?thumbnail&size=512' } alt={ image.name } title={ image.name }/></div>
+	<script>
 		this.mousemove = e => {
 			const rect = this.refs.view.getBoundingClientRect();
 			const mouseX = e.clientX - rect.left;
@@ -34,12 +49,19 @@
 			const xp = mouseX / this.refs.view.offsetWidth * 100;
 			const yp = mouseY / this.refs.view.offsetHeight * 100;
 			this.refs.view.style.backgroundPosition = xp + '% ' + yp + '%';
+			this.refs.view.style.backgroundImage = 'url("' + this.image.url + '?thumbnail")';
 		};
 
+		this.mouseleave = () => {
+			this.refs.view.style.backgroundPosition = "";
+		}
+
 		this.click = () => {
 			riot.mount(document.body.appendChild(document.createElement('mk-image-dialog')), {
 				image: this.image
 			});
 		};
+
+		this.image = this.opts.image;
 	</script>
-</mk-images-viewer>
+</mk-images-viewer-image>

src/web/app/desktop/tags/post-detail-sub.tag

@@ -9,7 +9,7 @@
 				<span class="username">@{ post.user.username }</span>
 			</div>
 			<div class="right">
-				<a class="time" href={ '/' + this.post.user.username + '/' + this.post.id }>
+				<a class="time" href={ '/' + post.user.username + '/' + post.id }>
 					<mk-time time={ post.created_at }/>
 				</a>
 			</div>
@@ -17,9 +17,7 @@
 		<div class="body">
 			<div class="text" ref="text"></div>
 			<div class="media" if={ post.media }>
-				<virtual each={ file in post.media }>
+				<mk-images-viewer images={ post.media }/>
-					<img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/>
-				</virtual>
 			</div>
 		</div>
 	</div>
@@ -107,11 +105,6 @@
 						> mk-url-preview
 							margin-top 8px
 
-					> .media
-						> img
-							display block
-							max-width 100%
-
 	</style>
 	<script>
 		import compile from '../../common/scripts/text-compiler';

src/web/app/desktop/tags/post-detail.tag

@@ -37,7 +37,7 @@
 			<div class="body">
 				<div class="text" ref="text"></div>
 				<div class="media" if={ p.media }>
-					<virtual each={ file in p.media }><img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/></virtual>
+					<mk-images-viewer images={ p.media }/>
 				</div>
 				<mk-poll if={ p.poll } post={ p }/>
 			</div>
@@ -208,11 +208,6 @@
 							> mk-url-preview
 								margin-top 8px
 
-						> .media
-							> img
-								display block
-								max-width 100%
-
 					> footer
 						font-size 1.2em
 

src/web/app/desktop/tags/timeline.tag

@@ -357,11 +357,6 @@
 								background $theme-color
 								border-radius 4px
 
-						> .media
-							> img
-								display block
-								max-width 100%
-
 						> mk-poll
 							font-size 80%