d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-13 15:09:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

animation-loading

Browse Source
This commit is contained in:
tangly1024.com
2023-06-10 10:55:57 +08:00
parent af214a32d2
commit 4f74836d02
4 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/Loading.js
View File

@@ -1,11 +1,13 @@
/**
* 异步文件加载过程中的占位符
* 异步文件加载时的占位符
* @returns
*/
const Loading = (props) => {
return <div id="loading-bg" className="-z-10 w-screen h-screen flex justify-center items-center fixed left-0 top-0">
<i className='fas fa-spinner animate-spin text-3xl' />
return <div id="loading-container" className="-z-10 w-screen h-screen flex justify-center items-center fixed left-0 top-0">
<div id="loading-wrapper">
<div className="loading"> <i className="fas fa-spinner animate-spin text-3xl "/></div>
</div>
</div>
}
export default Loading

4
themes/fukasawa/LayoutBase.js
View File

@@ -43,8 +43,8 @@ const LayoutBase = (props) => {
<div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex'}>
<AsideLeft {...props} slot={leftAreaSlot}/>
<main id='wrapper' className='relative flex w-full py-8 justify-center z-10'>
<div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative'>
<main id='wrapper' className='relative flex w-full py-8 justify-center bg-day dark:bg-night'>
<div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative z-10'>
<div> {headerSlot} </div>
<div> {onLoading ? LoadingCover : children} </div>
</div>

2
themes/fukasawa/components/MenuItemDrop.js
View File

@@ -22,7 +22,7 @@ export const MenuItemDrop = ({ link }) => {
</div>}
{/* 子菜单 */}
{hasSubMenu && <ul className={`${show ? 'visible opacity-100 left-52' : 'invisible opacity-0 left-40'} py-1 absolute right-0 top-0 w-full border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
{hasSubMenu && <ul className={`${show ? 'visible opacity-100 left-52' : 'invisible opacity-0 left-40'} z-20 py-1 absolute right-0 top-0 w-full border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
{link?.subMenus?.map(sLink => {
return <li key={sLink.id}>
<Link href={sLink.to} className='my-auto py-1 px-2 items-center justify-start flex text-gray-500 dark:text-gray-300 hover:text-black hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 '>

4
themes/fukasawa/components/MenuList.js
View File

@@ -30,10 +30,10 @@ export const MenuList = (props) => {
}
return (<>
<nav id='nav-pc' className='hidden md:block font-sans text-sm z-20'>
<nav id='nav-pc' className='hidden md:block font-sans text-sm z-10'>
{links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
</nav>
<nav id='nav-mobile' className='block md:hidden font-sans text-sm z-20 pb-1'>
<nav id='nav-mobile' className='block md:hidden font-sans text-sm z-10 pb-1'>
{links?.map(link => <MenuItemCollapse key={link?.id} link={link} onHeightChange={props.onHeightChange}/>)}
</nav>
</>