From e5e451962f73fc89fae5e53e23ab34b5ccc9f79b Mon Sep 17 00:00:00 2001 From: vladislavkeblysh Date: Wed, 4 Sep 2024 19:26:03 +0300 Subject: [PATCH 1/5] feat: [feat: ora mobile responsive] --- .../__snapshots__/index.test.jsx.snap | 2 +- src/components/InfoPopover/index.jsx | 2 +- src/containers/ListView/ListView.scss | 10 +++ .../ReviewActions/ReviewActions.scss | 8 ++- .../__snapshots__/index.test.jsx.snap | 6 +- src/containers/ReviewActions/index.jsx | 2 +- .../__snapshots__/index.test.jsx.snap | 71 +------------------ src/containers/ReviewModal/index.jsx | 7 +- 8 files changed, 31 insertions(+), 77 deletions(-) diff --git a/src/components/InfoPopover/__snapshots__/index.test.jsx.snap b/src/components/InfoPopover/__snapshots__/index.test.jsx.snap index 89c14c127..9caaf7cf7 100644 --- a/src/components/InfoPopover/__snapshots__/index.test.jsx.snap +++ b/src/components/InfoPopover/__snapshots__/index.test.jsx.snap @@ -15,7 +15,7 @@ exports[`Info Popover Component snapshot 1`] = ` } - placement="right-end" + placement="left-end" trigger="focus" > ( diff --git a/src/containers/ListView/ListView.scss b/src/containers/ListView/ListView.scss index 550962204..d4c664b9c 100644 --- a/src/containers/ListView/ListView.scss +++ b/src/containers/ListView/ListView.scss @@ -25,4 +25,14 @@ span.pgn__icon.breadcrumb-arrow { margin-bottom: 0; } } + + @include media-breakpoint-down(xs) { + .badge { + white-space: normal; + } + + .pgn__table-actions > div:first-of-type { + z-index: $zindex-modal !important; + } + } } diff --git a/src/containers/ReviewActions/ReviewActions.scss b/src/containers/ReviewActions/ReviewActions.scss index 88370b5aa..460bf4c57 100644 --- a/src/containers/ReviewActions/ReviewActions.scss +++ b/src/containers/ReviewActions/ReviewActions.scss @@ -34,4 +34,10 @@ .review-actions-username { padding-bottom: map-get($spacers, 3); } -} \ No newline at end of file +} + +@include media-breakpoint-down(xs) { + .overlay-help-popover { + max-width: calc(100% - 60px) !important; + } +} diff --git a/src/containers/ReviewActions/__snapshots__/index.test.jsx.snap b/src/containers/ReviewActions/__snapshots__/index.test.jsx.snap index 18522f7e6..82c25e394 100644 --- a/src/containers/ReviewActions/__snapshots__/index.test.jsx.snap +++ b/src/containers/ReviewActions/__snapshots__/index.test.jsx.snap @@ -18,7 +18,7 @@ exports[`ReviewActions component component snapshot: do not show rubric 1`] = ` status="grading-status" />
)} - + {pointsPossible && ( - - - - } - className="review-modal" - isOpen={false} - modalBodyClassName="review-modal-body" - onClose={[MockFunction hooks.onClose]} - title="test-ora-name" -> - - -`; +exports[`ReviewModal component component snapshots closed 1`] = `undefined`; -exports[`ReviewModal component component snapshots loading 1`] = ` - - - - - } - className="review-modal" - isOpen={true} - modalBodyClassName="review-modal-body" - onClose={[MockFunction hooks.onClose]} - title="test-ora-name" -> - - - - -`; +exports[`ReviewModal component component snapshots loading 1`] = `undefined`; -exports[`ReviewModal component component snapshots success 1`] = ` - - - - - } - className="review-modal" - isOpen={true} - modalBodyClassName="review-modal-body" - onClose={[MockFunction hooks.onClose]} - title="test-ora-name" -> - - - -`; +exports[`ReviewModal component component snapshots success 1`] = `undefined`; diff --git a/src/containers/ReviewModal/index.jsx b/src/containers/ReviewModal/index.jsx index 8fc180057..0687f87e5 100644 --- a/src/containers/ReviewModal/index.jsx +++ b/src/containers/ReviewModal/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { useDispatch } from 'react-redux'; -import { FullscreenModal } from '@openedx/paragon'; +import { FullscreenModal, Truncate, useMediaQuery } from '@openedx/paragon'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import LoadingMessage from 'components/LoadingMessage'; @@ -27,9 +27,12 @@ export const ReviewModal = ({ intl }) => { isOpen, closeConfirmModalProps, } = hooks.rendererHooks({ dispatch, intl }); + + const isMobile = useMediaQuery({ query: '(max-width: 575.98px)' }); + return ( {title} : title} isOpen={isOpen} beforeBodyNode={( <> From 52f657e9f462e5e83c4f4028f608170a27f20623 Mon Sep 17 00:00:00 2001 From: vladislavkeblysh Date: Wed, 4 Sep 2024 19:30:56 +0300 Subject: [PATCH 2/5] feat: ora mobile responsive --- .../__snapshots__/index.test.jsx.snap | 71 ++++++++++++++++++- 1 file changed, 68 insertions(+), 3 deletions(-) diff --git a/src/containers/ReviewModal/__snapshots__/index.test.jsx.snap b/src/containers/ReviewModal/__snapshots__/index.test.jsx.snap index ab6274a23..2fd5eba6e 100644 --- a/src/containers/ReviewModal/__snapshots__/index.test.jsx.snap +++ b/src/containers/ReviewModal/__snapshots__/index.test.jsx.snap @@ -1,7 +1,72 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ReviewModal component component snapshots closed 1`] = `undefined`; +exports[`ReviewModal component component snapshots closed 1`] = ` + + + + + } + className="review-modal" + isOpen={false} + modalBodyClassName="review-modal-body" + onClose={[MockFunction hooks.onClose]} + title="test-ora-name" +> + + +`; -exports[`ReviewModal component component snapshots loading 1`] = `undefined`; +exports[`ReviewModal component component snapshots loading 1`] = ` + + + + + } + className="review-modal" + isOpen={true} + modalBodyClassName="review-modal-body" + onClose={[MockFunction hooks.onClose]} + title="test-ora-name" +> + + + + +`; -exports[`ReviewModal component component snapshots success 1`] = `undefined`; +exports[`ReviewModal component component snapshots success 1`] = ` + + + + + } + className="review-modal" + isOpen={true} + modalBodyClassName="review-modal-body" + onClose={[MockFunction hooks.onClose]} + title="test-ora-name" +> + + + +`; From ad316c1b7d6d23d789c34c7545d41e9badcc8afe Mon Sep 17 00:00:00 2001 From: vladislavkeblysh Date: Wed, 4 Sep 2024 19:36:33 +0300 Subject: [PATCH 3/5] feat: ora mobile responsive --- .../__snapshots__/index.test.jsx.snap | 71 +------------------ 1 file changed, 3 insertions(+), 68 deletions(-) diff --git a/src/containers/ReviewModal/__snapshots__/index.test.jsx.snap b/src/containers/ReviewModal/__snapshots__/index.test.jsx.snap index 2fd5eba6e..ab6274a23 100644 --- a/src/containers/ReviewModal/__snapshots__/index.test.jsx.snap +++ b/src/containers/ReviewModal/__snapshots__/index.test.jsx.snap @@ -1,72 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ReviewModal component component snapshots closed 1`] = ` - - - - - } - className="review-modal" - isOpen={false} - modalBodyClassName="review-modal-body" - onClose={[MockFunction hooks.onClose]} - title="test-ora-name" -> - - -`; +exports[`ReviewModal component component snapshots closed 1`] = `undefined`; -exports[`ReviewModal component component snapshots loading 1`] = ` - - - - - } - className="review-modal" - isOpen={true} - modalBodyClassName="review-modal-body" - onClose={[MockFunction hooks.onClose]} - title="test-ora-name" -> - - - - -`; +exports[`ReviewModal component component snapshots loading 1`] = `undefined`; -exports[`ReviewModal component component snapshots success 1`] = ` - - - - - } - className="review-modal" - isOpen={true} - modalBodyClassName="review-modal-body" - onClose={[MockFunction hooks.onClose]} - title="test-ora-name" -> - - - -`; +exports[`ReviewModal component component snapshots success 1`] = `undefined`; From df65af4fb6be11878f204bd56380ec82739716b1 Mon Sep 17 00:00:00 2001 From: vladislavkeblysh Date: Mon, 17 Feb 2025 14:10:53 +0200 Subject: [PATCH 4/5] feat: refactor after review --- src/containers/ReviewModal/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/ReviewModal/index.jsx b/src/containers/ReviewModal/index.jsx index 0687f87e5..30037aad9 100644 --- a/src/containers/ReviewModal/index.jsx +++ b/src/containers/ReviewModal/index.jsx @@ -28,7 +28,7 @@ export const ReviewModal = ({ intl }) => { closeConfirmModalProps, } = hooks.rendererHooks({ dispatch, intl }); - const isMobile = useMediaQuery({ query: '(max-width: 575.98px)' }); + const isMobile = useMediaQuery({ query: '(max-width: 767.98px)' }); return ( Date: Mon, 17 Feb 2025 14:13:25 +0200 Subject: [PATCH 5/5] feat: refactor after review --- .eslintrc.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 51d0db634..ba61b1354 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -7,9 +7,9 @@ const config = createConfig('eslint', { 'import/no-named-as-default-member': 'off', 'import/no-import-module-exports': 'off', 'import/no-self-import': 'off', - 'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }], + 'spaced-comment': ['error', 'always', { block: { exceptions: ['*'] } }], 'react-hooks/rules-of-hooks': 'off', - "react/forbid-prop-types": ["error", { "forbid": ["any", "array"] }], // arguable object proptype is use when I do not care about the shape of the object + 'react/forbid-prop-types': ['error', { forbid: ['any', 'array'] }], // arguable object proptype is use when I do not care about the shape of the object 'no-import-assign': 'off', 'no-promise-executor-return': 'off', 'import/no-cycle': 'off', @@ -17,10 +17,10 @@ const config = createConfig('eslint', { }); config.settings = { - "import/resolver": { + 'import/resolver': { node: { - paths: ["src", "node_modules"], - extensions: [".js", ".jsx"], + paths: ['src', 'node_modules'], + extensions: ['.js', '.jsx'], }, }, };