forked from treehouse/mastodon
[Glitch] Fix edit media modal on small screens, touch events
Port 1bea318197
to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
signup-info-prompt
parent
5c35c9c409
commit
91d968bf72
|
@ -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>
|
||||
)}
|
||||
|
||||
|
|
|
@ -133,3 +133,17 @@ button {
|
|||
outline: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-single-column .app-holder {
|
||||
&,
|
||||
& > div {
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-multiple-columns .app-holder {
|
||||
&,
|
||||
& > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -829,6 +829,11 @@
|
|||
position: relative;
|
||||
cursor: move;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: $base-shadow-color;
|
||||
|
||||
img,
|
||||
video {
|
||||
|
@ -879,6 +884,17 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filtered-status-info {
|
||||
|
|
Loading…
Reference in New Issue