From 2ca6b2bb6c9e811ad98e3df23e70efbf22882e42 Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Thu, 15 Aug 2019 22:49:00 +0200
Subject: [PATCH] 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
---
.../features/ui/components/focal_point_modal.js | 2 +-
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 67c5606200..e0ef1a066a 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 78ce5d46c8..6264c3df81 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;
}
}
--
GitLab