d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

bugfix:

Browse Source 
StickyBar宽度
This commit is contained in:
tangly1024
2021-12-20 16:53:37 +08:00
parent 44df05243c
commit c883bbac43
3 changed files with 7 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/StickyBar.js
View File

@@ -8,19 +8,11 @@
const StickyBar = ({ children }) => {
if (!children) return <></>
return (
<div id='sticky-bar' className='sticky flex justify-center top-14 md:top-0 duration-500 z-10 w-full'>
<div className='bg-white dark:bg-gray-800 dark:border-gray-600 w-full px-5 rounded-none md:rounded-xl shadow-xl border overflow-x-auto'>
<div className="flex">
<div className='z-30 absolute h-12 left-0 flex'>
<div className='pr-6 md:ml-5 -line-x-opacity'/>
</div>
<div id='tag-container' className="md:pl-3 max-w-xs md:max-w-lg xl:max-w-2xl 2xl:max-w-5xl 3xl:max-w-6xl">
<div id='sticky-bar' className='sticky flex-grow justify-center top-14 md:top-0 duration-500 z-10 pb-16'>
<div className='bg-white dark:bg-gray-800 dark:border-gray-600 px-5 absolute rounded-none md:rounded-xl shadow-xl border w-full hidden-scroll'>
<div id='tag-container' className="md:pl-3 overflow-x-auto">
{ children }
</div>
<div className='z-30 absolute h-12 right-0 flex'>
<div className='pl-5 md:mr-5 line-x-opacity'/>
</div>
</div>
</div>
</div>
)

2
components/TagList.js
View File

@@ -14,7 +14,7 @@ const TagList = ({ tags, currentTag }) => {
if (!tags) {
return <></>
}
return <ul className='flex py-1 space-x-3 overflow-x-scroll w-full'>
return <ul className='flex py-1 space-x-3'>
<li className='w-20 py-2 dark:text-gray-200 whitespace-nowrap'><FontAwesomeIcon icon={faTags} className='mr-2'/>标签:</li>
{tags.map(tag => {
const selected = tag.name === currentTag

4
pages/tag/[tag].js
View File

@@ -13,9 +13,11 @@ export default function Tag ({ tags, allPosts, filteredPosts, tag, categories })
type: 'website'
}
// 将当前选中的标签置顶🔝
const newTags = [tags.find(r => r.name === tag)].concat(tags.filter(r => r.name !== tag))
return <BaseLayout meta={meta} tags={tags} currentTag={tag} categories={categories} totalPosts={allPosts}>
<StickyBar>
<TagList tags={tags} currentTag={tag}/>
<TagList tags={newTags} currentTag={tag}/>
</StickyBar>
<div className='md:mt-8'>
<BlogPostListScroll posts={filteredPosts} tags={tags} currentTag={tag}/>