Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-18 21:04:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

[Bug Fix] Fix scene markers editor mobile UI (#1718)

Browse Source 
* Fix mobile layout
This commit is contained in:
liquid-flow
2021-09-14 17:07:53 +07:00
committed by GitHub
parent b78060d361
commit 612ecb72fc
5 changed files with 57 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ui/v2.5/src/components/Changelog/versions/v0100.md
View File

@@ -10,3 +10,6 @@
### 🎨 Improvements
* Added sv-SE language option. ([#1691](https://github.com/stashapp/stash/pull/1691))
### 🐛 Bug fixes
* Fix Create Marker form on small devices. ([#1718](https://github.com/stashapp/stash/pull/1718))

84
ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkerForm.tsx
View File

@@ -68,30 +68,26 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({
.catch((err) => Toast.error(err));
};
const renderTitleField = (fieldProps: FieldProps<string>) => (
<div className="col-10 col-xl-12">
<MarkerTitleSuggest
initialMarkerTitle={fieldProps.field.value}
onChange={(query: string) =>
fieldProps.form.setFieldValue("title", query)
}
/>
</div>
<MarkerTitleSuggest
initialMarkerTitle={fieldProps.field.value}
onChange={(query: string) =>
fieldProps.form.setFieldValue("title", query)
}
/>
);
const renderSecondsField = (fieldProps: FieldProps<string>) => (
<div className="col-3 col-xl-12">
<DurationInput
onValueChange={(s) => fieldProps.form.setFieldValue("seconds", s)}
onReset={() =>
fieldProps.form.setFieldValue(
"seconds",
Math.round(JWUtils.getPlayer()?.getPosition() ?? 0)
)
}
numericValue={Number.parseInt(fieldProps.field.value ?? "0", 10)}
mandatory
/>
</div>
<DurationInput
onValueChange={(s) => fieldProps.form.setFieldValue("seconds", s)}
onReset={() =>
fieldProps.form.setFieldValue(
"seconds",
Math.round(JWUtils.getPlayer()?.getPosition() ?? 0)
)
}
numericValue={Number.parseInt(fieldProps.field.value ?? "0", 10)}
mandatory
/>
);
const renderPrimaryTagField = (fieldProps: FieldProps<string>) => (
@@ -100,7 +96,7 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({
fieldProps.form.setFieldValue("primaryTagId", tags[0]?.id)
}
ids={fieldProps.field.value ? [fieldProps.field.value] : []}
noSelectionString="Select or create tag..."
noSelectionString="Select/create tag..."
/>
);
@@ -114,7 +110,7 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({
)
}
ids={fieldProps.field.value}
noSelectionString="Select or create tags..."
noSelectionString="Select/create tags..."
/>
);
@@ -133,28 +129,48 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({
<FormikForm>
<div>
<Form.Group className="row">
<Form.Label htmlFor="title" className="col-2 col-xl-12">
Scene Marker Title
<Form.Label
htmlFor="title"
className="col-sm-3 col-md-2 col-xl-12 col-form-label"
>
Marker Title
</Form.Label>
<Field name="title">{renderTitleField}</Field>
<div className="col-sm-9 col-md-10 col-xl-12">
<Field name="title">{renderTitleField}</Field>
</div>
</Form.Group>
<Form.Group className="row">
<Form.Label htmlFor="primaryTagId" className="col-2 col-xl-12">
<Form.Label
htmlFor="primaryTagId"
className="col-sm-3 col-md-2 col-xl-12 col-form-label"
>
Primary Tag
</Form.Label>
<div className="col-6 col-xl-12">
<div className="col-sm-4 col-md-6 col-xl-12 mb-3 mb-sm-0 mb-xl-3">
<Field name="primaryTagId">{renderPrimaryTagField}</Field>
</div>
<Form.Label htmlFor="seconds" className="col-1 col-xl-12 mt-2">
Time
</Form.Label>
<Field name="seconds">{renderSecondsField}</Field>
<div className="col-sm-5 col-md-4 col-xl-12">
<div className="row">
<Form.Label
htmlFor="seconds"
className="col-sm-4 col-md-4 col-xl-12 col-form-label text-sm-right text-xl-left"
>
Time
</Form.Label>
<div className="col-sm-8 col-xl-12">
<Field name="seconds">{renderSecondsField}</Field>
</div>
</div>
</div>
</Form.Group>
<Form.Group className="row">
<Form.Label htmlFor="tagIds" className="col-2 col-xl-12">
<Form.Label
htmlFor="tagIds"
className="col-sm-3 col-md-2 col-xl-12 col-form-label"
>
Tags
</Form.Label>
<div className="col-10 col-xl-12">
<div className="col-sm-9 col-md-10 col-xl-12">
<Field name="tagIds">{renderTagsField}</Field>
</div>
</Form.Group>

4
ui/v2.5/src/components/Shared/DurationInput.tsx
View File

@@ -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}`}>
<InputGroup>
<Form.Control
className="duration-control text-input"
@@ -122,6 +122,6 @@ export const DurationInput: React.FC<IProps> = (props: IProps) => {
{renderButtons()}
</InputGroup.Append>
</InputGroup>
</Form.Group>
</div>
);
};

1
ui/v2.5/src/index.scss
View File

@@ -217,6 +217,7 @@ div.react-select__control {
border-color: $secondary;
color: $text-color;
cursor: pointer;
white-space: nowrap;
.react-select__single-value,
.react-select__input {

2
ui/v2.5/src/styles/_theme.scss
View File

@@ -78,7 +78,7 @@ hr {
.nav-tabs {
border: none;
margin: auto;
margin-bottom: 0.5rem;
margin-bottom: 1.5rem;
.nav-link {
border: none;