[Bug Fix] Fix scene markers editor mobile UI #1718
Conversation
liquid-flow
changed the title
|
On a phone in landscape the |
liquid-flow
force-pushed
the
fix-ui-markers-editor-fields-mobile
branch
from
e14802c
to
af00fa3
Compare
There was a problem hiding this comment.
@gitgiggety Good catch 👍 I did some further improvements. Please, check when you have time.
| @@ -93,7 +93,7 @@ export const DurationInput: React.FC<IProps> = (props: IProps) => { | |||
| } | |||
|
|
|||
| return ( | |||
| <Form.Group className={`duration-input ${props.className}`}> | |||
| <div className={`duration-input ${props.className}`}> | |||
There was a problem hiding this comment.
This way we avoid adding the form-group class, which adds some margin at the bottom and thus makes all the forms containing DurationInput look inconsistent with the rest of the form inputs. You can check the input in the spots where it's used:
- Settings -> Interface -> Maximum loop duration
- Settings -> DLNA -> Enable temporarily
- Movies -> New -> Duration
- Scenes -> Filter -> Duration
| @@ -217,6 +217,7 @@ div.react-select__control { | |||
| border-color: $secondary; | |||
| color: $text-color; | |||
| cursor: pointer; | |||
| white-space: nowrap; | |||
There was a problem hiding this comment.
To avoid long placeholder text bloating text inputs
| @@ -78,7 +78,7 @@ hr { | |||
| .nav-tabs { | |||
| border: none; | |||
| margin: auto; | |||
| margin-bottom: 0.5rem; | |||
| margin-bottom: 1.5rem; | |||
There was a problem hiding this comment.
Render some space between the tabs and the form to separate them visually.
Scope
Scene -> Markers
This PR fixes the mobile view of the scene markers editor on 320px and 576px breakpoints. It also includes some minor refactoring and UI improvements for the components in scope.
Testing
./stashmake ui-startMarkerstabScreenshots
320px
576px
768px
1024
1200px