diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue | 18 |
1 files changed, 8 insertions, 10 deletions
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue index c3cfe54eb4d..57f373fca21 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue @@ -25,7 +25,7 @@ export default { swipeMaxWidth: undefined, swipeMaxHeight: undefined, swipeBarPos: 1, - swipeWrapWidth: undefined, + swipeWrapWidth: 0, }; }, computed: { @@ -63,7 +63,7 @@ export default { leftValue = clientWidth - spaceLeft; } - this.swipeWrapWidth = this.swipeMaxWidth - leftValue; + this.swipeWrapWidth = (leftValue / clientWidth) * 100; this.swipeBarPos = leftValue; }, startDrag() { @@ -81,7 +81,6 @@ export default { // Add 2 for border width this.swipeMaxWidth = Math.max(this.swipeOldImgInfo.renderedWidth, this.swipeNewImgInfo.renderedWidth) + 2; - this.swipeWrapWidth = this.swipeMaxWidth; this.swipeMaxHeight = Math.max(this.swipeOldImgInfo.renderedHeight, this.swipeNewImgInfo.renderedHeight) + 2; @@ -107,10 +106,6 @@ export default { <div class="swipe view"> <div ref="swipeFrame" - :style="{ - 'width': swipeMaxPixelWidth, - 'height': swipeMaxPixelHeight, - }" class="swipe-frame"> <image-viewer key="swipeOldImg" @@ -123,14 +118,17 @@ export default { <div ref="swipeWrap" :style="{ - 'width': swipeWrapPixelWidth, - 'height': swipeMaxPixelHeight, + width: `${swipeWrapWidth}%` }" - class="swipe-wrap"> + class="swipe-wrap" + > <image-viewer key="swipeNewImg" :render-info="false" :path="newPath" + :style="{ + width: swipeMaxPixelWidth + }" class="frame added" @imgLoaded="swipeNewImgLoaded" > |