From a57b9ba5c4c7dcff09caf8f59cc6f7a480932355 Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Tue, 23 Aug 2022 12:54:40 +0200
Subject: [PATCH] refactor: mobile layout for badges

---
 .../website/src/components/CodeListing.tsx    | 50 ++++++++++++------
 .../website/src/components/DocContainer.tsx   |  3 +-
 .../website/src/components/MethodItem.tsx     | 52 +++++++++++++------
 packages/website/tsconfig.eslint.json         |  1 +
 4 files changed, 72 insertions(+), 34 deletions(-)

diff --git a/packages/website/src/components/CodeListing.tsx b/packages/website/src/components/CodeListing.tsx
index 53e26fd08..e3eeb3287 100644
--- a/packages/website/src/components/CodeListing.tsx
+++ b/packages/website/src/components/CodeListing.tsx
@@ -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}
diff --git a/packages/website/src/components/DocContainer.tsx b/packages/website/src/components/DocContainer.tsx
index afc8e4f6f..ca83728b0 100644
--- a/packages/website/src/components/DocContainer.tsx
+++ b/packages/website/src/components/DocContainer.tsx
@@ -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>
 
diff --git a/packages/website/src/components/MethodItem.tsx b/packages/website/src/components/MethodItem.tsx
index 8219d7808..82b84feef 100644
--- a/packages/website/src/components/MethodItem.tsx
+++ b/packages/website/src/components/MethodItem.tsx
@@ -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">
diff --git a/packages/website/tsconfig.eslint.json b/packages/website/tsconfig.eslint.json
index d04d4be3a..63e703d90 100644
--- a/packages/website/tsconfig.eslint.json
+++ b/packages/website/tsconfig.eslint.json
@@ -7,6 +7,7 @@
 		"**/*.ts",
 		"**/*.tsx",
 		"**/*.js",
+		"**/*.cjs",
 		"**/*.mjs",
 		"**/*.jsx",
 		"**/*.test.ts",