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

搜索框样式，顶部Sticky样式

Browse Source
This commit is contained in:
tangly
2021-12-05 14:05:15 +08:00
parent 490f05b448
commit ee3dcc6aa7
3 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/SearchInput.js
View File

@@ -37,12 +37,12 @@ const SearchInput = ({ currentTag, currentSearch }) => {
setSearchKey(val) setSearchKey(val)
} }
return <div className='flex border dark:border-gray-600 w-full'> return <div className='flex border dark:border-gray-600 w-full bg-gray-100 dark:bg-gray-900'>
<input <input
ref={searchInputRef} ref={searchInputRef}
type='text' type='text'
placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`} placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
className={'pl-2 transition leading-10 border-gray-300 bg-white text-black bg-gray-100 dark:bg-gray-900 dark:text-white'} className={'w-full pl-2 transition leading-10 border-gray-300 bg-white text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
onKeyUp={handleKeyUp} onKeyUp={handleKeyUp}
onChange={e => updateSearchKey(e.target.value)} onChange={e => updateSearchKey(e.target.value)}
defaultValue={currentSearch} defaultValue={currentSearch}

2
components/StickyBar.js
View File

@@ -8,7 +8,7 @@
const StickyBar = ({ children }) => { const StickyBar = ({ children }) => {
if (!children) return <></> if (!children) return <></>
return ( return (
<div id='sticky-bar' className='fixed lg:top-0 top-16 duration-500 z-10 w-full border-b dark:border-gray-600'> <div id='sticky-bar' className='fixed lg:top-0 top-14 duration-500 z-10 w-full border-b dark:border-gray-600 shadow-xl'>
<div className='bg-white dark:bg-gray-800 flex overflow-x-auto'> <div className='bg-white dark:bg-gray-800 flex overflow-x-auto'>
<div className='z-30 sticky left-0 flex'> <div className='z-30 sticky left-0 flex'>
<div className='pr-2 bg-white dark:bg-gray-800'/> <div className='pr-2 bg-white dark:bg-gray-800'/>

4
layouts/BaseLayout.js
View File

@@ -102,7 +102,7 @@ const handleScrollDown = () => {
nav && nav.classList.replace('top-0', '-top-16') nav && nav.classList.replace('top-0', '-top-16')
const stickyBar = document.querySelector('#sticky-bar') const stickyBar = document.querySelector('#sticky-bar')
stickyBar && stickyBar.classList.replace('top-16', 'top-0') stickyBar && stickyBar.classList.replace('top-14', 'top-0')
const tocDrawerButton = document.querySelector('#toc-drawer-button') const tocDrawerButton = document.querySelector('#toc-drawer-button')
tocDrawerButton && tocDrawerButton.classList.replace('hidden', 'block') tocDrawerButton && tocDrawerButton.classList.replace('hidden', 'block')
@@ -124,7 +124,7 @@ const handleScrollUp = () => {
nav && nav.classList.replace('-top-16', 'top-0') nav && nav.classList.replace('-top-16', 'top-0')
const stickyBar = document.querySelector('#sticky-bar') const stickyBar = document.querySelector('#sticky-bar')
stickyBar && stickyBar.classList.replace('top-0', 'top-16') stickyBar && stickyBar.classList.replace('top-0', 'top-14')
// const tocDrawerButton = document.querySelector('#toc-drawer-button') // const tocDrawerButton = document.querySelector('#toc-drawer-button')
// tocDrawerButton && tocDrawerButton.classList.replace('block', 'hidden') // tocDrawerButton && tocDrawerButton.classList.replace('block', 'hidden')