From fc4b700624bb290b86d29ee7fed47d328396ccca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com> Date: Wed, 18 Sep 2024 15:19:56 -0300 Subject: [PATCH] fix: responsiveness on library authoring sidebar (#1293) * fix: responsiveness on library authoring sidebar * fix: adjust margin to prevent height change * fix: prevent button stretch --- src/index.scss | 4 ++++ src/library-authoring/LibraryAuthoringPage.scss | 4 ++-- src/library-authoring/LibraryCollections.tsx | 14 ++------------ .../component-info/ComponentInfoHeader.tsx | 3 ++- .../components/ComponentCard.scss | 4 ---- .../components/LibraryComponents.tsx | 13 ++----------- src/library-authoring/index.scss | 9 ++++++++- 7 files changed, 20 insertions(+), 31 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..9680b8062b 100644 --- a/src/library-authoring/LibraryAuthoringPage.scss +++ b/src/library-authoring/LibraryAuthoringPage.scss @@ -6,14 +6,14 @@ .open-border { border: 2px solid; + margin: -1px 0; } } } .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 ( - <CardGrid - columnSizes={{ - sm: 12, - md: 6, - lg: 4, - xl: 3, - }} - hasEqualColumnHeights - > + <div className="library-cards-grid"> { collectionList.map((collectionHit) => ( <CollectionCard key={collectionHit.id} collectionHit={collectionHit} /> )) } - </CardGrid> + </div> ); }; 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 ( <Stack direction="horizontal"> - { inputIsActive + {inputIsActive ? ( <Form.Control autoFocus @@ -86,6 +86,7 @@ const ComponentInfoHeader = ({ library, usageKey }: ComponentInfoHeaderProps) => iconAs={Icon} alt={intl.formatMessage(messages.editNameButtonAlt)} onClick={handleClick} + size="inline" /> )} </> 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 ( - <CardGrid - columnSizes={{ - sm: 12, - md: 6, - lg: 4, - xl: 3, - }} - hasEqualColumnHeights - > + <div className="library-cards-grid"> { componentList.map((contentHit) => ( <ComponentCard key={contentHit.id} @@ -72,7 +63,7 @@ const LibraryComponents = ({ libraryId, variant }: LibraryComponentsProps) => { blockTypeDisplayName={blockTypes[contentHit.blockType]?.displayName ?? ''} /> )) } - </CardGrid> + </div> ); }; 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; +}