mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-04 01:38:54 +09:00
Code

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/web/app/desktop/tags/images-viewer.tag
View File

@ -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
max-width 100%
margin 0 auto
&:hover
> img
visibility hidden
visibility hidden
max-width: 100%
max-height: 256px
&: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>

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

@ -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 }>
<img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/>
</virtual>
<mk-images-viewer images={ post.media }/>
</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';

7
src/web/app/desktop/tags/post-detail.tag
View File

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

5
src/web/app/desktop/tags/timeline.tag
View File

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