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

Display image better #981
This commit is contained in:
syuilo 2017-12-10 21:13:49 +09:00 committed by GitHub
commit 1c39ae0424
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 38 additions and 33 deletions

View file

@ -1,32 +1,47 @@
<mk-images-viewer> <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> <style>
:scope :scope
display block display grid
overflow hidden overflow hidden
border-radius 4px border-radius 4px
grid-gap .25em
> .image > div
cursor zoom-in cursor zoom-in
overflow hidden
background-position center
> img > img
display block 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) &:not(:hover)
background-image none !important background-size cover
&:nth-child(1):nth-last-child(3)
grid-row 1 / 3
</style> </style>
<script> <script>
this.images = this.opts.images; 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 => { this.mousemove = e => {
const rect = this.refs.view.getBoundingClientRect(); const rect = this.refs.view.getBoundingClientRect();
const mouseX = e.clientX - rect.left; const mouseX = e.clientX - rect.left;
@ -34,12 +49,19 @@
const xp = mouseX / this.refs.view.offsetWidth * 100; const xp = mouseX / this.refs.view.offsetWidth * 100;
const yp = mouseY / this.refs.view.offsetHeight * 100; const yp = mouseY / this.refs.view.offsetHeight * 100;
this.refs.view.style.backgroundPosition = xp + '% ' + yp + '%'; 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 = () => { this.click = () => {
riot.mount(document.body.appendChild(document.createElement('mk-image-dialog')), { riot.mount(document.body.appendChild(document.createElement('mk-image-dialog')), {
image: this.image image: this.image
}); });
}; };
this.image = this.opts.image;
</script> </script>
</mk-images-viewer> </mk-images-viewer-image>

View file

@ -9,7 +9,7 @@
<span class="username">@{ post.user.username }</span> <span class="username">@{ post.user.username }</span>
</div> </div>
<div class="right"> <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 }/> <mk-time time={ post.created_at }/>
</a> </a>
</div> </div>
@ -17,9 +17,7 @@
<div class="body"> <div class="body">
<div class="text" ref="text"></div> <div class="text" ref="text"></div>
<div class="media" if={ post.media }> <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> </div>
</div> </div>
@ -107,11 +105,6 @@
> mk-url-preview > mk-url-preview
margin-top 8px margin-top 8px
> .media
> img
display block
max-width 100%
</style> </style>
<script> <script>
import compile from '../../common/scripts/text-compiler'; import compile from '../../common/scripts/text-compiler';

View file

@ -37,7 +37,7 @@
<div class="body"> <div class="body">
<div class="text" ref="text"></div> <div class="text" ref="text"></div>
<div class="media" if={ p.media }> <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> </div>
<mk-poll if={ p.poll } post={ p }/> <mk-poll if={ p.poll } post={ p }/>
</div> </div>
@ -208,11 +208,6 @@
> mk-url-preview > mk-url-preview
margin-top 8px margin-top 8px
> .media
> img
display block
max-width 100%
> footer > footer
font-size 1.2em font-size 1.2em

View file

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