Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-19 13:03: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"> <div className="w-full flex flex-row gap-3">
<h4 className="font-mono m-0">{`${name}`}</h4> <h4 className="font-mono m-0">{`${name}`}</h4>
<h4 className="m-0">{separator}</h4> <h4 className="m-0">{separator}</h4>
<h4 className="font-mono m-0"> <h4 className="font-mono m-0 break-all">
<HyperlinkedText tokens={typeTokens} /> <HyperlinkedText tokens={typeTokens} />
</h4> </h4>
</div> </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"> <div className="flex flex-row items-center dark:text-white gap-3">
<h3 className="m-0">Extends:</h3> <h3 className="m-0">Extends:</h3>
<h3 className="m-0">{CodeListingSeparatorType.Type}</h3> <h3 className="m-0">{CodeListingSeparatorType.Type}</h3>
<p className="font-mono"> <p className="font-mono break-all">
<HyperlinkedText tokens={extendsTokens} /> <HyperlinkedText tokens={extendsTokens} />
</p> </p>
</div> </div>

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

@@ -19,7 +19,7 @@ function onMenuClick() {
export function ItemSidebar({ packageName, data, selectedMember }: ItemListProps) { export function ItemSidebar({ packageName, data, selectedMember }: ItemListProps) {
return ( 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"> <div className="border-b-0.5 border-gray py-2">
<h2 className="flex gap-2 items-center m-0 px-2 dark:text-white"> <h2 className="flex gap-2 items-center m-0 px-2 dark:text-white">
<VscPackage /> <VscPackage />
@@ -29,7 +29,7 @@ export function ItemSidebar({ packageName, data, selectedMember }: ItemListProps
<FiMenu size={32} /> <FiMenu size={32} />
</button> </button>
</div> </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} /> <ListSidebar members={data.members} title="test" selectedMember={selectedMember} />
</div> </div>
</div> </div>

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

@@ -63,7 +63,7 @@ export function ListSidebarSection({ members, selectedMember, title }: ListSideb
return ( return (
<div> <div>
<h3 <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)} onClick={() => setShowList(!showList)}
> >
{showList ? <VscChevronDown size={20} /> : <VscChevronRight size={20} />} {showList ? <VscChevronDown size={20} /> : <VscChevronRight size={20} />}
@@ -72,7 +72,7 @@ export function ListSidebarSection({ members, selectedMember, title }: ListSideb
<AnimatePresence exitBeforeEnter initial={false}> <AnimatePresence exitBeforeEnter initial={false}>
{showList ? ( {showList ? (
<motion.div <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] }} transition={{ duration: 0.5, ease: [0.04, 0.62, 0.23, 0.98] }}
key="content" key="content"
initial="collapsed" initial="collapsed"
@@ -96,9 +96,9 @@ export function ListSidebarSection({ members, selectedMember, title }: ListSideb
> >
<Link href={member.path}> <Link href={member.path}>
<a <a
className={`no-underline m-0 text-sm ${ className={`no-underline m-0 text-sm font-semibold ${
selectedMember === member.name 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' : '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); const groupItems = groupMembers(members);
return ( return (
<div className="space-y-2"> <>
{Object.keys(groupItems).map((group, i) => ( {Object.keys(groupItems).map((group, i) => (
<ListSidebarSection <ListSidebarSection
key={i} key={i}
@@ -127,6 +127,6 @@ export function ListSidebar({ members, selectedMember }: ListSidebarSectionProps
title={group} 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 ( return (
<div className={className}> <div className={className}>
<AnimatePresence initial={false}> <AnimatePresence initial={false}>
<h3 className="flex gap-2 whitespace-pre-wrap font-semibold dark:text-white"> <h3
<div onClick={() => setCollapsed(!collapsed)}> className="flex gap-2 whitespace-pre-wrap font-semibold dark:text-white cursor-pointer"
{collapsed ? <VscChevronRight size={20} /> : <VscChevronDown size={20} />} onClick={() => setCollapsed(!collapsed)}
</div> >
{collapsed ? <VscChevronRight size={20} /> : <VscChevronDown size={20} />}
{title} {title}
</h3> </h3>
{collapsed ? null : ( {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> } }>>) { }: PropsWithChildren<Partial<ItemListProps & { data: { member: ReturnType<typeof findMember> } }>>) {
return ( 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="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 ? ( {packageName && data ? (
<ItemSidebar packageName={packageName} data={data} selectedMember={data.member?.name} /> <ItemSidebar packageName={packageName} data={data} selectedMember={data.member?.name} />
) : null} ) : null}
</div> </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> </div>
); );
} }