mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-15 23:16:48 +00:00
fix:
博客列表顶部边距; 悬浮百分比负数异常; 标签文字不换行; 背景色不当;
This commit is contained in:
@@ -51,7 +51,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
|
||||
if (!postsToShow || postsToShow.length === 0) {
|
||||
return <BlogPostListEmpty currentSearch={currentSearch}/>
|
||||
} else {
|
||||
return <div id='post-list-wrapper' className='mt-20 mx-2 md:mx-20' ref={targetRef}>
|
||||
return <div id='post-list-wrapper' className='mt-20 mx-2 pt-10 md:mx-20' ref={targetRef}>
|
||||
|
||||
{currentCategory && (
|
||||
<div className='w-full p-1 bg-gray-100 dark:bg-gray-700'>
|
||||
|
||||
@@ -18,12 +18,14 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
|
||||
const clientHeight = targetRef ? (targetRef.current ? targetRef.current.clientHeight : 0) : 0
|
||||
const scrollY = window.pageYOffset
|
||||
const fullHeight = clientHeight - window.outerHeight
|
||||
const shouldShow = scrollY > 100
|
||||
let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
|
||||
if (per > 100) per = 100
|
||||
const shouldShow = scrollY > 100 && per > 0
|
||||
|
||||
|
||||
if (shouldShow !== show) {
|
||||
switchShow(shouldShow)
|
||||
}
|
||||
let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
|
||||
if (per > 100) per = 100
|
||||
changePercent(per)
|
||||
}
|
||||
useEffect(() => {
|
||||
|
||||
@@ -4,7 +4,7 @@ const TagItem = ({ tag }) => (
|
||||
<Link href={`/tag/${encodeURIComponent(tag)}`}>
|
||||
<div className="cursor-pointer hover:shadow hover:border-gray-600 rounded-md dark:border-gray-500 border hover:scale-105 hover:bg-gray-500 bg-gray-100 hover:text-white duration-200 mr-1 p-2 leading-none text-sm
|
||||
dark:bg-gray-500 dark:text-gray-100 dark:hover:bg-black">
|
||||
<div> <i className='fa fa-tag mr-1 '/> {tag}</div>
|
||||
<div className='whitespace-nowrap'> <i className='fa fa-tag mr-1 '/> {tag}</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
|
||||
@@ -50,9 +50,9 @@ const Toc = ({ toc }) => {
|
||||
setActiveSection(currentSectionId)
|
||||
}, throttleMs))
|
||||
|
||||
return <div className='dark:bg-gray-600 min-h-screen'>
|
||||
return <div className='dark:bg-gray-800 min-h-screen'>
|
||||
<div
|
||||
className=' dark:border-gray-600 border-b text-2xl bg-white font-bold text-black dark:bg-gray-900 dark:text-white py-6 px-6'>
|
||||
className='dark:border-gray-600 border-b text-2xl bg-white font-bold text-black dark:bg-gray-900 dark:text-white py-6 px-6'>
|
||||
文章目录
|
||||
</div>
|
||||
<nav className='text-gray-500 dark:text-gray-400 underline overflow-y-auto scroll-hidden p-2'>
|
||||
|
||||
@@ -62,12 +62,12 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
|
||||
{post.title}
|
||||
</h1>
|
||||
|
||||
<h2 className='text-gray-500 my-5 dark:text-gray-400 animate__animated animate__fadeIn'>
|
||||
<h2 className='text-gray-500 text-xs my-5 dark:text-gray-400 animate__animated animate__fadeIn'>
|
||||
{post.summary}
|
||||
</h2>
|
||||
|
||||
{/* 文章作者等关联信息 */}
|
||||
<div className='justify-between flex flex-wrap bg-gray-50 p-2 dark:bg-gray-800 dark:text-white'>
|
||||
<div className='justify-between flex flex-wrap bg-gray-100 p-2 dark:bg-gray-900 dark:text-white'>
|
||||
<div className='flex-nowrap flex'>
|
||||
<div className='py-2 opacity-50'>
|
||||
发表于:
|
||||
@@ -136,8 +136,8 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
|
||||
<section className='md:flex md:justify-between'>
|
||||
|
||||
{post.tags && (
|
||||
<div className='flex flex-nowrap leading-8 p-1 py-4'>
|
||||
<div className='hidden md:block dark:text-gray-300'>标签:</div>
|
||||
<div className='flex flex-nowrap leading-8 p-1 py-4 overflow-x-auto'>
|
||||
<div className='hidden md:block dark:text-gray-300'>标签:</div>
|
||||
{post.tags.map(tag => (
|
||||
<TagItem key={tag} tag={tag} />
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user