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

feature:

Browse Source 
排班优化，按钮缩小
This commit is contained in:
tangly1024
2021-12-17 14:09:19 +08:00
parent 9c38dae8aa
commit 8ea86d3976
11 changed files with 27 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/ArticleDetail.js
View File

@@ -44,7 +44,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
<>
<Progress targetRef={targetRef} />
<div id="article-wrapper" ref={targetRef} className="flex-grow">
<div id="article-wrapper" ref={targetRef} className="flex-grow mt-14 md:mt-0">
<div className="max-w-5xl mx-auto w-screen md:w-full ">
<article
itemScope

2
components/CategoryGroup.js
View File

@@ -5,7 +5,7 @@ import React from 'react'
const CategoryGroup = ({ currentCategory, categories }) => {
return <>
<div id='category-list' className='dark:border-gray-600 dark:bg-gray-800 flex flex-wrap'>
<div id='category-list' className='dark:border-gray-600 flex flex-wrap'>
{Object.keys(categories).map(category => {
const selected = currentCategory === category
return <Link key={category} href={`/category/${category}`} passHref>

4
components/DarkModeButton.js
View File

@@ -11,8 +11,8 @@ const DarkModeButton = () => {
saveTheme(newTheme)
changeTheme(newTheme)
}
return <div className='z-10 duration-200 text-lg cursor-pointer'>
<FontAwesomeIcon icon={userTheme === 'dark' ? faSun : faMoon} id='darkModeButton' className='mx-2 my-2 hover:scale-125 transform duration-200'
return <div className='z-10 duration-200 text-xs cursor-pointer py-1.5 px-1'>
<FontAwesomeIcon icon={userTheme === 'dark' ? faSun : faMoon} id='darkModeButton' className='hover:scale-125 transform duration-200'
onClick={handleChangeDarkMode} />
</div>
}

3
components/FloatDarkModeButton.js
View File

@@ -6,7 +6,8 @@ export default function FloatDarkModeButton () {
const [show, switchShow] = useState(false)
const scrollListener = () => {
const scrollY = window.pageYOffset
const shouldShow = scrollY > 100 && scrollY < windowTop
// const shouldShow = scrollY > 100 && scrollY < windowTop
const shouldShow = scrollY > 100
windowTop = scrollY
if (shouldShow !== show) {
switchShow(shouldShow)

9
components/JumpToTopButton.js
View File

@@ -25,7 +25,8 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
const fullHeight = clientHeight - window.outerHeight
let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
if (per > 100) per = 100
const shouldShow = scrollY > 100 && per > 0 && scrollY < windowTop
// const shouldShow = scrollY > 100 && per > 0 && scrollY < windowTop
const shouldShow = scrollY > 100 && per > 0
windowTop = scrollY
if (shouldShow !== show) {
@@ -39,11 +40,11 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
return () => document.removeEventListener('scroll', scrollListener)
}, [show])
return (<div id='jump-to-top' className='right-5 fixed flex bottom-52 duration-500 z-20'>
return (<div id='jump-to-top' className='right-5 fixed flex bottom-48 duration-500 z-20'>
<div onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
className={(show ? '' : 'hidden') + ' animate__fadeInRight animate__animated animate__faster shadow-card rounded-full glassmorphism p-2 cursor-pointer '}>
className={(show ? '' : 'hidden') + ' animate__fadeInRight animate__animated animate__faster shadow-card rounded-full glassmorphism py-1 cursor-pointer '}>
<div className='text-center'>
<div className='w-10 dark:text-gray-200 transform hover:scale-125 duration-200' title={locale.POST.TOP} >
<div className='w-10 dark:text-gray-200 transform hover:scale-125 duration-200 text-xs' title={locale.POST.TOP} >
<FontAwesomeIcon icon={faArrowUp} />
</div>
{showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}

4
components/SideArea.js
View File

@@ -86,8 +86,8 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat
</div>
{post && (
<section id='left-toc' className='sticky pb-20 top-0 pt-2 rounded-xl shadow-lg bg-white dark:bg-gray-800'>
<div className='border-b text-2xl bg-white text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
<section id='left-toc' className='sticky pb-20 top-6 rounded-xl shadow-lg bg-white dark:bg-gray-800'>
<div className='border-b text-2xl bg-white text-black rounded-t-xl dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
{locale.COMMON.TABLE_OF_CONTENTS}
</div>
<Toc toc={post.toc} />

45
components/SideAreaDrawer.js
View File

@@ -1,45 +0,0 @@
import React, { useImperativeHandle, useState } from 'react'
import SideArea from './SideArea'
/**
* 侧边栏抽屉面板，可以从侧面拉出
* @returns {JSX.Element}
* @constructor
*/
const SideAreaDrawer = ({ post, currentTag, cRef, tags, posts, categories, currentCategory }) => {
// 暴露给父组件 通过cRef.current.handleMenuClick 调用
useImperativeHandle(cRef, () => {
return {
handleSwitchSideDrawerVisible: () => switchSideDrawerVisible()
}
})
const [isShow, changeHiddenStatus] = useState(false)
// 点击按钮更改侧边抽屉状态
const switchSideDrawerVisible = () => {
const showStatus = !isShow
changeHiddenStatus(showStatus)
if (window) {
const sideBarDrawer = window.document.getElementById('sidebar-drawer')
const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
if (showStatus) {
sideBarDrawer.classList.replace('-ml-72', 'ml-2')
sideBarDrawerBackground.classList.replace('hidden', 'block')
} else {
sideBarDrawer.classList.replace('ml-2', '-ml-72')
sideBarDrawerBackground.classList.replace('block', 'hidden')
}
}
}
return <>
<div id='sidebar-drawer' className='-ml-72 flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-50'>
<SideArea tags={tags} post={post} posts={posts} categories={categories} currentCategory={currentCategory} />
</div>
{/* 背景蒙版 */}
<div id='sidebar-drawer-background'
className='hidden fixed top-0 left-0 z-30 w-full h-full bg-black bg-opacity-30'
onClick={switchSideDrawerVisible} />
</>
}
export default SideAreaDrawer

4
components/SideBar.js
View File

@@ -25,7 +25,7 @@ import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/fr
*/
const SideBar = ({ title, tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => {
const { locale } = useGlobal()
return <aside id='sidebar' className='pt-5 bg-white dark:bg-gray-900 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
return <aside id='sidebar' className='pt-5 bg-white dark:bg-gray-900 w-80 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
<section className='hidden lg:block'>
<InfoCard />
@@ -86,7 +86,7 @@ const SideBar = ({ title, tags, currentTag, post, posts, categories, currentCate
</div>
{post && (
<section id='left-toc' className='sticky pb-20 top-0 bg-white dark:bg-gray-900'>
<section id='left-toc' className='sticky pb-20 top-0 bg-white dark:bg-gray-900 hidden md:block'>
<div className='border-b text-2xl bg-white text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
{locale.COMMON.TABLE_OF_CONTENTS}
</div>

6
components/SideBarDrawer.js
View File

@@ -23,16 +23,16 @@ const SideBarDrawer = ({ post, currentTag, cRef, tags, posts, categories, curren
const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
if (showStatus) {
sideBarDrawer.classList.replace('-ml-72', 'ml-0')
sideBarDrawer.classList.replace('-ml-80', 'ml-0')
sideBarDrawerBackground.classList.replace('hidden', 'block')
} else {
sideBarDrawer.classList.replace('ml-0', '-ml-72')
sideBarDrawer.classList.replace('ml-0', '-ml-80')
sideBarDrawerBackground.classList.replace('block', 'hidden')
}
}
}
return <>
<div id='sidebar-drawer' className='-ml-72 flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-50'>
<div id='sidebar-drawer' className='-ml-80 bg-white dark:bg-gray-900 flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-50'>
<SideBar tags={tags} post={post} posts={posts} categories={categories} currentCategory={currentCategory} />
</div>
{/* 背景蒙版 */}

11
components/TocDrawerButton.js
View File

@@ -16,7 +16,8 @@ const TocDrawerButton = (props) => {
const [show, switchShow] = useState(false)
const scrollListener = () => {
const scrollY = window.pageYOffset
const shouldShow = scrollY > 100 && scrollY < windowTop
// const shouldShow = scrollY > 100 && scrollY < windowTop
const shouldShow = scrollY > 100
windowTop = scrollY
if (shouldShow !== show) {
@@ -29,10 +30,10 @@ const TocDrawerButton = (props) => {
})
return (
<div id='toc-drawer-button' className='right-5 fixed bottom-72 duration-500 z-40' onClick={props.onClick}>
<div className={(show ? 'animate__fadeInRight' : 'hidden') + ' px-2 py-4 animate__animated glassmorphism rounded-full cursor-pointer shadow-card' }>
<div className='w-10 dark:text-gray-200 text-center transform hover:scale-125 duration-200' title={locale.POST.TOP} >
<div className='w-10 text-md' title={locale.COMMON.TABLE_OF_CONTENTS} ><FontAwesomeIcon icon={faListOl} /> </div>
<div id='toc-drawer-button' className='right-5 fixed bottom-60 duration-500 z-40' onClick={props.onClick}>
<div className={(show ? 'animate__fadeInRight' : 'hidden') + ' py-3 px-3.5 animate__animated glassmorphism rounded-full cursor-pointer shadow-card' }>
<div className='dark:text-gray-200 text-center transform hover:scale-125 duration-200 text-xs' title={locale.POST.TOP} >
<FontAwesomeIcon icon={faListOl} />
</div>
</div>
</div>

7
components/TopNav.js
View File

@@ -1,11 +1,11 @@
import { useRef } from 'react'
import SideBarDrawer from '@/components/SideBarDrawer'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBars } from '@fortawesome/free-solid-svg-icons'
import BLOG from '@/blog.config'
import Link from 'next/link'
import Image from 'next/image'
import { useGlobal } from '@/lib/global'
import { faSearch } from '@fortawesome/free-solid-svg-icons'
const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory }) => {
const drawer = useRef()
@@ -46,9 +46,8 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory })
<a>{locale.NAV.ABOUT}</a>
</Link>
<div onClick={() => { drawer.current.handleSwitchSideDrawerVisible() }}
className='ppb-1z-30 text-gray-600 text-2xl flex items-center cursor-pointer dark:text-gray-300'>
<FontAwesomeIcon icon={faBars} className='hover:scale-125 transform duration-200'
/>
className='cursor-pointer dark:text-gray-300'>
{locale.NAV.SEARCH}
</div>
</div>
</div>