Fix edit media modal on small screens, touch events (#11573)
parent
9b1568c466
commit
375f2f3864
|
@ -84,6 +84,14 @@ class FocalPointModal extends ImmutablePureComponent {
|
|||
this.setState({ dragging: true });
|
||||
}
|
||||
|
||||
handleTouchStart = e => {
|
||||
document.addEventListener('touchmove', this.handleMouseMove);
|
||||
document.addEventListener('touchend', this.handleTouchEnd);
|
||||
|
||||
this.updatePosition(e);
|
||||
this.setState({ dragging: true });
|
||||
}
|
||||
|
||||
handleMouseMove = e => {
|
||||
this.updatePosition(e);
|
||||
}
|
||||
|
@ -95,6 +103,13 @@ class FocalPointModal extends ImmutablePureComponent {
|
|||
this.setState({ dragging: false });
|
||||
}
|
||||
|
||||
handleTouchEnd = () => {
|
||||
document.removeEventListener('touchmove', this.handleMouseMove);
|
||||
document.removeEventListener('touchend', this.handleTouchEnd);
|
||||
|
||||
this.setState({ dragging: false });
|
||||
}
|
||||
|
||||
updatePosition = e => {
|
||||
const { x, y } = getPointerPosition(this.node, e);
|
||||
const focusX = (x - .5) * 2;
|
||||
|
@ -225,7 +240,7 @@ class FocalPointModal extends ImmutablePureComponent {
|
|||
</div>
|
||||
|
||||
<div className='focal-point__reticle' style={{ top: `${y * 100}%`, left: `${x * 100}%` }} />
|
||||
<div className='focal-point__overlay' onMouseDown={this.handleMouseDown} />
|
||||
<div className='focal-point__overlay' onMouseDown={this.handleMouseDown} onTouchStart={this.handleTouchStart} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
|
@ -150,7 +150,7 @@ button {
|
|||
.layout-single-column .app-holder {
|
||||
&,
|
||||
& > div {
|
||||
min-height: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -5757,6 +5757,11 @@ noscript {
|
|||
position: relative;
|
||||
cursor: move;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: $base-shadow-color;
|
||||
|
||||
img,
|
||||
video {
|
||||
|
@ -5807,6 +5812,17 @@ noscript {
|
|||
box-shadow: 0 0 14px rgba($base-shadow-color, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
img,
|
||||
video {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account__header__content {
|
||||
|
|
Loading…
Reference in New Issue