Merge pull request #1260 from facebookresearch/make-ui-mobile-compatible

Make FormComposer andVideoAnnotator render well on mobile
facebookresearch · Nov 8, 2024 · b09f8ec · b09f8ec
2 parents 53eaae0 + 53d95c3
commit b09f8ec
Show file tree

Hide file tree

Showing 25 changed files with 379 additions and 130 deletions.
diff --git a/examples/form_composer_demo/webapp/src/static/index.html b/examples/form_composer_demo/webapp/src/static/index.html
@@ -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>

diff --git a/examples/remote_procedure/interactive_image_generation/data/insertions/custom_styles.css b/examples/remote_procedure/interactive_image_generation/data/insertions/custom_styles.css
@@ -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;
 }
diff --git a/..._procedure/interactive_image_generation/data/insertions/default_fieldset_instruction.html b/..._procedure/interactive_image_generation/data/insertions/default_fieldset_instruction.html
@@ -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>
diff --git a/...ocedure/interactive_image_generation/data/insertions/high_score_fieldset_instruction.html b/...ocedure/interactive_image_generation/data/insertions/high_score_fieldset_instruction.html
@@ -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>
diff --git a/examples/video_annotator_demo/webapp/src/static/index.html b/examples/video_annotator_demo/webapp/src/static/index.html
@@ -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"

diff --git a/mephisto/generators/form_composer/webapp/src/static/index.html b/mephisto/generators/form_composer/webapp/src/static/index.html
@@ -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>

diff --git a/mephisto/generators/video_annotator/webapp/src/static/index.html b/mephisto/generators/video_annotator/webapp/src/static/index.html
@@ -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"

diff --git a/packages/mephisto-addons/build/bundle.js b/packages/mephisto-addons/build/bundle.js
diff --git a/packages/mephisto-addons/package-lock.json b/packages/mephisto-addons/package-lock.json
diff --git a/packages/mephisto-addons/package.json b/packages/mephisto-addons/package.json
@@ -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",

diff --git a/packages/mephisto-addons/src/FormComposer/Field.jsx b/packages/mephisto-addons/src/FormComposer/Field.jsx
@@ -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 || ""}

diff --git a/packages/mephisto-addons/src/FormComposer/FormHeaderBlock.jsx b/packages/mephisto-addons/src/FormComposer/FormHeaderBlock.jsx
@@ -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`}

diff --git a/packages/mephisto-addons/src/FormComposer/Section.jsx b/packages/mephisto-addons/src/FormComposer/Section.jsx
@@ -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}

diff --git a/packages/mephisto-addons/src/FormComposer/SubmitButtonBlock.jsx b/packages/mephisto-addons/src/FormComposer/SubmitButtonBlock.jsx
@@ -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 />
@@ -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,
                   }}

diff --git a/packages/mephisto-addons/src/TaskInstructionModal/TaskInstructionButton.css b/packages/mephisto-addons/src/TaskInstructionModal/TaskInstructionButton.css
@@ -8,4 +8,5 @@
   position: fixed;
   right: 10px;
   top: 10px;
+  z-index: 999;
 }
diff --git a/packages/mephisto-addons/src/VideoAnnotator/AnnotationTrack.css b/packages/mephisto-addons/src/VideoAnnotator/AnnotationTrack.css
@@ -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;
@@ -70,8 +74,8 @@
 }
 
 .annotation-track .track-info .track-buttons {
-  position: absolute;
-  right: 10px;
+  /*position: absolute;*/
+  /*right: 10px;*/
   display: none;
   gap: 4px;
 }
@@ -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;
@@ -110,7 +120,6 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
-  padding: 10px;
 }
 
 .annotation-track .segment-info .time {