Skip to content

Commit b6e58d4

Browse files
rpenidorpenido
committed
feat: allow full width content in library authoring
1 parent 34f0bf5 commit b6e58d4

File tree

10 files changed

+1142
-470
lines changed

10 files changed

+1142
-470
lines changed

‎package-lock.json

Lines changed: 1083 additions & 413 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@
4747
"@dnd-kit/sortable": "^8.0.0",
4848
"@dnd-kit/utilities": "^3.2.2",
4949
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
50-
"@edx/frontend-component-footer": "^14.0.3",
51-
"@edx/frontend-component-header": "^5.3.3",
50+
"@edx/frontend-component-footer": "git+ssh://github.com/open-craft/frontend-component-footer#6468e03d7384ba2cac8ac687348171c7ad6c1196",
51+
"@edx/frontend-component-header": "git+ssh://github.com/open-craft/frontend-component-header#97edb99a3fe92b074bca52da5f1cbe7765cfd967",
5252
"@edx/frontend-enterprise-hotjar": "^2.0.0",
5353
"@edx/frontend-platform": "^8.0.3",
5454
"@edx/openedx-atlas": "^0.6.0",
@@ -63,7 +63,7 @@
6363
"@openedx-plugins/course-app-wiki": "file:plugins/course-apps/wiki",
6464
"@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
6565
"@openedx/frontend-plugin-framework": "^1.2.1",
66-
"@openedx/paragon": "^22.5.1",
66+
"@openedx/paragon": "git+ssh://github.com/open-craft/paragon#rpenido/dist/fal-3820-add-full-width-container-option",
6767
"@redux-devtools/extension": "^3.3.0",
6868
"@reduxjs/toolkit": "1.9.7",
6969
"@tanstack/react-query": "4.36.1",

‎src/header/Header.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ interface HeaderProps {
1717
title?: string,
1818
isHiddenMainMenu?: boolean,
1919
isLibrary?: boolean,
20+
full?: boolean,
2021
}
2122

