✨(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 { Button, Loader } from '@openfun/cunningham-react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { InView } from 'react-intersection-observer';
|
import { InView } from 'react-intersection-observer';
|
||||||
|
import { css } from 'styled-components';
|
||||||
|
|
||||||
import { Box, Card, Text } from '@/components';
|
import { Box, Card, Text } from '@/components';
|
||||||
import { useResponsiveStore } from '@/stores';
|
import { useResponsiveStore } from '@/stores';
|
||||||
@@ -51,10 +52,26 @@ export const DocsGrid = ({
|
|||||||
: t('All docs');
|
: t('All docs');
|
||||||
|
|
||||||
return (
|
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} />
|
<DocsGridLoader isLoading={isRefetching} />
|
||||||
<Card
|
<Card
|
||||||
data-testid="docs-grid"
|
data-testid="docs-grid"
|
||||||
|
$height="100%"
|
||||||
|
$width="100%"
|
||||||
|
$css={css`
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
`}
|
||||||
$padding={{
|
$padding={{
|
||||||
top: 'base',
|
top: 'base',
|
||||||
horizontal: isDesktop ? 'md' : 'xs',
|
horizontal: isDesktop ? 'md' : 'xs',
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import { useSearchParams } from 'next/navigation';
|
import { useSearchParams } from 'next/navigation';
|
||||||
import type { ReactElement } from 'react';
|
import type { ReactElement } from 'react';
|
||||||
|
|
||||||
import { Box } from '@/components';
|
|
||||||
import { DocDefaultFilter } from '@/features/docs';
|
import { DocDefaultFilter } from '@/features/docs';
|
||||||
import { DocsGrid } from '@/features/docs/docs-grid/components/DocsGrid';
|
import { DocsGrid } from '@/features/docs/docs-grid/components/DocsGrid';
|
||||||
import { MainLayout } from '@/layouts';
|
import { MainLayout } from '@/layouts';
|
||||||
@@ -11,11 +10,7 @@ const Page: NextPageWithLayout = () => {
|
|||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const target = searchParams.get('target');
|
const target = searchParams.get('target');
|
||||||
|
|
||||||
return (
|
return <DocsGrid target={target as DocDefaultFilter} />;
|
||||||
<Box $width="100%" $align="center">
|
|
||||||
<DocsGrid target={target as DocDefaultFilter} />
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
Page.getLayout = function getLayout(page: ReactElement) {
|
Page.getLayout = function getLayout(page: ReactElement) {
|
||||||
|
|||||||
Reference in New Issue
Block a user