Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-16 11:33:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: mobile layout for badges

Browse Source
This commit is contained in:
iCrawl
2022-08-23 12:54:40 +02:00
parent 32da9b3868
commit a57b9ba5c4
4 changed files with 72 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
packages/website/src/components/CodeListing.tsx
View File

@@ -1,4 +1,4 @@
import { ActionIcon, Badge, Group, MediaQuery, Stack, Title } from '@mantine/core'; import { ActionIcon, Badge, Box, Group, MediaQuery, Stack, Title } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks'; import { useMediaQuery } from '@mantine/hooks';
import type { ReactNode } from 'react'; import type { ReactNode } from 'react';
import { FiLink } from 'react-icons/fi'; import { FiLink } from 'react-icons/fi';
@@ -41,28 +41,44 @@ export function CodeListing({
return ( return (
<Stack id={name} className="scroll-mt-30" spacing="xs"> <Stack id={name} className="scroll-mt-30" spacing="xs">
<Group ml={matches ? 0 : -45}> <Box
sx={(theme) => ({
display: 'flex',
gap: 16,
[theme.fn.smallerThan('sm')]: {
flexDirection: 'column',
},
})}
ml={matches ? 0 : -45}
>
<MediaQuery smallerThan="sm" styles={{ display: 'none' }}> <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
<ActionIcon component="a" href={`#${name}`} variant="transparent"> <ActionIcon component="a" href={`#${name}`} variant="transparent">
<FiLink size={20} /> <FiLink size={20} />
</ActionIcon> </ActionIcon>
</MediaQuery> </MediaQuery>
{deprecation ? ( {deprecation || readonly || optional ? (
<Badge variant="filled" color="red"> <Group spacing={10} noWrap>
Deprecated {deprecation ? (
</Badge> <Badge variant="filled" color="red">
Deprecated
</Badge>
) : null}
{readonly ? <Badge variant="filled">Readonly</Badge> : null}
{optional ? <Badge variant="filled">Optional</Badge> : null}
</Group>
) : null} ) : null}
{readonly ? <Badge variant="filled">Readonly</Badge> : null} <Group spacing={10}>
{optional ? <Badge variant="filled">Optional</Badge> : null} <Title order={4} className="font-mono">
<Title order={4} className="font-mono"> {name}
{name} {optional ? '?' : ''}
{optional ? '?' : ''} </Title>
</Title> <Title order={4}>{separator}</Title>
<Title order={4}>{separator}</Title> <Title sx={{ wordBreak: 'break-all' }} order={4} className="font-mono">
<Title sx={{ wordBreak: 'break-all' }} order={4} className="font-mono"> <HyperlinkedText tokens={typeTokens} />
<HyperlinkedText tokens={typeTokens} /> </Title>
</Title> </Group>
</Group> </Box>
<Group> <Group>
<Stack> <Stack>
{deprecation ? <TSDoc node={deprecation} /> : null} {deprecation ? <TSDoc node={deprecation} /> : null}

3
packages/website/src/components/DocContainer.tsx
View File

@@ -1,4 +1,4 @@
import { Group, Stack, Title, Text, Box, MediaQuery, Aside, ScrollArea, Skeleton } from '@mantine/core'; import { Group, Stack, Title, Text, Box, MediaQuery, Aside, ScrollArea, Skeleton, Divider } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks'; import { useMediaQuery } from '@mantine/hooks';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { Fragment, type ReactNode } from 'react'; import { Fragment, type ReactNode } from 'react';
@@ -80,6 +80,7 @@ export function DocContainer({
<Skeleton visible={router.isFallback} radius="sm"> <Skeleton visible={router.isFallback} radius="sm">
<Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}> <Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}>
{summary ? <TSDoc node={summary} /> : <Text>No summary provided.</Text>} {summary ? <TSDoc node={summary} /> : <Text>No summary provided.</Text>}
<Divider size="md" mt={20} />
</Section> </Section>
</Skeleton> </Skeleton>

52
packages/website/src/components/MethodItem.tsx
View File

@@ -1,4 +1,4 @@
import { ActionIcon, Badge, Group, MediaQuery, Stack, Title } from '@mantine/core'; import { ActionIcon, Badge, Box, Group, MediaQuery, Stack, Title } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks'; import { useMediaQuery } from '@mantine/hooks';
import { FiLink } from 'react-icons/fi'; import { FiLink } from 'react-icons/fi';
import { HyperlinkedText } from './HyperlinkedText'; import { HyperlinkedText } from './HyperlinkedText';
@@ -27,27 +27,47 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
<Stack id={key} className="scroll-mt-30" spacing="xs"> <Stack id={key} className="scroll-mt-30" spacing="xs">
<Group> <Group>
<Stack> <Stack>
<Group ml={matches ? 0 : -45}> <Box
sx={(theme) => ({
display: 'flex',
gap: 16,
[theme.fn.smallerThan('sm')]: {
flexDirection: 'column',
},
})}
ml={matches ? 0 : -45}
>
<MediaQuery smallerThan="sm" styles={{ display: 'none' }}> <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
<ActionIcon component="a" href={`#${key}`} variant="transparent"> <ActionIcon component="a" href={`#${key}`} variant="transparent">
<FiLink size={20} /> <FiLink size={20} />
</ActionIcon> </ActionIcon>
</MediaQuery> </MediaQuery>
{data.deprecated ? ( {data.deprecated ||
<Badge variant="filled" color="red"> (data.kind === 'Method' && method.visibility === Visibility.Protected) ||
Deprecated (data.kind === 'Method' && method.static) ? (
</Badge> <Group spacing={10} noWrap>
{data.deprecated ? (
<Badge variant="filled" color="red">
Deprecated
</Badge>
) : null}
{data.kind === 'Method' && method.visibility === Visibility.Protected ? (
<Badge variant="filled">Protected</Badge>
) : null}
{data.kind === 'Method' && method.static ? <Badge variant="filled">Static</Badge> : null}
</Group>
) : null} ) : null}
{data.kind === 'Method' && method.visibility === Visibility.Protected ? ( <Group spacing={10}>
<Badge variant="filled">Protected</Badge> <Title sx={{ wordBreak: 'break-all' }} order={4} className="font-mono">{`${getShorthandName(
) : null} data,
{data.kind === 'Method' && method.static ? <Badge variant="filled">Static</Badge> : null} )}`}</Title>
<Title sx={{ wordBreak: 'break-all' }} order={4} className="font-mono">{`${getShorthandName(data)}`}</Title> <Title order={4}>:</Title>
<Title order={4}>:</Title> <Title sx={{ wordBreak: 'break-all' }} order={4} className="font-mono">
<Title sx={{ wordBreak: 'break-all' }} order={4} className="font-mono"> <HyperlinkedText tokens={data.returnTypeTokens} />
<HyperlinkedText tokens={data.returnTypeTokens} /> </Title>
</Title> </Group>
</Group> </Box>
</Stack> </Stack>
</Group> </Group>
<Group sx={{ display: data.summary || data.parameters.length ? 'block' : 'none' }} mb="lg"> <Group sx={{ display: data.summary || data.parameters.length ? 'block' : 'none' }} mb="lg">

1
packages/website/tsconfig.eslint.json
View File

@@ -7,6 +7,7 @@
"**/*.ts", "**/*.ts",
"**/*.tsx", "**/*.tsx",
"**/*.js", "**/*.js",
"**/*.cjs",
"**/*.mjs", "**/*.mjs",
"**/*.jsx", "**/*.jsx",
"**/*.test.ts", "**/*.test.ts",