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

[Client] Improve usability

Browse Source
This commit is contained in:
syuilo 2018-11-09 14:10:23 +09:00
parent 2614771a7c
commit ae6293cb6b
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
2 changed files with 4 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/client/app/desktop/views/components/media-image.vue
View File

@ -7,8 +7,6 @@
</div>
<a class="lcjomzwbohoelkxsnuqjiaccdbdfiazy" v-else
:href="image.url"
@mousemove="onMousemove"
@mouseleave="onMouseleave"
@click.prevent="onClick"
:style="style"
:title="image.name"
@ -45,20 +43,6 @@ export default Vue.extend({
}
},
methods: {
onMousemove(e) {
const rect = this.$el.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
const xp = mouseX / this.$el.offsetWidth * 100;
const yp = mouseY / this.$el.offsetHeight * 100;
this.$el.style.backgroundPosition = `${xp}% ${yp}%`;
this.$el.style.backgroundImage = `url("${this.image.url}")`;
},
onMouseleave() {
this.$el.style.backgroundPosition = '';
},
onClick() {
this.$root.new(ImageViewer, {
image: this.image
@ -76,9 +60,8 @@ export default Vue.extend({
width 100%
height 100%
background-position center
&:not(:hover)
background-size cover
background-size contain
background-repeat no-repeat
.ldwbgwstjsdgcjruamauqdrffetqudry
display flex

3
src/client/app/mobile/views/components/media-image.vue
View File

@ -62,7 +62,8 @@ export default Vue.extend({
width 100%
height 100%
background-position center
background-size cover
background-size contain
background-repeat no-repeat
.qjewsnkgzzxlxtzncydssfbgjibiehcy
display flex