Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-10 00:23: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 type { ReactNode } from 'react';
import { FiLink } from 'react-icons/fi';
@@ -41,28 +41,44 @@ export function CodeListing({
return (
<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' }}>
<ActionIcon component="a" href={`#${name}`} variant="transparent">
<FiLink size={20} />
</ActionIcon>
</MediaQuery>
{deprecation ? (
<Badge variant="filled" color="red">
Deprecated
</Badge>
{deprecation || readonly || optional ? (
<Group spacing={10} noWrap>
{deprecation ? (
<Badge variant="filled" color="red">
Deprecated
</Badge>
) : null}
{readonly ? <Badge variant="filled">Readonly</Badge> : null}
{optional ? <Badge variant="filled">Optional</Badge> : null}
</Group>
) : null}
{readonly ? <Badge variant="filled">Readonly</Badge> : null}
{optional ? <Badge variant="filled">Optional</Badge> : null}
<Title order={4} className="font-mono">
{name}
{optional ? '?' : ''}
</Title>
<Title order={4}>{separator}</Title>
<Title sx={{ wordBreak: 'break-all' }} order={4} className="font-mono">
<HyperlinkedText tokens={typeTokens} />
</Title>
</Group>
<Group spacing={10}>
<Title order={4} className="font-mono">
{name}
{optional ? '?' : ''}
</Title>
<Title order={4}>{separator}</Title>
<Title sx={{ wordBreak: 'break-all' }} order={4} className="font-mono">
<HyperlinkedText tokens={typeTokens} />
</Title>
</Group>
</Box>
<Group>
<Stack>
{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 { useRouter } from 'next/router';
import { Fragment, type ReactNode } from 'react';
@@ -80,6 +80,7 @@ export function DocContainer({
<Skeleton visible={router.isFallback} radius="sm">
<Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}>
{summary ? <TSDoc node={summary} /> : <Text>No summary provided.</Text>}
<Divider size="md" mt={20} />
</Section>
</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 { FiLink } from 'react-icons/fi';
import { HyperlinkedText } from './HyperlinkedText';
@@ -27,27 +27,47 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
<Stack id={key} className="scroll-mt-30" spacing="xs">
<Group>
<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' }}>
<ActionIcon component="a" href={`#${key}`} variant="transparent">
<FiLink size={20} />
</ActionIcon>
</MediaQuery>
{data.deprecated ? (
<Badge variant="filled" color="red">
Deprecated
</Badge>
{data.deprecated ||
(data.kind === 'Method' && method.visibility === Visibility.Protected) ||
(data.kind === 'Method' && method.static) ? (
<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}
{data.kind === 'Method' && method.visibility === Visibility.Protected ? (
<Badge variant="filled">Protected</Badge>
) : null}
{data.kind === 'Method' && method.static ? <Badge variant="filled">Static</Badge> : null}
<Title sx={{ wordBreak: 'break-all' }} order={4} className="font-mono">{`${getShorthandName(data)}`}</Title>
<Title order={4}>:</Title>
<Title sx={{ wordBreak: 'break-all' }} order={4} className="font-mono">
<HyperlinkedText tokens={data.returnTypeTokens} />
</Title>
</Group>
<Group spacing={10}>
<Title sx={{ wordBreak: 'break-all' }} order={4} className="font-mono">{`${getShorthandName(
data,
)}`}</Title>
<Title order={4}>:</Title>
<Title sx={{ wordBreak: 'break-all' }} order={4} className="font-mono">
<HyperlinkedText tokens={data.returnTypeTokens} />
</Title>
</Group>
</Box>
</Stack>
</Group>
<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",
"**/*.tsx",
"**/*.js",
"**/*.cjs",
"**/*.mjs",
"**/*.jsx",
"**/*.test.ts",