mirror/whippy-edition
1
0
Fork 0
mirror of https://github.com/whippyshou/mastodon synced 2024-11-24 15:16:26 +09:00
Code

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/javascript/mastodon/features/ui/components/focal_point_modal.js
View File

@ -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>
)}

2
app/javascript/styles/mastodon/basics.scss
View File

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

16
app/javascript/styles/mastodon/components.scss
View File

@ -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 {