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

fix: various css for the sidebar

Browse Source
This commit is contained in:
iCrawl
2022-07-26 09:48:40 +02:00
parent 1275918ca8
commit 798466a696
6 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,7 +30,7 @@ export function CodeListing({
<div className="w-full flex flex-row gap-3">
<h4 className="font-mono m-0">{`${name}`}</h4>
<h4 className="m-0">{separator}</h4>
<h4 className="font-mono m-0">
<h4 className="font-mono m-0 break-all">
<HyperlinkedText tokens={typeTokens} />
</h4>
</div>

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

@@ -42,7 +42,7 @@ export function DocContainer({ name, kind, excerpt, summary, typeParams, childre
<div className="flex flex-row items-center dark:text-white gap-3">
<h3 className="m-0">Extends:</h3>
<h3 className="m-0">{CodeListingSeparatorType.Type}</h3>
<p className="font-mono">
<p className="font-mono break-all">
<HyperlinkedText tokens={extendsTokens} />
</p>
</div>

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

@@ -19,7 +19,7 @@ function onMenuClick() {
export function ItemSidebar({ packageName, data, selectedMember }: ItemListProps) {
return (
<div className="flex flex-col max-h-full grow min-w-[270px] lg:border-r-solid border-0.5 border-gray">
<div className="flex flex-col min-h-full max-h-full grow min-w-[270px] lg:border-r-solid border-0.5 border-gray">
<div className="border-b-0.5 border-gray py-2">
<h2 className="flex gap-2 items-center m-0 px-2 dark:text-white">
<VscPackage />
@@ -29,7 +29,7 @@ export function ItemSidebar({ packageName, data, selectedMember }: ItemListProps
<FiMenu size={32} />
</button>
</div>
<div className="hidden lg:block lg:min-h-full overflow-y-scroll overflow-x-clip p-7 space-y-2">
<div className="hidden lg:block lg:min-h-full overflow-y-auto overflow-x-clip py-7 px-4">
<ListSidebar members={data.members} title="test" selectedMember={selectedMember} />
</div>
</div>

12
packages/website/src/components/ListSidebar.tsx
View File

@@ -63,7 +63,7 @@ export function ListSidebarSection({ members, selectedMember, title }: ListSideb
return (
<div>
<h3
className="flex items-center dark:text-white m-0 text-sm font-semibold gap-2"
className="flex items-center dark:text-white m-0 py-3 font-semibold gap-2 cursor-pointer"
onClick={() => setShowList(!showList)}
>
{showList ? <VscChevronDown size={20} /> : <VscChevronRight size={20} />}
@@ -72,7 +72,7 @@ export function ListSidebarSection({ members, selectedMember, title }: ListSideb
<AnimatePresence exitBeforeEnter initial={false}>
{showList ? (
<motion.div
className="ml-7 mt-2 space-y-3"
className="ml-7 space-y-3"
transition={{ duration: 0.5, ease: [0.04, 0.62, 0.23, 0.98] }}
key="content"
initial="collapsed"
@@ -96,9 +96,9 @@ export function ListSidebarSection({ members, selectedMember, title }: ListSideb
>
<Link href={member.path}>
<a
className={`no-underline m-0 text-sm ${
className={`no-underline m-0 text-sm font-semibold ${
selectedMember === member.name
? 'text-blue-500 dark:text-blue-300 font-semibold'
? 'text-blue-500 dark:text-blue-300'
: 'text-gray-500 dark:text-gray-300 hover:text-dark-100 dark:hover:text-white'
}`}
>
@@ -118,7 +118,7 @@ export function ListSidebar({ members, selectedMember }: ListSidebarSectionProps
const groupItems = groupMembers(members);
return (
<div className="space-y-2">
<>
{Object.keys(groupItems).map((group, i) => (
<ListSidebarSection
key={i}
@@ -127,6 +127,6 @@ export function ListSidebar({ members, selectedMember }: ListSidebarSectionProps
title={group}
/>
))}
</div>
</>
);
}

9
packages/website/src/components/Section.tsx
View File

@@ -16,10 +16,11 @@ export function Section({ title, children, className, defaultClosed }: SectionPr
return (
<div className={className}>
<AnimatePresence initial={false}>
<h3 className="flex gap-2 whitespace-pre-wrap font-semibold dark:text-white">
<div onClick={() => setCollapsed(!collapsed)}>
{collapsed ? <VscChevronRight size={20} /> : <VscChevronDown size={20} />}
</div>
<h3
className="flex gap-2 whitespace-pre-wrap font-semibold dark:text-white cursor-pointer"
onClick={() => setCollapsed(!collapsed)}
>
{collapsed ? <VscChevronRight size={20} /> : <VscChevronDown size={20} />}
{title}
</h3>
{collapsed ? null : (

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

@@ -9,12 +9,12 @@ export function SidebarLayout({
}: PropsWithChildren<Partial<ItemListProps & { data: { member: ReturnType<typeof findMember> } }>>) {
return (
<div className="flex flex-col lg:flex-row overflow-hidden max-w-full h-full max-h-full bg-white dark:bg-dark">
<div className="w-full lg:max-w-[370px] lg:min-w-[370px]">
<div className="h-full w-full lg:max-w-[370px] lg:min-w-[370px]">
{packageName && data ? (
<ItemSidebar packageName={packageName} data={data} selectedMember={data.member?.name} />
) : null}
</div>
<div className="max-h-full grow overflow-auto">{children}</div>
<div className="max-h-full grow overflow-x-hidden overflow-y-auto">{children}</div>
</div>
);
}