From 3d08b73307736767d0277ef5ef0604f5632da55e Mon Sep 17 00:00:00 2001 From: Navin Karkera Date: Sat, 12 Apr 2025 11:34:10 +0530 Subject: [PATCH 1/2] fix: auto adjust min height of xblock previews Sets minimum height of library block previews based on its render location and block type. --- .../LibraryBlock/LibraryBlock.tsx | 4 +++- .../component-info/ComponentPreview.tsx | 2 ++ .../units/LibraryUnitBlocks.tsx | 19 +++++++++++++++++++ 3 files changed, 24 insertions(+), 1 deletion(-) diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx index ef151c219f..9b1964a46b 100644 --- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx +++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx @@ -15,6 +15,7 @@ interface LibraryBlockProps { version?: VersionSpec; view?: string; scrolling?: string; + minHeight?: string; } /** * React component that displays an XBlock in a sandboxed IFrame. @@ -31,6 +32,7 @@ export const LibraryBlock = ({ version, view, scrolling = 'no', + minHeight = '200px', }: LibraryBlockProps) => { const { iframeRef, setIframeRef } = useIframe(); const xblockView = view ?? 'student_view'; @@ -61,7 +63,7 @@ export const LibraryBlock = ({ loading="lazy" referrerPolicy="origin" style={{ - width: '100%', height: iframeHeight, pointerEvents: 'auto', minHeight: '700px', + width: '100%', height: iframeHeight, pointerEvents: 'auto', minHeight, }} allow={IFRAME_FEATURE_POLICY} allowFullScreen diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx index 6287b1a7d9..024d0c70db 100644 --- a/src/library-authoring/component-info/ComponentPreview.tsx +++ b/src/library-authoring/component-info/ComponentPreview.tsx @@ -31,6 +31,7 @@ const ModalComponentPreview = ({ isOpen, close, usageKey }: ModalComponentPrevie ); @@ -71,6 +72,7 @@ const ComponentPreview = () => { usageKey={usageKey} key={componentMetadata.modified} version={showOnlyPublished ? 'published' : undefined} + minHeight="70vh" /> ) : null diff --git a/src/library-authoring/units/LibraryUnitBlocks.tsx b/src/library-authoring/units/LibraryUnitBlocks.tsx index 6efc5cc6da..a9972f9a0f 100644 --- a/src/library-authoring/units/LibraryUnitBlocks.tsx +++ b/src/library-authoring/units/LibraryUnitBlocks.tsx @@ -12,6 +12,7 @@ import DraggableList, { SortableItem } from '../../editors/sharedComponents/Drag import ErrorAlert from '../../generic/alert-error'; import { getItemIcon } from '../../generic/block-type-utils'; +import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants'; import { IframeProvider } from '../../generic/hooks/context/iFrameContext'; import Loading from '../../generic/Loading'; import TagCount from '../../generic/tag-count'; @@ -24,6 +25,15 @@ import { useLibraryRoutes } from '../routes'; import messages from './messages'; import { useSidebarContext } from '../common/context/SidebarContext'; +/** Components that need large min height in preview */ +const LARGE_COMPONENTS = [ + COMPONENT_TYPES.advanced, + COMPONENT_TYPES.dragAndDrop, + COMPONENT_TYPES.discussion, + 'lti', + 'lti_consumer', +]; + export const LibraryUnitBlocks = () => { const intl = useIntl(); const [orderedBlocks, setOrderedBlocks] = useState([]); @@ -79,6 +89,14 @@ export const LibraryUnitBlocks = () => { navigateTo({ componentId: block.id }); }; + /* istanbul ignore next */ + const calculateMinHeight = (block: LibraryBlockMetadata) => { + if (LARGE_COMPONENTS.includes(block.blockType)) { + return '700px'; + } + return '200px'; + }; + const renderedBlocks = orderedBlocks?.map((block) => ( { From 55d3af76d1912a61879064f3ebf19068f11fc06e Mon Sep 17 00:00:00 2001 From: Navin Karkera Date: Mon, 14 Apr 2025 22:05:45 +0530 Subject: [PATCH 2/2] fix: add min height to all library blocks --- src/editors/AdvancedEditor.tsx | 1 + src/library-authoring/LibraryBlock/LibraryBlock.tsx | 2 +- .../component-comparison/CompareChangesWidget.tsx | 12 ++++++++++-- .../component-info/ComponentPreview.tsx | 4 ++-- 4 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/editors/AdvancedEditor.tsx b/src/editors/AdvancedEditor.tsx index d91f38effc..09a368c041 100644 --- a/src/editors/AdvancedEditor.tsx +++ b/src/editors/AdvancedEditor.tsx @@ -55,6 +55,7 @@ const AdvancedEditor = ({ usageKey, onClose }: AdvancedEditorProps) => { usageKey={usageKey} view="studio_view" scrolling="yes" + minHeight="70vh" /> diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx index 9b1964a46b..c87091acdb 100644 --- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx +++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx @@ -31,8 +31,8 @@ export const LibraryBlock = ({ usageKey, version, view, + minHeight, scrolling = 'no', - minHeight = '200px', }: LibraryBlockProps) => { const { iframeRef, setIframeRef } = useIframe(); const xblockView = view ?? 'student_view'; diff --git a/src/library-authoring/component-comparison/CompareChangesWidget.tsx b/src/library-authoring/component-comparison/CompareChangesWidget.tsx index 6ee3fca5b5..19581e5c56 100644 --- a/src/library-authoring/component-comparison/CompareChangesWidget.tsx +++ b/src/library-authoring/component-comparison/CompareChangesWidget.tsx @@ -29,14 +29,22 @@ const CompareChangesWidget = ({ usageKey, oldVersion = 'published', newVersion =
- +
- +
diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx index 024d0c70db..103cddf360 100644 --- a/src/library-authoring/component-info/ComponentPreview.tsx +++ b/src/library-authoring/component-info/ComponentPreview.tsx @@ -31,7 +31,7 @@ const ModalComponentPreview = ({ isOpen, close, usageKey }: ModalComponentPrevie ); @@ -72,7 +72,7 @@ const ComponentPreview = () => { usageKey={usageKey} key={componentMetadata.modified} version={showOnlyPublished ? 'published' : undefined} - minHeight="70vh" + minHeight="60vh" /> ) : null