CloudToys/puyopuyotetr.is
1
0
Fork 0
Code

[Glitch] Improve focal point modal on mobile

Browse Source 
Port 2ca6b2bb6c to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
ThibG 2019-08-15 22:49:00 +02:00 committed by Thibaut Girka
parent fcd2244015
commit ab0961fe9a
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js
View File

@ -228,7 +228,7 @@ class FocalPointModal extends ImmutablePureComponent {
<Button disabled={!dirty || detecting || length(description) > 420} text={intl.formatMessage(messages.apply)} onClick={this.handleSubmit} /> <Button disabled={!dirty || detecting || length(description) > 420} text={intl.formatMessage(messages.apply)} onClick={this.handleSubmit} />
</div> </div>
<div className='report-modal__statuses'> <div className='focal-point-modal__content'>
{focals && ( {focals && (
<div className={classNames('focal-point', { dragging })} ref={this.setRef} onMouseDown={this.handleMouseDown} onTouchStart={this.handleTouchStart}> <div className={classNames('focal-point', { dragging })} ref={this.setRef} onMouseDown={this.handleMouseDown} onTouchStart={this.handleTouchStart}>
{media.get('type') === 'image' && <img src={media.get('url')} width={width} height={height} alt='' />} {media.get('type') === 'image' && <img src={media.get('url')} width={width} height={height} alt='' />}

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

@ -528,7 +528,8 @@
} }
} }
.report-modal__statuses { .report-modal__statuses,
.focal-point-modal__content {
flex: 1 1 auto; flex: 1 1 auto;
min-height: 20vh; min-height: 20vh;
max-height: 80vh; max-height: 80vh;
@ -544,6 +545,12 @@
} }
} }
.focal-point-modal__content {
@media screen and (max-width: 480px) {
max-height: 40vh;
}
}
.report-modal__comment { .report-modal__comment {
padding: 20px; padding: 20px;
border-right: 1px solid $ui-secondary-color; border-right: 1px solid $ui-secondary-color;
@ -638,15 +645,6 @@
} }
} }
.report-modal__target {
padding: 20px;
.media-modal__close {
top: 19px;
right: 15px;
}
}
.actions-modal { .actions-modal {
.status { .status {
overflow-y: auto; overflow-y: auto;
@ -765,6 +763,15 @@
} }
} }
.report-modal__target {
padding: 15px;
.media-modal__close {
top: 14px;
right: 15px;
}
}
.embed-modal { .embed-modal {
max-width: 80vw; max-width: 80vw;
max-height: 80vh; max-height: 80vh;