From 7b866cca25319cde3065f6abffac615f26bb6105 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 9 Nov 2018 14:10:23 +0900
Subject: [PATCH] [Client] Improve usability
---
.../desktop/views/components/media-image.vue | 21 ++-----------------
.../mobile/views/components/media-image.vue | 3 ++-
2 files changed, 4 insertions(+), 20 deletions(-)
diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue
index e4594dc21..446e50093 100644
--- a/src/client/app/desktop/views/components/media-image.vue
+++ b/src/client/app/desktop/views/components/media-image.vue
@@ -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
diff --git a/src/client/app/mobile/views/components/media-image.vue b/src/client/app/mobile/views/components/media-image.vue
index 4d4651676..dbb275b51 100644
--- a/src/client/app/mobile/views/components/media-image.vue
+++ b/src/client/app/mobile/views/components/media-image.vue
@@ -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