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

fix(website): various UI improvements (#9538)

Browse Source 
* fix(website): raise category z-index to prevent clipping

* refactor(website): wrap footer badges when necessary to prevent overflow
This commit is contained in:
synicalsyntax
2023-05-08 02:59:25 -04:00
committed by GitHub
parent 5b8d535fd6
commit 280ed0ce08
2 changed files with 71 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/website/src/components/Footer.tsx
View File

@@ -5,9 +5,8 @@ import workersLogo from '~/assets/powered-by-workers.png';
export default function Footer() { export default function Footer() {
return ( return (
<footer className="md:pl-12 md:pr-12"> <footer className="md:pl-12 md:pr-12">
<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-12 pt-12 lg:place-content-center"> <div className="flex flex-wrap place-content-center gap-6 md:flex-nowrap md:gap-12">
<div className="w-full flex flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0"> <div className="flex basis-full flex-wrap place-content-center place-items-center gap-4 md:basis-auto">
<div className="flex flex-col gap-4 lg:flex-row">
<a <a
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple" className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss" href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
@@ -41,8 +40,7 @@ export default function Footer() {
/> />
</a> </a>
</div> </div>
<div className="flex flex-row gap-6 md:gap-12"> <div className="max-w-max flex grow basis-0 flex-col gap-2 md:basis-auto">
<div className="flex flex-col gap-2">
<div className="text-lg font-semibold">Community</div> <div className="text-lg font-semibold">Community</div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<a <a
@@ -63,7 +61,7 @@ export default function Footer() {
</a> </a>
</div> </div>
</div> </div>
<div className="flex flex-col gap-2"> <div className="max-w-max flex grow basis-0 flex-col gap-2 md:basis-auto">
<div className="text-lg font-semibold">Project</div> <div className="text-lg font-semibold">Project</div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<a <a
@@ -76,11 +74,11 @@ export default function Footer() {
</a> </a>
<a <a
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple" className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://discordjs.guide" href="https://discord.js.org/docs"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
discord.js guide discord.js documentation
</a> </a>
<a <a
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple" className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
@@ -93,8 +91,6 @@ export default function Footer() {
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</footer> </footer>
); );
} }

2
apps/website/src/components/Sidebar.tsx
View File

@@ -94,7 +94,7 @@ export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
.filter((group) => groupItems[group].length) .filter((group) => groupItems[group].length)
.map((group, idx) => ( .map((group, idx) => (
<Section <Section
buttonClassName="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-none focus:ring" buttonClassName="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-none focus:ring z-10"
icon={resolveIcon(group)} icon={resolveIcon(group)}
key={`${group}-${idx}`} key={`${group}-${idx}`}
title={group} title={group}