mirror of
https://iceshrimp.dev/iceshrimp/iceshrimp
synced 2024-12-05 10:18:05 +09:00
Merge pull request #982 from tamaina/display-image-better
Display image better #981
This commit is contained in:
commit
394dda5a0b
@ -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>
|
@ -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';
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
@ -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%
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user