fix: add scroll support for index

openRin · Aug 4, 2024 · f12910d · f12910d
1 parent f6151e8
commit f12910d
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 20 deletions.
diff --git a/client/src/components.css b/client/src/components.css
@@ -1,7 +1,4 @@
 @import "./base.css";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 
 @layer base {
     .border-card {

diff --git a/client/src/components/feed_card.tsx b/client/src/components/feed_card.tsx
@@ -14,7 +14,7 @@ export function FeedCard({ id, title, avatar, draft, listed, top, summary, hasht
     const { t } = useTranslation()
     return useMemo(() => (
         <>
-            <Link href={`/feed/${id}`} target="_blank" className="w-full rounded-2xl bg-w my-2 p-6 duration-300 ani-show bg-button">
+            <Link href={`/feed/${id}`} target="_blank" className="w-full rounded-2xl bg-w my-2 p-6 duration-300 bg-button">
                 {avatar &&
                     <div className="flex flex-row items-center mb-2 rounded-xl overflow-clip">
                         <img src={avatar} alt=""

diff --git a/client/src/components/markdown.tsx b/client/src/components/markdown.tsx
@@ -13,7 +13,6 @@ import { remarkAlert } from "remark-github-blockquote-alert";
 import remarkMath from "remark-math";
 import Lightbox, { SlideImage } from "yet-another-react-lightbox";
 import Counter from "yet-another-react-lightbox/plugins/counter";
-import "yet-another-react-lightbox/plugins/counter.css";
 import Download from "yet-another-react-lightbox/plugins/download";
 import Zoom from "yet-another-react-lightbox/plugins/zoom";
 import "yet-another-react-lightbox/styles.css";

diff --git a/client/src/hooks/useTableOfContents.tsx b/client/src/hooks/useTableOfContents.tsx
@@ -76,13 +76,13 @@ const useTableOfContents = (selector: string) => {
     }
 
     return {
-        TOC: () => (<div>
+        TOC: () => (<div className='rounded-2xl bg-w py-4 px-4 t-primary'>
             <h2 className="text-lg font-bold">{t("index.title")}</h2>
-            <ul>
+            <ul className="max-h-[calc(100vh-10.25rem)] overflow-auto" style={{ scrollbarWidth: "none" }}>
                 {tableOfContents.length === 0 && <li>{t("index.empty.title")}</li>}
                 {tableOfContents.map((item) => (
                     <li
-                        key={item.index}
+                        key={`toc$${item.index}`}
                         className={activeIndex === item.index ? "text-theme" : ""}
                         style={{ marginLeft: item.marginLeft }}
                         onClick={() => {

diff --git a/client/src/index.css b/client/src/index.css
@@ -1,7 +1,5 @@
 @import "./base.css";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+
 /* cantarell-latin-400-normal */
 @font-face {
   font-family: "Cantarell";

diff --git a/client/src/page/feed.tsx b/client/src/page/feed.tsx
@@ -280,7 +280,7 @@ export function FeedPage({ id, TOC, clean }: { id: string, TOC: () => JSX.Elemen
             </main>
             <div className="w-80 hidden lg:block relative">
               <div
-                className={`ml-2 rounded-2xl bg-w py-4 px-4 start-0 end-0 top-[5.5rem] sticky t-primary`}
+                className={`ml-2 start-0 end-0 top-[5.5rem] sticky`}
               >
                 <TOC />
               </div>
@@ -331,7 +331,7 @@ export function TOCHeader({ TOC }: { TOC: () => JSX.Element }) {
         }}
         onRequestClose={() => setIsOpened(false)}
       >
-        <div className="rounded-2xl bg-w py-4 px-4 w-[80vw] sm:w-[60vw] lg:w-[40vw] overflow-clip relative t-primary">
+        <div className="w-[80vw] sm:w-[60vw] lg:w-[40vw] overflow-clip relative t-primary">
           <TOC />
         </div>
       </ReactModal>

diff --git a/client/src/page/feeds.tsx b/client/src/page/feeds.tsx
@@ -98,10 +98,10 @@ export function FeedsPage() {
                         </div>
                     </div>
                     <Waiting for={status === 'idle'}>
-                        <div className="wauto flex flex-col">
-                        {feeds[listState].data.map(({ id, ...feed }: any) => (
-                            <FeedCard key={id} id={id} {...feed} />
-                        ))}
+                        <div className="wauto flex flex-col ani-show">
+                            {feeds[listState].data.map(({ id, ...feed }: any) => (
+                                <FeedCard key={id} id={id} {...feed} />
+                            ))}
                         </div>
                         <div className="wauto flex flex-row items-center mt-4 ani-show">
                             {page > 1 &&

diff --git a/client/src/page/friends.tsx b/client/src/page/friends.tsx
@@ -99,14 +99,14 @@ export function FriendsPage() {
             <meta property="og:url" content={document.URL} />
         </Helmet>
         <Waiting for={friendsAvailable.length !== 0 || friendsUnavailable.length !== 0 || status === "idle"}>
-            <main className="w-full flex flex-col justify-center items-center mb-8 t-primary">
+            <main className="w-full flex flex-col justify-center items-center mb-8 t-primary ani-show">
                 <FriendList title={t('friends.title')} show={friendsAvailable.length > 0} friends={friendsAvailable} />
                 <FriendList title={t('friends.left')} show={friendsUnavailable.length > 0} friends={friendsUnavailable} />
                 <FriendList title={t('friends.review.waiting')} show={waitList.length > 0} friends={waitList} />
                 <FriendList title={t('friends.review.rejected')} show={refusedList.length > 0} friends={refusedList} />
                 <FriendList title={t('friends.my_apply')} show={profile?.permission !== true && apply !== undefined} friends={apply ? [apply] : []} />
                 {profile && (profile.permission || config.get("friend_apply_enable")) &&
-                    <div className="wauto t-primary flex text-start text-2xl font-bold mt-8 ani-show">
+                    <div className="wauto t-primary flex text-start text-2xl font-bold mt-8">
                         <div className="md:basis-1/2 bg-w rounded-xl p-4">
                             <p>
                                 {profile.permission ? t('friends.create') : t('friends.apply')}
@@ -206,7 +206,7 @@ function Friend({ friend }: { friend: FriendItem }) {
     ]
     return (
         <>
-            <a title={friend.name} href={friend.url} target="_blank" className="bg-button w-full bg-w rounded-xl p-4 flex flex-col justify-center items-center relative ani-show">
+            <a title={friend.name} href={friend.url} target="_blank" className="bg-button w-full bg-w rounded-xl p-4 flex flex-col justify-center items-center relative">
                 <div className="w-16 h-16">
                     <img className={"rounded-full " + (friend.health.length > 0 ? "grayscale" : "")} src={friend.avatar} alt={friend.name} />
                 </div>