Skip to content

Commit

Permalink
✨(frontend) enhance DocsGrid component and simplify layout
Browse files Browse the repository at this point in the history
- add scroll inside the doc grid
  • Loading branch information
PanchoutNathan committed Dec 24, 2024
1 parent e7948a2 commit f5467a0
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 7 deletions.
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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',
Expand Down
7 changes: 1 addition & 6 deletions src/frontend/apps/impress/src/pages/docs/index.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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) {
Expand Down

0 comments on commit f5467a0

Please sign in to comment.