Skip to content

fix: auto adjust min height of xblock previews [FC-0083] #1813

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

Merged
ChrisChV merged 2 commits into from
Apr 15, 2025
Merged

fix: auto adjust min height of xblock previews [FC-0083] #1813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3d08b73
fix: auto adjust min height of xblock previews
navinkarkera Apr 12, 2025
55d3af7
fix: add min height to all library blocks
navinkarkera Apr 14, 2025
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
1 change: 1 addition & 0 deletions src/editors/AdvancedEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ const AdvancedEditor = ({ usageKey, onClose }: AdvancedEditorProps) => {
usageKey={usageKey}
view="studio_view"
scrolling="yes"
minHeight="70vh"
/>
</IframeProvider>
</EditorModalWrapper>
Expand Down
4 changes: 3 additions & 1 deletion src/library-authoring/LibraryBlock/LibraryBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ interface LibraryBlockProps {
version?: VersionSpec;
view?: string;
scrolling?: string;
minHeight?: string;
}
/**
* React component that displays an XBlock in a sandboxed IFrame.
Expand All @@ -30,6 +31,7 @@ export const LibraryBlock = ({
usageKey,
version,
view,
minHeight,
scrolling = 'no',
}: LibraryBlockProps) => {
const { iframeRef, setIframeRef } = useIframe();
Expand Down Expand Up @@ -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
Expand Down
12 changes: 10 additions & 2 deletions src/library-authoring/component-comparison/CompareChangesWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,22 @@ const CompareChangesWidget = ({ usageKey, oldVersion = 'published', newVersion =
<Tab eventKey="old" title={intl.formatMessage(messages.oldVersionTitle)}>
<div className="p-2 bg-white">
<IframeProvider>
<LibraryBlock usageKey={usageKey} version={oldVersion} />
<LibraryBlock
usageKey={usageKey}
version={oldVersion}
minHeight="50vh"
/>
</IframeProvider>
</div>
</Tab>
<Tab eventKey="new" title={intl.formatMessage(messages.newVersionTitle)}>
<div className="p-2 bg-white">
<IframeProvider>
<LibraryBlock usageKey={usageKey} version={newVersion} />
<LibraryBlock
usageKey={usageKey}
version={newVersion}
minHeight="50vh"
/>
</IframeProvider>
</div>
</Tab>
Expand Down
2 changes: 2 additions & 0 deletions src/library-authoring/component-info/ComponentPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ const ModalComponentPreview = ({ isOpen, close, usageKey }: ModalComponentPrevie
<LibraryBlock
usageKey={usageKey}
version={showOnlyPublished ? 'published' : undefined}
minHeight="60vh"
/>
</StandardModal>
);
Expand Down Expand Up @@ -71,6 +72,7 @@ const ComponentPreview = () => {
usageKey={usageKey}
key={componentMetadata.modified}
version={showOnlyPublished ? 'published' : undefined}
minHeight="60vh"
/>
)
: null
Expand Down
19 changes: 19 additions & 0 deletions src/library-authoring/units/LibraryUnitBlocks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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',
Comment on lines +29 to +34
Copy link
Contributor Author

@navinkarkera navinkarkera Apr 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ChrisChV We just need to add block types that need larger min height, let me know if I missed any.

Copy link
Contributor

@ChrisChV ChrisChV Apr 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@navinkarkera For the previews those are fine 👍

];

export const LibraryUnitBlocks = () => {
const intl = useIntl();
const [orderedBlocks, setOrderedBlocks] = useState<LibraryBlockMetadata[]>([]);
Expand Down Expand Up @@ -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) => (
<IframeProvider key={block.id}>
<SortableItem
Expand Down Expand Up @@ -124,6 +142,7 @@ export const LibraryUnitBlocks = () => {
<LibraryBlock
usageKey={block.id}
version={showOnlyPublished ? 'published' : undefined}
minHeight={calculateMinHeight(block)}
/>
</div>
</SortableItem>
Expand Down