Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make FormComposer andVideoAnnotator render well on mobile #1260

Merged
merged 1 commit into from
Nov 8, 2024
Merged

Make FormComposer andVideoAnnotator render well on mobile #1260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion examples/form_composer_demo/webapp/src/static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>Form Composer</title>
<script src="wrap_crowd_source.js"></script>
</head>
Expand Down
4 changes: 4 additions & 0 deletions examples/remote_procedure/interactive_image_generation/data/insertions/custom_styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,15 @@
}

.custom--task-image {
width: 100%;
max-width: 600px;
max-height: 400px;
object-fit: scale-down;
}

.custom--fieldset-image {
width: 100%;
max-width: 400px;
max-height: 200px;
object-fit: scale-down;
}
4 changes: 1 addition & 3 deletions ..._procedure/interactive_image_generation/data/insertions/default_fieldset_instruction.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
<div>
<div>This is the generated image. Does it look close enough?</div>

<div>
<img class="custom--fieldset-image" src="[[image_url]]" alt="" />
</div>
<img class="custom--fieldset-image" src="[[image_url]]" alt="" />
</div>
4 changes: 1 addition & 3 deletions ...ocedure/interactive_image_generation/data/insertions/high_score_fieldset_instruction.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
<div>
<div>We're on the right track! Is this image even closer to the taget?</div>

<div>
<img class="custom--fieldset-image" src="[[image_url]]" alt="" />
</div>
<img class="custom--fieldset-image" src="[[image_url]]" alt="" />
</div>
5 changes: 4 additions & 1 deletion examples/video_annotator_demo/webapp/src/static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>Video Annotator Demo</title>
<link
rel="stylesheet"
Expand Down
5 changes: 4 additions & 1 deletion mephisto/generators/form_composer/webapp/src/static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>Form Composer</title>
<script src="wrap_crowd_source.js"></script>
</head>
Expand Down
5 changes: 4 additions & 1 deletion mephisto/generators/video_annotator/webapp/src/static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>Video Annotator</title>
<link
rel="stylesheet"
Expand Down
2 changes: 1 addition & 1 deletion packages/mephisto-addons/build/bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

40 changes: 40 additions & 0 deletions packages/mephisto-addons/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/mephisto-addons/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"prop-types": "^15.8.1",
"raw-loader": "^4.0.2",
"react": "^18.2.0",
"react-device-detect": "^2.2.3",
"react-dom": "^18.2.0",
"react-popper-tooltip": "^4.4.2",
"react-shadow": "^20.4.0",
Expand Down
7 changes: 6 additions & 1 deletion packages/mephisto-addons/src/FormComposer/Field.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,15 @@ function Field({

return (
<div
// `col-12` - full width for screens <576px
// `col-sm-12` - full width for screens ≥576px
// `col-md` - adaptive sise for all screens ≥768px (2 cols - both 50%, 3 cols - 33.3%, etc)
className={`
field
form-group
col
col-12
col-sm-12
col-md
${checkFieldRequiredness(data) ? "required" : ""}
${data.type === FieldType.HIDDEN ? "hidden-type" : ""}
${data.classes || ""}
Expand Down
10 changes: 9 additions & 1 deletion packages/mephisto-addons/src/FormComposer/FormHeaderBlock.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,15 @@ function FormHeaderBlock({
return (
<>
{(title || instruction) && (
<div className={`form-header alert alert-primary`} role={"alert"}>
<div
className={`
form-header
alert
alert-primary
${showInstructionAsModal ? "mt-5 mt-sm-5 mt-lg-0" : ""}
`}
role={"alert"}
>
{title && (
<h2
className={`form-name`}
Expand Down
2 changes: 1 addition & 1 deletion packages/mephisto-addons/src/FormComposer/Section.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ function Section({
)}

{/* Badge with errors number on the right side */}
<div className={`col-1`}>
<div className={`col-auto`}>
<SectionErrorsCountBadge
sectionFields={sectionsFields[index]}
invalidFormFields={invalidFormFields}
Expand Down
4 changes: 2 additions & 2 deletions packages/mephisto-addons/src/FormComposer/SubmitButtonBlock.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ function SubmitButtonBlock({
{submitLoading ? (
// Banner of success
<div
className={`alert alert-success centered mx-auto col-6 ml-2 mr-2`}
className={`alert alert-success centered mx-auto col-12 col-sm-8 ml-2 mr-2`}
>
Thank you!
<br />
Expand All @@ -36,7 +36,7 @@ function SubmitButtonBlock({
{/* Button instruction */}
{data.instruction && (
<div
className={`alert alert-light centered mx-auto col-6 ml-2 mr-2`}
className={`alert alert-light centered mx-auto col-12 col-sm-8 ml-2 mr-2`}
dangerouslySetInnerHTML={{
__html: data.instruction,
}}
Expand Down
1 change: 1 addition & 0 deletions packages/mephisto-addons/src/TaskInstructionModal/TaskInstructionButton.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,5 @@
position: fixed;
right: 10px;
top: 10px;
z-index: 999;
}
25 changes: 17 additions & 8 deletions packages/mephisto-addons/src/VideoAnnotator/AnnotationTrack.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,25 +41,29 @@

.annotation-track .track-info {
position: relative;
height: 40px;
min-height: 40px;
display: flex;
flex-direction: row;
gap: 4px;
align-items: center;
padding: 0 190px 0 10px;
padding: 0 10px;
}

.annotation-track .track-info .track-name-label {
.annotation-track .track-info .track-name-wrapper {
display: flex;
}

.annotation-track .track-info .track-name-wrapper .track-name-label {
font-size: 14px;
margin-right: 6px;
}

.annotation-track .track-info .track-name {
.annotation-track .track-info .track-name-wrapper .track-name {
font-size: 14px;
font-weight: bold;
}

.annotation-track .track-info .buttons {
.annotation-track .track-info .track-name-wrapper .buttons {
display: flex;
flex-direction: row;
gap: 6px;
Expand All @@ -70,8 +74,8 @@
}

.annotation-track .track-info .track-buttons {
position: absolute;
right: 10px;
/*position: absolute;*/
/*right: 10px;*/
display: none;
gap: 4px;
}
Expand Down Expand Up @@ -100,6 +104,12 @@
opacity: 0.2;
}

.annotation-track .segments-mobile {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.annotation-track .overlapping-segments.is-invalid {
display: flex;
justify-content: center;
Expand All @@ -110,7 +120,6 @@
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px;
}

.annotation-track .segment-info .time {
Expand Down
Loading
Loading