fix: chrome scroll behavior

Signed-off-by: Innei <tukon479@gmail.com>
mx-space · Apr 7, 2023 · 2d87e2d · 2d87e2d
1 parent 44b5f7a
commit 2d87e2d
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 12 deletions.
diff --git a/src/assets/styles/extra.css b/src/assets/styles/extra.css
@@ -138,7 +138,6 @@ ph {
       width: 3em;
       height: 3em;
       right: 0;
-      bottom: 0;
       content: '';
     }
 
@@ -155,6 +154,7 @@ ph {
         transparent 50%,
         var(--gray-6) 0
       );
+      transform: translateY(-12px);
       border-left: 1px solid var(--gray-5);
       border-top: 1px solid var(--gray-5);
       border-top-left-radius: 3px;

diff --git a/src/components/widgets/Subscribe/hooks.tsx b/src/components/widgets/Subscribe/hooks.tsx
@@ -13,7 +13,7 @@ const SWR_CHECK_SUBSCRIBE_KEY = 'subscribe-status'
 
 export const useSubscribeStatus = () => {
   return useSWR(SWR_CHECK_SUBSCRIBE_KEY, apiClient.subscribe.check, {
-    refreshInterval: 10e8,
+    refreshInterval: 60_000 * 10,
   })
 }
 

diff --git a/src/components/widgets/xLogInfo/index.tsx b/src/components/widgets/xLogInfo/index.tsx
@@ -1,5 +1,5 @@
 import { clsx } from 'clsx'
-import type { FC } from 'react'
+import type { FC, SVGProps } from 'react'
 import { useState } from 'react'
 import { Collapse } from 'react-collapse'
 
@@ -32,7 +32,7 @@ export const XLogInfoForNote: FC<{
 export const XLogInfoBase: FC<{
   meta?: XLogMeta
 }> = ({ meta }) => {
-  const [collapse, setCollapse] = useState(true)
+  const [collapse, setCollapse] = useState(false)
 
   if (!meta) return null
 
@@ -96,14 +96,22 @@ export const XLogInfoBase: FC<{
       <div
         role="button"
         tabIndex={0}
-        className="flex w-full justify-between items-center rounded-lg p-2 text-left text-gray-900 hover:bg-zinc-100 transition-colors duration-300 transition md:rounded-xl"
+        className="flex w-[100%+0.5rem] justify-between items-center rounded-lg -mx-2 p-2 text-left text-gray-900 hover:bg-zinc-100 dark:hover:bg-dark-200 transition-colors duration-300 transition md:rounded-xl"
         onClick={() => {
           setCollapse((c) => !c)
         }}
       >
-        <div className="flex items-center space-x-2">
-          <SafeIcon />
-          <span>此文章已经由它的创作者签名并安全地存储在区块链上。</span>
+        <div className="flex items-center justify-between w-full">
+          <span className="flex-grow flex space-x-2">
+            <SafeIcon />
+            <span>此文章已经由它的创作者签名并安全地存储在区块链上。</span>
+          </span>
+          <IcRoundKeyboardArrowDown
+            className={clsx(
+              !collapse ? '' : 'rotate-180',
+              'transition-transform transform ease-linear duration-200 text-lg',
+            )}
+          />
         </div>
       </div>
       <Collapse isOpened={collapse}>
@@ -128,3 +136,20 @@ const SafeIcon = () => (
     />
   </svg>
 )
+
+const IcRoundKeyboardArrowDown = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M8.12 9.29L12 13.17l3.88-3.88a.996.996 0 1 1 1.41 1.41l-4.59 4.59a.996.996 0 0 1-1.41 0L6.7 10.7a.996.996 0 0 1 0-1.41c.39-.38 1.03-.39 1.42 0z"
+      />
+    </svg>
+  )
+}
diff --git a/src/components/widgets/xLogSummary/index.tsx b/src/components/widgets/xLogSummary/index.tsx
@@ -23,11 +23,10 @@ export const XLogSummary: FC<{
       })
     },
     {
-      revalidateOnReconnect: false,
       revalidateOnFocus: false,
       errorRetryCount: 3,
       errorRetryInterval: 1000,
-      dedupingInterval: 0,
+      refreshInterval: 0,
     },
   )
 

diff --git a/src/pages/notes/[id].tsx b/src/pages/notes/[id].tsx
@@ -213,7 +213,6 @@ const NoteView: React.FC<{ id: string }> = memo((props) => {
           },
         },
       })}
-
       <NoteLayout title={title} date={note.created} tips={tips} id={note.id}>
         {isSecret && !isLogged ? (
           <p className="text-center my-8">
@@ -238,9 +237,9 @@ const NoteView: React.FC<{ id: string }> = memo((props) => {
         )}
         <div className="pb-8" />
         {note.topic && <NoteTopic noteId={props.id} topic={note.topic} />}
+
         <NoteFooterNavigationBarForMobile id={props.id} />
         <div className="pb-4" />
-
         <SubscribeBell defaultType={'note_c'} />
         <XLogInfoForNote id={props.id} />
         <NoteFooterActionBar id={props.id} />