✨(frontend) enhance DocsGrid component and simplify layout
- add scroll inside the doc grid
This commit is contained in:
committed by
Anthony LC
parent
81e9fc49fe
commit
684b77cbe6
@@ -1,6 +1,7 @@
|
||||
import { Button, Loader } from '@openfun/cunningham-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { InView } from 'react-intersection-observer';
|
||||
import { css } from 'styled-components';
|
||||
|
||||
import { Box, Card, Text } from '@/components';
|
||||
import { useResponsiveStore } from '@/stores';
|
||||
@@ -51,10 +52,26 @@ export const DocsGrid = ({
|
||||
: t('All docs');
|
||||
|
||||
return (
|
||||
<Box $position="relative" $width="100%" $maxWidth="960px">
|
||||
<Box
|
||||
$position="relative"
|
||||
$width="100%"
|
||||
$maxWidth="960px"
|
||||
$maxHeight="calc(100vh - 52px - 1rem)"
|
||||
$align="center"
|
||||
$css={css`
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
`}
|
||||
>
|
||||
<DocsGridLoader isLoading={isRefetching} />
|
||||
<Card
|
||||
data-testid="docs-grid"
|
||||
$height="100%"
|
||||
$width="100%"
|
||||
$css={css`
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
`}
|
||||
$padding={{
|
||||
top: 'base',
|
||||
horizontal: isDesktop ? 'md' : 'xs',
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import type { ReactElement } from 'react';
|
||||
|
||||
import { Box } from '@/components';
|
||||
import { DocDefaultFilter } from '@/features/docs';
|
||||
import { DocsGrid } from '@/features/docs/docs-grid/components/DocsGrid';
|
||||
import { MainLayout } from '@/layouts';
|
||||
@@ -11,11 +10,7 @@ const Page: NextPageWithLayout = () => {
|
||||
const searchParams = useSearchParams();
|
||||
const target = searchParams.get('target');
|
||||
|
||||
return (
|
||||
<Box $width="100%" $align="center">
|
||||
<DocsGrid target={target as DocDefaultFilter} />
|
||||
</Box>
|
||||
);
|
||||
return <DocsGrid target={target as DocDefaultFilter} />;
|
||||
};
|
||||
|
||||
Page.getLayout = function getLayout(page: ReactElement) {
|
||||
|
||||
Reference in New Issue
Block a user