Skip to content

Commit

Permalink
TOC styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@pogseal
pogseal committed Sep 10, 2024
1 parent 631819e commit 44fed8e
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 27 deletions.
2 changes: 2 additions & 0 deletions app/components/icons.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
export type IconName =
| "hash"
| "corner-down-right"
| "chevrons-left"
| "square-plus"
| "message-square-plus"
Expand Down
2 changes: 1 addition & 1 deletion app/routes/_editor+/core/components/EditorBlocks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export function EditorBlocks({
return (
<h3
id={id}
className="flex max-laptop:flex-col laptop:items-center dark:text-zinc-100 gap-3 mt-6 mb-2 font-header text-xl scroll-mt-20"
className="flex max-laptop:flex-col laptop:items-center dark:text-zinc-100 gap-1 tablet:gap-3 pb-1.5 mt-6 font-header text-xl scroll-mt-20"
{...attributes}
>
<div className="min-w-[10px] flex-none whitespace-pre-wrap">
Expand Down
81 changes: 55 additions & 26 deletions app/routes/_site+/c_+/_components/TableOfContents.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { SerializeFrom } from "@remix-run/node";
import { Link } from "@remix-run/react";
import clsx from "clsx";

import { Icon } from "~/components/Icon";
import type { Collection } from "~/db/payload-types";
Expand Down Expand Up @@ -53,48 +54,76 @@ export function TableOfContents({
<span>Table of Contents</span>
</div>
</div>
<div className="py-1.5">
<div className="py-3.5 space-y-2.5">
{sectionsList?.map((section) => (
<div key={section.id}>
<div className="py-1 group flex items-center relative -ml-1.5 hover:underline dark:decoration-zinc-500 decoration-zinc-300">
<div className="group flex items-center relative -ml-1.5 hover:underline dark:decoration-zinc-500 decoration-zinc-300">
<div
className="w-3 h-3 border group-hover:bg-zinc-200 dark:border-zinc-600 border-zinc-300 dark:group-hover:border-zinc-500
bg-zinc-100 dark:bg-dark500 rounded-full dark:shadow-zinc-800 dark:group-hover:bg-dark500"
className="size-3 border group-hover:bg-zinc-200 dark:border-zinc-600 border-zinc-300 dark:group-hover:border-zinc-500
bg-zinc-100 dark:bg-dark450 rounded-full dark:shadow-zinc-800 dark:group-hover:bg-dark500"
/>
<div className="w-3 h-[1px] dark:bg-zinc-700 bg-zinc-200" />
<Link
to={`#${section?.slug}`}
className="font-bold pl-2 py-1.5 flex items-center w-full gap-3 dark:hover:bg-dark450 border border-r-0 shadow-sm shadow-zinc-100
border-zinc-100 border-l-2 border-l-zinc-200/80 dark:border-l-zinc-600/80 dark:border-zinc-700 bg-white dark:bg-dark400 dark:shadow-zinc-800/50 hover:bg-zinc-100 rounded-l-lg"
className={clsx(
section?.subSections &&
section?.subSections?.length > 1
? "rounded-t-lg border-b-0"
: "rounded-lg shadow-sm shadow-zinc-100 dark:shadow-zinc-800/40",
"font-bold pl-2 pr-2.5 mr-3 py-1.5 flex items-center w-full gap-1.5 dark:hover:bg-dark450 border border-color-sub bg-white dark:bg-dark400 hover:bg-zinc-100 ",
)}
>
<span>{section.name}</span>
<Icon
name="hash"
size={12}
className="dark:text-zinc-500 text-zinc-400"
/>
<span className="pr-1">{section.name}</span>
<div className="border-t border-dotted border-zinc-300/80 dark:border-zinc-600 flex-grow" />
<Icon
name="chevron-down"
size={14}
className="dark:text-zinc-500 text-zinc-400"
/>
</Link>
</div>
{section.subSections &&
section.subSections?.length === 1 ? null : (
<div className="space-y-1">
(section.subSections?.length === 1 ||
section.subSections?.length === 0) ? null : (
<div
className={clsx(
section?.subSections &&
section?.subSections?.length > 1
? "rounded-b-lg"
: "rounded-lg",
"border border-color-sub overflow-hidden divide-y divide-color-sub mr-3 ml-[16.5px] tablet:ml-[17px] bg-3-sub shadow-sm shadow-zinc-100 dark:shadow-zinc-800/50",
)}
>
{section.subSections?.map((subSection) => (
<div
<Link
key={subSection.id}
className="group flex w-full items-center relative dark:decoration-zinc-500 decoration-zinc-300"
className="group flex w-full items-center justify-between relative dark:hover:bg-dark450 hover:bg-zinc-50 dark:decoration-zinc-500 decoration-zinc-300 px-2.5 py-2 text-xs font-bold"
to={
section.viewType == "rows"
? `#${subSection?.slug}`
: `?section=${subSection?.slug}#${section?.slug}`
}
>
<div
className="w-[4px] h-4 group-hover:bg-zinc-300 -ml-[1px]
bg-zinc-200 dark:bg-dark450 rounded-r-sm dark:group-hover:bg-dark500"
<div className="flex items-center gap-2">
<Icon
name="corner-down-right"
size={14}
className="dark:text-zinc-500 text-zinc-400"
/>
{/* <span className="dark:bg-zinc-600 bg-zinc-300 size-1.5 rounded-full" /> */}
<span>{subSection.name}</span>
</div>
<Icon
name="chevron-down"
size={14}
className="dark:text-zinc-500 text-zinc-400"
/>
<Link
to={
section.viewType == "rows"
? `#${subSection?.slug}`
: `?section=${subSection?.slug}#${section?.slug}`
}
className="font-bold bg-white dark:bg-dark400 dark:hover:bg-dark450 hover:bg-zinc-100
flex items-center gap-3 text-sm rounded-l-xl pl-2 ml-4 text-1 w-full py-1.5"
>
{subSection.name}
</Link>
</div>
</Link>
))}
</div>
)}
Expand Down
17 changes: 17 additions & 0 deletions public/icons/corner-down-right.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions public/icons/hash.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 44fed8e

Please sign in to comment.