tykayn/mastodon
1
0
Fork 0
mirror of https://framagit.org/tykayn/mastodon.git synced 2023-08-25 08:33:12 +02:00
Code Issues Projects Releases Wiki Activity

[Glitch] Fix edit media modal on small screens, touch events

Browse Source 
Port 1bea318197 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Eugen Rochko 2019-08-15 20:28:56 +02:00 committed by Thibaut Girka
parent 5c35c9c409
commit 91d968bf72
3 changed files with 46 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/javascript/flavours/glitch/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>
)}

14
app/javascript/flavours/glitch/styles/basics.scss
View File

@ -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%;
}
}

16
app/javascript/flavours/glitch/styles/components/modal.scss
View File

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