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

搜索框样式，顶部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)
}
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
ref={searchInputRef}
type='text'
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}
onChange={e => updateSearchKey(e.target.value)}
defaultValue={currentSearch}

2
components/StickyBar.js
View File

@@ -8,7 +8,7 @@
const StickyBar = ({ children }) => {
if (!children) 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='z-30 sticky left-0 flex'>
<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')
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')
tocDrawerButton && tocDrawerButton.classList.replace('hidden', 'block')
@@ -124,7 +124,7 @@ const handleScrollUp = () => {
nav && nav.classList.replace('-top-16', 'top-0')
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')
// tocDrawerButton && tocDrawerButton.classList.replace('block', 'hidden')