2223
const Header = ({
@@ -26,6 +27,7 @@ const Header = ({
2627
title = '',
2728
isHiddenMainMenu = false,
2829
isLibrary = false,
30+
full,
2931
}: HeaderProps) => {
3032
const intl = useIntl();
3133
const libraryHref = useHref('/library/:libraryId');
@@ -65,6 +67,7 @@ const Header = ({
6567
mainMenuDropdowns={mainMenuDropdowns}
6668
outlineLink={outlineLink}
6769
searchButtonAction={meiliSearchEnabled ? openSearchModal : undefined}
70+
full={full}
6871
/>
6972
{ meiliSearchEnabled && (
7073
<SearchModal

‎src/index.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,7 @@ body {
6161
background-color: $light-100;
6262
}
6363
}
64+
65+
mark {
66+
padding: 0;
67+
}

‎src/library-authoring/LibraryAuthoringPage.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,8 +158,9 @@ const LibraryAuthoringPage = () => {
158158
org={libraryData.org}
159159
contextId={libraryId}
160160
isLibrary
161+
full
161162
/>
162-
<Container size="xl" className="px-4 mt-4 mb-5 library-authoring-page">
163+
<Container className="px-4 mt-4 mb-5 library-authoring-page">
163164
<SearchContextProvider
164165
extraFilter={`context_key = "${libraryId}"`}
165166
>
@@ -212,7 +213,7 @@ const LibraryAuthoringPage = () => {
212213
</Routes>
213214
</SearchContextProvider>
214215
</Container>
215-
<StudioFooter />
216+
<StudioFooter full />
216217
</div>
217218
{ !!sidebarBodyComponent && (
218219
<div className="library-authoring-sidebar box-shadow-left-1 bg-white" data-testid="library-sidebar">

‎src/library-authoring/components/ComponentCard.scss

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
.library-component-card {
2-
.pgn__card {
3-
height: 100%;
4-
}
52

63
.library-component-header {
74
border-top-left-radius: .375rem;

‎src/library-authoring/components/ComponentCard.tsx

Lines changed: 36 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useIntl } from '@edx/frontend-platform/i18n';
33
import {
44
ActionRow,
55
Card,
6-
Container,
76
Icon,
87
IconButton,
98
Dropdown,
@@ -88,44 +87,43 @@ const ComponentCard = ({ contentHit, blockTypeDisplayName } : ComponentCardProps
8887
const componentIcon = getItemIcon(blockType);
8988

9089
return (
91-
<Container className="library-component-card">
92-
<Card
93-
isClickable
94-
onClick={() => openComponentInfoSidebar(usageKey)}
95-
onKeyDown={(e: React.KeyboardEvent) => {
96-
if (['Enter', ' '].includes(e.key)) {
97-
openComponentInfoSidebar(usageKey);
98-
}
99-
}}
100-
>
101-
<Card.Header
102-
className={`library-component-header ${getComponentStyleColor(blockType)}`}
103-
title={
104-
<Icon src={componentIcon} className="library-component-header-icon" />
105-
}
106-
actions={(
107-
<ActionRow>
108-
<ComponentMenu usageKey={usageKey} />
109-
</ActionRow>
110-
)}
111-
/>
112-
<Card.Body>
113-
<Card.Section>
114-
<Stack direction="horizontal" className="d-flex justify-content-between">
115-
<Stack direction="horizontal" gap={1}>
116-
<Icon src={componentIcon} size="sm" />
117-
<span className="small">{blockTypeDisplayName}</span>
118-
</Stack>
119-
<TagCount count={tagCount} />
90+
<Card
91+
isClickable
92+
onClick={() => openComponentInfoSidebar(usageKey)}
93+
onKeyDown={(e: React.KeyboardEvent) => {
94+
if (['Enter', ' '].includes(e.key)) {
95+
openComponentInfoSidebar(usageKey);
96+
}
97+
}}
98+
className="library-component-card"
99+
>
100+
<Card.Header
101+
className={`library-component-header ${getComponentStyleColor(blockType)}`}
102+
title={
103+
<Icon src={componentIcon} className="library-component-header-icon" />
104+
}
105+
actions={(
106+
<ActionRow>
107+
<ComponentMenu usageKey={usageKey} />
108+
</ActionRow>
109+
)}
110+
/>
111+
<Card.Body>
112+
<Card.Section>
113+
<Stack direction="horizontal" className="d-flex justify-content-between">
114+
<Stack direction="horizontal" gap={1}>
115+
<Icon src={componentIcon} size="sm" />
116+
<span className="small">{blockTypeDisplayName}</span>
120117
</Stack>
121-
<div className="text-truncate h3 mt-2">
122-
<Highlight text={displayName} />
123-
</div>
124-
<Highlight text={description} />
125-
</Card.Section>
126-
</Card.Body>
127-
</Card>
128-
</Container>
118+
<TagCount count={tagCount} />
119+
</Stack>
120+
<div className="text-truncate h3 mt-2">
121+
<Highlight text={displayName} />
122+
</div>
123+
<Highlight text={description} />
124+
</Card.Section>
125+
</Card.Body>
126+
</Card>
129127
);
130128
};
131129

‎src/library-authoring/components/LibraryComponents.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.library-components-grid {
2+
display: grid;
3+
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
4+
grid-gap: 2rem;
5+
justify-items: center;
6+
}

‎src/library-authoring/components/LibraryComponents.tsx

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useMemo } from 'react';
2-
import { CardGrid } from '@openedx/paragon';
2+
import { Container } from '@openedx/paragon';
33

44
import { useSearchContext } from '../../search-manager';
55
import { NoComponents, NoSearchResults } from '../EmptyStates';
@@ -69,23 +69,15 @@ const LibraryComponents = ({ libraryId, variant }: LibraryComponentsProps) => {
6969
}
7070

7171
return (
72-
<CardGrid
73-
columnSizes={{
74-
sm: 12,
75-
md: 6,
76-
lg: 4,
77-
xl: 3,
78-
}}
79-
hasEqualColumnHeights
80-
>
72+
<div className="library-components-grid">
8173
{ componentList.map((contentHit) => (
8274
<ComponentCard
8375
key={contentHit.id}
8476
contentHit={contentHit}
8577
blockTypeDisplayName={blockTypes[contentHit.blockType]?.displayName ?? ''}
8678
/>
8779
)) }
88-
</CardGrid>
80+
</div>
8981
);
9082
};
9183

‎src/library-authoring/index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
@import "library-authoring/components/ComponentCard";
2+
@import "library-authoring/components/LibraryComponents";
23
@import "library-authoring/library-info/LibraryPublishStatus";
34
@import "library-authoring/LibraryAuthoringPage";

0 commit comments

Comments
 (0)