fix: layout responsive

openedx · Nov 23, 2023 · 84e9c13 · 84e9c13
1 parent fc80700
commit 84e9c13
Show file tree

Hide file tree

Showing 12 changed files with 106 additions and 26 deletions.
diff --git a/...editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx b/...editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx
@@ -54,7 +54,7 @@ export const AnswerOption = ({
       return (
         <Form.Control
           as="textarea"
-          className="answer-option-textarea text-gray-500 small"
+          className="answer-option-textarea text-gray-500 small text-break"
           autoResize
           rows={1}
           value={answer.title}
@@ -68,7 +68,7 @@ export const AnswerOption = ({
       <div>
         <Form.Control
           as="textarea"
-          className="answer-option-textarea text-gray-500 small"
+          className="answer-option-textarea text-gray-500 small text-break"
           autoResize
           rows={1}
           value={answer.title}
@@ -87,7 +87,7 @@ export const AnswerOption = ({
     <Collapsible.Advanced
       open={isFeedbackVisible}
       onToggle={toggleFeedback}
-      className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2"
+      className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2 text-break"
     >
       <div className="mr-1 d-flex">
         <Checker

diff --git a/...emEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap b/...emEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`AnswerOption render snapshot: renders correct option with feedback 1`] = `
 <Advanced
-  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2"
+  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2 text-break"
   onToggle={[Function]}
   open={false}
 >
@@ -78,7 +78,7 @@ exports[`AnswerOption render snapshot: renders correct option with feedback 1`]
 
 exports[`AnswerOption render snapshot: renders correct option with numeric input problem 1`] = `
 <Advanced
-  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2"
+  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2 text-break"
   onToggle={[Function]}
   open={false}
 >
@@ -105,7 +105,7 @@ exports[`AnswerOption render snapshot: renders correct option with numeric input
     <Form.Control
       as="textarea"
       autoResize={true}
-      className="answer-option-textarea text-gray-500 small"
+      className="answer-option-textarea text-gray-500 small text-break"
       onChange={[Function]}
       placeholder="Enter an answer"
       rows={1}
@@ -155,7 +155,7 @@ exports[`AnswerOption render snapshot: renders correct option with numeric input
 
 exports[`AnswerOption render snapshot: renders correct option with numeric input problem and answer range 1`] = `
 <Advanced
-  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2"
+  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2 text-break"
   onToggle={[Function]}
   open={false}
 >
@@ -185,7 +185,7 @@ exports[`AnswerOption render snapshot: renders correct option with numeric input
       <Form.Control
         as="textarea"
         autoResize={true}
-        className="answer-option-textarea text-gray-500 small"
+        className="answer-option-textarea text-gray-500 small text-break"
         onChange={[Function]}
         placeholder="Enter an answer range"
         rows={1}
@@ -247,7 +247,7 @@ exports[`AnswerOption render snapshot: renders correct option with numeric input
 
 exports[`AnswerOption render snapshot: renders correct option with selected unselected feedback 1`] = `
 <Advanced
-  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2"
+  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2 text-break"
   onToggle={[Function]}
   open={false}
 >

diff --git a/...ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap b/...ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`SettingsWidget snapshot snapshot: renders Settings widget for Advanced Problem with correct widgets 1`] = `
 <div
-  className="settingsWidget ml-4"
+  className="settingsWidget ml-md-4"
 >
   <div
     className="mb-3"
@@ -83,7 +83,7 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget for Advanced
 
 exports[`SettingsWidget snapshot snapshot: renders Settings widget page 1`] = `
 <div
-  className="settingsWidget ml-4"
+  className="settingsWidget ml-md-4"
 >
   <div
     className="mb-3"
@@ -164,7 +164,7 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget page 1`] = `
 
 exports[`SettingsWidget snapshot snapshot: renders Settings widget page advanced settings visible 1`] = `
 <div
-  className="settingsWidget ml-4"
+  className="settingsWidget ml-md-4"
 >
   <div
     className="mb-3"

diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx
@@ -55,7 +55,7 @@ export const SettingsWidget = ({
   };
 
   return (
-    <div className="settingsWidget ml-4">
+    <div className="settingsWidget ml-md-4">
       <div className="mb-3">
         <TypeCard
           answers={answers}

diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.scss b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.scss
@@ -11,7 +11,9 @@
 }
 
 .settingsWidget {
-    margin-top: 40px;
+    @media (min-width: 768px) {
+        margin-top: 40px;
+    }
     .pgn__form-text {
         font-size: small;
     }

diff --git a/...ors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap b/...ors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap
@@ -42,7 +42,7 @@ exports[`EditorProblemView component renders raw editor 1`] = `
     />
   </Component>
   <div
-    className="editProblemView d-flex flex-row flex-nowrap justify-content-end"
+    className="editProblemView d-flex flex-row flex-wrap justify-content-end"
   >
     <Container
       className="advancedEditorTopMargin p-0"
@@ -59,7 +59,7 @@ exports[`EditorProblemView component renders raw editor 1`] = `
       />
     </Container>
     <span
-      className="editProblemView-settingsColumn"
+      className="editProblemView-settingsColumn mb-3"
     >
       <injectIntl(ShimmedIntlComponent)
         problemType="advanced"
@@ -118,10 +118,10 @@ exports[`EditorProblemView component renders simple view 1`] = `
     </div>
   </Component>
   <div
-    className="editProblemView d-flex flex-row flex-nowrap justify-content-end"
+    className="editProblemView d-flex flex-row flex-wrap justify-content-end"
   >
     <span
-      className="flex-grow-1 mb-5"
+      className="editProblemView-mainColumn flex-grow-1 mb-3 mb-md-5"
     >
       <injectIntl(ShimmedIntlComponent) />
       <injectIntl(ShimmedIntlComponent) />
@@ -130,7 +130,7 @@ exports[`EditorProblemView component renders simple view 1`] = `
       />
     </span>
     <span
-      className="editProblemView-settingsColumn"
+      className="editProblemView-settingsColumn mb-3"
     >
       <injectIntl(ShimmedIntlComponent)
         problemType="multiplechoiceresponse"

diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx
@@ -97,19 +97,19 @@ export const EditProblemView = ({
           </>
         )}
       </AlertModal>
-      <div className="editProblemView d-flex flex-row flex-nowrap justify-content-end">
+      <div className="editProblemView d-flex flex-row flex-wrap justify-content-end">
         {isAdvancedProblemType ? (
           <Container fluid className="advancedEditorTopMargin p-0">
             <RawEditor editorRef={editorRef} lang="xml" content={problemState.rawOLX} />
           </Container>
         ) : (
-          <span className="flex-grow-1 mb-5">
+          <span className="editProblemView-mainColumn flex-grow-1 mb-3 mb-md-5">
             <QuestionWidget />
             <ExplanationWidget />
             <AnswerWidget problemType={problemType} />
           </span>
         )}
-        <span className="editProblemView-settingsColumn">
+        <span className="editProblemView-settingsColumn mb-3">
           <SettingsWidget problemType={problemType} />
         </span>
       </div>

diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss b/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss
@@ -1,12 +1,34 @@
+.selectTypeContainer {
+  max-width: 100%;
+}
+
 .editProblemView {
+  .editProblemView-mainColumn {
+    max-width: calc(100% - 345px);
+
+    @media (max-width: 767px) {
+      max-width: 100%;
+    }
+  }
   .editProblemView-settingsColumn {
     width: 320px;
     flex-grow: 0;
     flex-shrink: 0;
+    @media (max-width: 767px) {
+      width: 100%;
+    }
   }
   .advancedEditorTopMargin {
     margin-top: 40px;
   }
+  .answer-option .mce-content-body:before {
+    @media (max-width: 767px) {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 90%;
+    }
+  }
 }
 
 .tinyMceWidget {

diff --git a/...ors/containers/ProblemEditor/components/SelectTypeModal/__snapshots__/index.test.jsx.snap b/...ors/containers/ProblemEditor/components/SelectTypeModal/__snapshots__/index.test.jsx.snap
@@ -9,7 +9,7 @@ exports[`SelectTypeModal snapshot 1`] = `
     className="justify-content-center"
   >
     <Stack
-      className="flex-wrap mb-6"
+      className="selectTypeContainer flex-wrap mb-6"
       direction="horizontal"
       gap={4}
     >

diff --git a/...editors/containers/ProblemEditor/components/SelectTypeModal/content/AdvanceTypeSelect.jsx b/...editors/containers/ProblemEditor/components/SelectTypeModal/content/AdvanceTypeSelect.jsx
@@ -44,7 +44,7 @@ export const AdvanceTypeSelect = ({
             if (data.status !== '') {
               return (
                 <ActionRow className="border-primary-100 border-bottom m-0 py-3 w-100">
-                  <Form.Radio id={type} value={type}>
+                  <Form.Radio id={type} value={type} controlClassName="flex-shrink-0">
                     {intl.formatMessage(messages.advanceProblemTypeLabel, { problemType: data.title })}
                   </Form.Radio>
                   <ActionRow.Spacer />
@@ -67,7 +67,7 @@ export const AdvanceTypeSelect = ({
             }
             return (
               <ActionRow className="border-primary-100 border-bottom m-0 py-3 w-100">
-                <Form.Radio id={type} value={type}>
+                <Form.Radio id={type} value={type} controlClassName="flex-shrink-0">
                   {intl.formatMessage(messages.advanceProblemTypeLabel, { problemType: data.title })}
                 </Form.Radio>
                 <ActionRow.Spacer />