fix: make sidebar (and content) fill the whole page (#2777)
This commit is contained in:
@@ -55,53 +55,51 @@ export const CourseImportHomePage = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="d-flex">
|
||||
<div className="flex-grow-1">
|
||||
<Helmet>
|
||||
<title>{libraryData.title} | {process.env.SITE_NAME}</title>
|
||||
</Helmet>
|
||||
<Header
|
||||
number={libraryData.slug}
|
||||
title={libraryData.title}
|
||||
org={libraryData.org}
|
||||
contextId={libraryId}
|
||||
isLibrary
|
||||
readOnly={readOnly}
|
||||
containerProps={{
|
||||
size: undefined,
|
||||
}}
|
||||
/>
|
||||
<Container className="mt-4 mb-5">
|
||||
<div className="px-4 bg-light-200 border-bottom">
|
||||
<SubHeader
|
||||
title={intl.formatMessage(messages.pageTitle)}
|
||||
subtitle={intl.formatMessage(messages.pageSubtitle)}
|
||||
hideBorder
|
||||
headerActions={<ImportCourseButton />}
|
||||
/>
|
||||
</div>
|
||||
<Layout xs={[{ span: 9 }, { span: 3 }]}>
|
||||
<Layout.Element>
|
||||
{courseImports.length ? (
|
||||
<Stack gap={3} className="pl-4 mt-4">
|
||||
<h3>
|
||||
<FormattedMessage {...messages.courseImportPreviousImports} />
|
||||
</h3>
|
||||
{courseImports.map((courseImport) => (
|
||||
<ImportedCourseCard
|
||||
key={courseImport.source.key}
|
||||
courseImport={courseImport}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
) : (<EmptyState />)}
|
||||
</Layout.Element>
|
||||
<Layout.Element>
|
||||
<HelpSidebar />
|
||||
</Layout.Element>
|
||||
</Layout>
|
||||
</Container>
|
||||
</div>
|
||||
<div className="d-flex flex-column vh-100 course-import">
|
||||
<Helmet>
|
||||
<title>{libraryData.title} | {process.env.SITE_NAME}</title>
|
||||
</Helmet>
|
||||
<Header
|
||||
number={libraryData.slug}
|
||||
title={libraryData.title}
|
||||
org={libraryData.org}
|
||||
contextId={libraryId}
|
||||
isLibrary
|
||||
readOnly={readOnly}
|
||||
containerProps={{
|
||||
size: undefined,
|
||||
}}
|
||||
/>
|
||||
<Container className="mt-4 d-flex flex-column flex-grow-1">
|
||||
<div className="px-4 bg-light-200 border-bottom">
|
||||
<SubHeader
|
||||
title={intl.formatMessage(messages.pageTitle)}
|
||||
subtitle={intl.formatMessage(messages.pageSubtitle)}
|
||||
hideBorder
|
||||
headerActions={<ImportCourseButton />}
|
||||
/>
|
||||
</div>
|
||||
<Layout xs={[{ span: 9 }, { span: 3 }]}>
|
||||
<Layout.Element>
|
||||
{courseImports.length ? (
|
||||
<Stack gap={3} className="pl-4 mt-4">
|
||||
<h3>
|
||||
<FormattedMessage {...messages.courseImportPreviousImports} />
|
||||
</h3>
|
||||
{courseImports.map((courseImport) => (
|
||||
<ImportedCourseCard
|
||||
key={courseImport.source.key}
|
||||
courseImport={courseImport}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
) : (<EmptyState />)}
|
||||
</Layout.Element>
|
||||
<Layout.Element>
|
||||
<HelpSidebar />
|
||||
</Layout.Element>
|
||||
</Layout>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -36,3 +36,10 @@
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.course-import {
|
||||
.row {
|
||||
// Make the row grow to fill the remaining vertial space
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user