From caee0dccfc4ca5a85701268effb7f2cb7d56288a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=B4mulo=20Penido?= Date: Tue, 17 Sep 2024 16:11:27 -0300 Subject: [PATCH 1/3] fix: responsiveness on library authoring sidebar --- src/index.scss | 4 ++++ src/library-authoring/LibraryAuthoringPage.scss | 3 +-- src/library-authoring/LibraryCollections.tsx | 14 ++------------ .../components/ComponentCard.scss | 4 ---- .../components/LibraryComponents.tsx | 13 ++----------- src/library-authoring/index.scss | 9 ++++++++- 6 files changed, 17 insertions(+), 30 deletions(-) diff --git a/src/index.scss b/src/index.scss index 764489d1d4..69f9b8b34f 100644 --- a/src/index.scss +++ b/src/index.scss @@ -61,3 +61,7 @@ body { background-color: $light-100; } } + +mark { + padding: 0; +} diff --git a/src/library-authoring/LibraryAuthoringPage.scss b/src/library-authoring/LibraryAuthoringPage.scss index 03a167b370..9800997719 100644 --- a/src/library-authoring/LibraryAuthoringPage.scss +++ b/src/library-authoring/LibraryAuthoringPage.scss @@ -11,9 +11,8 @@ } .library-authoring-sidebar { - min-width: 300px; - max-width: map-get($grid-breakpoints, "sm"); z-index: 1001; // to appear over header + flex: 450px 0 0; position: sticky; top: 0; right: 0; diff --git a/src/library-authoring/LibraryCollections.tsx b/src/library-authoring/LibraryCollections.tsx index 24fc112c1b..f8e1bf56b2 100644 --- a/src/library-authoring/LibraryCollections.tsx +++ b/src/library-authoring/LibraryCollections.tsx @@ -1,5 +1,3 @@ -import { CardGrid } from '@openedx/paragon'; - import { useLoadOnScroll } from '../hooks'; import { useSearchContext } from '../search-manager'; import { NoComponents, NoSearchResults } from './EmptyStates'; @@ -41,22 +39,14 @@ const LibraryCollections = ({ variant }: LibraryCollectionsProps) => { } return ( - +
{ collectionList.map((collectionHit) => ( )) } - +
); }; diff --git a/src/library-authoring/components/ComponentCard.scss b/src/library-authoring/components/ComponentCard.scss index cd39a690e5..fd902fb33b 100644 --- a/src/library-authoring/components/ComponentCard.scss +++ b/src/library-authoring/components/ComponentCard.scss @@ -1,8 +1,4 @@ .library-component-card { - .pgn__card { - height: 100%; - } - .library-component-header { border-top-left-radius: .375rem; border-top-right-radius: .375rem; diff --git a/src/library-authoring/components/LibraryComponents.tsx b/src/library-authoring/components/LibraryComponents.tsx index 4b6eb6c647..af02dff1f9 100644 --- a/src/library-authoring/components/LibraryComponents.tsx +++ b/src/library-authoring/components/LibraryComponents.tsx @@ -1,5 +1,4 @@ import React, { useMemo } from 'react'; -import { CardGrid } from '@openedx/paragon'; import { useLoadOnScroll } from '../../hooks'; import { useSearchContext } from '../../search-manager'; @@ -56,15 +55,7 @@ const LibraryComponents = ({ libraryId, variant }: LibraryComponentsProps) => { } return ( - +
{ componentList.map((contentHit) => ( { blockTypeDisplayName={blockTypes[contentHit.blockType]?.displayName ?? ''} /> )) } - +
); }; diff --git a/src/library-authoring/index.scss b/src/library-authoring/index.scss index 7bfb8cae9f..62097ddbc3 100644 --- a/src/library-authoring/index.scss +++ b/src/library-authoring/index.scss @@ -1,4 +1,11 @@ @import "./component-info/ComponentPreview"; @import "./components/ComponentCard"; @import "./generic"; -@import "./LibraryAuthoringPage"; \ No newline at end of file +@import "./LibraryAuthoringPage"; + +.library-cards-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + grid-gap: 2rem; + justify-items: center; +} From 9607acc35070e93f0a948ee6493171662c779cfe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=B4mulo=20Penido?= Date: Wed, 18 Sep 2024 05:24:02 -0300 Subject: [PATCH 2/3] fix: adjust margin to prevent height change --- src/library-authoring/LibraryAuthoringPage.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/library-authoring/LibraryAuthoringPage.scss b/src/library-authoring/LibraryAuthoringPage.scss index 9800997719..9680b8062b 100644 --- a/src/library-authoring/LibraryAuthoringPage.scss +++ b/src/library-authoring/LibraryAuthoringPage.scss @@ -6,6 +6,7 @@ .open-border { border: 2px solid; + margin: -1px 0; } } } From 124bd9470051752fe1cf547aa645adc01b04bec6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=B4mulo=20Penido?= Date: Wed, 18 Sep 2024 14:56:36 -0300 Subject: [PATCH 3/3] fix: prevent button stretch --- src/library-authoring/component-info/ComponentInfoHeader.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/library-authoring/component-info/ComponentInfoHeader.tsx b/src/library-authoring/component-info/ComponentInfoHeader.tsx index 205acecfd4..12751166ab 100644 --- a/src/library-authoring/component-info/ComponentInfoHeader.tsx +++ b/src/library-authoring/component-info/ComponentInfoHeader.tsx @@ -62,7 +62,7 @@ const ComponentInfoHeader = ({ library, usageKey }: ComponentInfoHeaderProps) => return ( - { inputIsActive + {inputIsActive ? ( iconAs={Icon} alt={intl.formatMessage(messages.editNameButtonAlt)} onClick={handleClick} + size="inline" /> )}