Fix edit media modal on small screens, touch events (#11573)

This commit is contained in:
Eugen Rochko 2019-08-15 20:28:56 +02:00 committed by GitHub
parent cdc474628d
commit 1bea318197
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 2 deletions

View file

@ -84,6 +84,14 @@ class FocalPointModal extends ImmutablePureComponent {
this.setState({ dragging: true }); 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 => { handleMouseMove = e => {
this.updatePosition(e); this.updatePosition(e);
} }
@ -95,6 +103,13 @@ class FocalPointModal extends ImmutablePureComponent {
this.setState({ dragging: false }); this.setState({ dragging: false });
} }
handleTouchEnd = () => {
document.removeEventListener('touchmove', this.handleMouseMove);
document.removeEventListener('touchend', this.handleTouchEnd);
this.setState({ dragging: false });
}
updatePosition = e => { updatePosition = e => {
const { x, y } = getPointerPosition(this.node, e); const { x, y } = getPointerPosition(this.node, e);
const focusX = (x - .5) * 2; const focusX = (x - .5) * 2;
@ -225,7 +240,7 @@ class FocalPointModal extends ImmutablePureComponent {
</div> </div>
<div className='focal-point__reticle' style={{ top: `${y * 100}%`, left: `${x * 100}%` }} /> <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> </div>
)} )}

View file

@ -150,7 +150,7 @@ button {
.layout-single-column .app-holder { .layout-single-column .app-holder {
&, &,
& > div { & > div {
min-height: 100%; min-height: 100vh;
} }
} }

View file

@ -5757,6 +5757,11 @@ noscript {
position: relative; position: relative;
cursor: move; cursor: move;
overflow: hidden; overflow: hidden;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: $base-shadow-color;
img, img,
video { video {
@ -5807,6 +5812,17 @@ noscript {
box-shadow: 0 0 14px rgba($base-shadow-color, 0.2); 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 { .account__header__content {