Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-20 05:23:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: better spacing

Browse Source
This commit is contained in:
iCrawl
2022-08-23 01:02:46 +02:00
parent f16b11a91d
commit a55545850a
5 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -133,7 +133,7 @@ export function DocContainer({
{(kind === 'Class' || kind === 'Interface') && (methods?.length || properties?.length) ? ( {(kind === 'Class' || kind === 'Interface') && (methods?.length || properties?.length) ? (
<MediaQuery smallerThan="lg" styles={{ display: 'none' }}> <MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
<Aside hiddenBreakpoint="lg" width={{ lg: 250 }} withBorder> <Aside hiddenBreakpoint="lg" width={{ lg: 250 }} withBorder>
<ScrollArea p="xs" offsetScrollbars> <ScrollArea p="sm" offsetScrollbars>
<TableOfContentItems properties={properties ?? []} methods={methods ?? []}></TableOfContentItems> <TableOfContentItems properties={properties ?? []} methods={methods ?? []}></TableOfContentItems>
</ScrollArea> </ScrollArea>
</Aside> </Aside>

2
packages/website/src/components/ParameterTable.tsx
View File

@@ -19,7 +19,7 @@ export function ParameterTable({ data }: { data: ParameterDocumentation[] }) {
return ( return (
<Box> <Box>
<ScrollArea offsetScrollbars> <ScrollArea pb="xs" offsetScrollbars>
<Table columns={['Name', 'Type', 'Optional', 'Description']} rows={rows} columnStyles={columnStyles} /> <Table columns={['Name', 'Type', 'Optional', 'Description']} rows={rows} columnStyles={columnStyles} />
</ScrollArea> </ScrollArea>
</Box> </Box>

24
packages/website/src/components/SidebarLayout.tsx
View File

@@ -140,12 +140,12 @@ export function SidebarLayout({
return ( return (
<AppShell <AppShell
sx={{ sx={(theme) => ({
main: { main: {
background: theme.colorScheme === 'dark' ? theme.colors.dark![8] : theme.colors.gray![0], background: theme.colorScheme === 'dark' ? theme.colors.dark![8] : theme.colors.gray![0],
overflowX: 'auto', overflowX: 'auto',
}, },
}} })}
padding={0} padding={0}
navbarOffsetBreakpoint="md" navbarOffsetBreakpoint="md"
asideOffsetBreakpoint="md" asideOffsetBreakpoint="md"
@@ -213,7 +213,16 @@ export function SidebarLayout({
</Navbar> </Navbar>
} }
header={ header={
<Header height={70} p="md"> <Header
sx={(theme) => ({
boxShadow:
theme.colorScheme === 'dark'
? '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
: 'unset',
})}
height={70}
p="md"
>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: '100%' }}> <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: '100%' }}>
<Box> <Box>
<MediaQuery largerThan="md" styles={{ display: 'none' }}> <MediaQuery largerThan="md" styles={{ display: 'none' }}>
@@ -244,12 +253,13 @@ export function SidebarLayout({
> >
<article> <article>
<Box <Box
sx={{ sx={(theme) => ({
position: 'relative', position: 'relative',
minHeight: 'calc(100vh - 50px)', minHeight: 'calc(100vh - 50px)',
zIndex: 1, zIndex: 1,
background: theme.colorScheme === 'dark' ? theme.colors.dark![8] : theme.colors.gray![0], background: theme.colorScheme === 'dark' ? theme.colors.dark![8] : theme.colors.gray![0],
}} boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
})}
p="lg" p="lg"
pb={80} pb={80}
> >
@@ -257,7 +267,7 @@ export function SidebarLayout({
</Box> </Box>
<Box sx={{ height: 200 }}></Box> <Box sx={{ height: 200 }}></Box>
<Box <Box
sx={{ sx={(theme) => ({
position: 'fixed', position: 'fixed',
bottom: 0, bottom: 0,
left: 0, left: 0,
@@ -274,7 +284,7 @@ export function SidebarLayout({
[theme.fn.smallerThan('md')]: { [theme.fn.smallerThan('md')]: {
paddingLeft: 24, paddingLeft: 24,
}, },
}} })}
pt={70} pt={70}
> >
<Center> <Center>

4
packages/website/src/components/TableOfContentItems.tsx
View File

@@ -67,9 +67,9 @@ export function TableOfContentItems({
return ( return (
<Box sx={{ wordBreak: 'break-all' }}> <Box sx={{ wordBreak: 'break-all' }}>
<Group mb="md" ml={2}> <Group mt={2} mb="sm" ml={2}>
<VscListSelection size={25} /> <VscListSelection size={25} />
<Text>Table of contents</Text> <Text weight={600}>Table of contents</Text>
</Group> </Group>
<Stack spacing={0}> <Stack spacing={0}>
{propertyItems.length ? ( {propertyItems.length ? (

18
packages/website/src/components/TypeParamTable.tsx
View File

@@ -1,4 +1,4 @@
import { Box, ScrollArea } from '@mantine/core'; import { ScrollArea } from '@mantine/core';
import { HyperlinkedText } from './HyperlinkedText'; import { HyperlinkedText } from './HyperlinkedText';
import { Table } from './Table'; import { Table } from './Table';
import { TSDoc } from './tsdoc/TSDoc'; import { TSDoc } from './tsdoc/TSDoc';
@@ -20,14 +20,12 @@ export function TypeParamTable({ data }: { data: TypeParameterData[] }) {
}; };
return ( return (
<Box sx={{ overflowX: 'auto' }}> <ScrollArea pb="xs" offsetScrollbars>
<ScrollArea offsetScrollbars> <Table
<Table columns={['Name', 'Constraints', 'Optional', 'Default', 'Description']}
columns={['Name', 'Constraints', 'Optional', 'Default', 'Description']} rows={rows}
rows={rows} columnStyles={rowElements}
columnStyles={rowElements} />
/> </ScrollArea>
</ScrollArea>
</Box>
); );
} }