diff options
author | ThibG <thib@sitedethib.com> | 2019-08-15 22:49:00 +0200 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2019-08-15 22:49:00 +0200 |
commit | 2ca6b2bb6c9e811ad98e3df23e70efbf22882e42 (patch) | |
tree | 1f51f7857eaea5f63e7f0d64a398e822a2ee7d43 /app/javascript | |
parent | d37126fd03e47c32eaf532937dfc843b952d0d5a (diff) |
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
Diffstat (limited to 'app/javascript')
-rw-r--r-- | app/javascript/mastodon/features/ui/components/focal_point_modal.js | 2 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/components.scss | 13 |
2 files changed, 11 insertions, 4 deletions
diff --git a/app/javascript/mastodon/features/ui/components/focal_point_modal.js b/app/javascript/mastodon/features/ui/components/focal_point_modal.js index 67c560620..e0ef1a066 100644 --- a/app/javascript/mastodon/features/ui/components/focal_point_modal.js +++ b/app/javascript/mastodon/features/ui/components/focal_point_modal.js @@ -228,7 +228,7 @@ class FocalPointModal extends ImmutablePureComponent { <Button disabled={!dirty || detecting || length(description) > 420} text={intl.formatMessage(messages.apply)} onClick={this.handleSubmit} /> </div> - <div className='report-modal__statuses'> + <div className='focal-point-modal__content'> {focals && ( <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='' />} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 78ce5d46c..6264c3df8 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -4534,7 +4534,8 @@ a.status-card.compact:hover { } } -.report-modal__statuses { +.report-modal__statuses, +.focal-point-modal__content { flex: 1 1 auto; min-height: 20vh; 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 { padding: 20px; border-right: 1px solid $ui-secondary-color; @@ -4749,10 +4756,10 @@ a.status-card.compact:hover { } .report-modal__target { - padding: 20px; + padding: 15px; .media-modal__close { - top: 19px; + top: 14px; right: 15px; } } |