dev.2ha.me/lixiyu-net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix some responsive layout bugs

Browse Source
This commit is contained in:
PrinOrange
2024-01-06 14:06:49 +08:00
parent 8db176fae9
commit 698029f509
16 changed files with 22 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/readerpage/DrawerTOC.tsx
View File

@@ -12,7 +12,7 @@ export const DrawerTOC = (props: { data: TTOCItem[] }) => {
title="Open the table of contents"
className="bottom-7 right-4 fixed bg-white dark:bg-black border-gray-700 border dark:border-gray-500 shadow-xl"
>
<div onClick={() => setIsTOCOpen(!isTOCOpen)} className="p-3 font-bold">
<div onClick={() => setIsTOCOpen(!isTOCOpen)} className="p-2 font-bold">
{"TOC"}
</div>
</SheetTrigger>
@@ -20,7 +20,7 @@ export const DrawerTOC = (props: { data: TTOCItem[] }) => {
<SheetHeader>
<SheetTitle className="mt-8 font-bold">{"TABLE OF CONTENTS"}</SheetTitle>
</SheetHeader>
<ul className="my-3 flat-scrollbar h-[70vh] flex flex-col overflow-y-auto">
<ul className="my-3 flat-scrollbar h-[70vh] flex flex-col overflow-y-auto flat-scrollbar-normal">
{props.data?.map((item) => (
<Link
className="hover:text-sky-500 border-t border-b py-2 border-dashed"

6
components/readerpage/TOC.tsx
View File

@@ -3,8 +3,10 @@ import Link from "next/link";
export const TOC = (props: { data: TTOCItem[] }) => {
return (
<div className="sticky top-[5em] mx-5 p-2 border-gray-500">
<div className="p-2 font-bold text-center border border-gray-500">{"TABLE OF CONTENTS"}</div>
<div className="sticky top-[5em] mx-5 p-2 border border-black dark:border-gray-400 rounded-sm">
<div className="p-2 font-bold text-center border bg-black text-white dark:text-black dark:bg-gray-100">
{"TABLE OF CONTENTS"}
</div>
<ul className="flat-scrollbar my-1 px-1 h-[60vh] overflow-y-auto">
{props.data?.map((item) => (
<Link className="hover:text-sky-500" href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>