mirror of
https://github.com/kikobar/mastodon.git
synced 2024-12-27 08:14:25 +00:00
Improve focal point modal on mobile (#11575)
* Reduce padding around report modal and focal point modal title * Increase max allowed height for focal point modal content
This commit is contained in:
parent
d37126fd03
commit
2ca6b2bb6c
|
@ -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='' />}
|
||||||
|
|
|
@ -4534,7 +4534,8 @@ a.status-card.compact:hover {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
||||||
|
@ -4555,6 +4556,12 @@ a.status-card.compact:hover {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
@ -4749,10 +4756,10 @@ a.status-card.compact:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.report-modal__target {
|
.report-modal__target {
|
||||||
padding: 20px;
|
padding: 15px;
|
||||||
|
|
||||||
.media-modal__close {
|
.media-modal__close {
|
||||||
top: 19px;
|
top: 14px;
|
||||||
right: 15px;
|
right: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue