input outline

This commit is contained in:
tangly1024.com
2023-03-09 14:00:57 +08:00
parent 6ec9dd97aa
commit 883e2cd7a1
25 changed files with 118 additions and 64 deletions

View File

@@ -26,7 +26,7 @@ export const ArticleLock = props => {
<div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex mx-4'>
<input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
<input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
<div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
<i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>
</div>

View File

@@ -62,7 +62,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
ref={searchInputRef}
type='text'
placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
className={'w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput}
onCompositionUpdate={lockSearchInput}

View File

@@ -30,7 +30,7 @@ export const ArticleLock = props => {
<div className="flex mx-4">
<input
id="password" type='password'
className="w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500"
className="outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500"
></input>
<div
onClick={submitPassword}

View File

@@ -53,7 +53,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
<input
ref={searchInputRef}
type='text'
className={'w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
className={'outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput}
onCompositionUpdate={lockSearchInput}

View File

@@ -25,7 +25,7 @@ export const ArticleLock = props => {
<div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex mx-4'>
<input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
<input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
<div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300" >
<i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
</div>

View File

@@ -69,7 +69,7 @@ const SearchInput = props => {
ref={searchInputRef}
type="text"
className={
'w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'
'outline-none w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'
}
onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput}

View File

@@ -25,7 +25,7 @@ export const ArticleLock = props => {
<div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex mx-4'>
<input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
<input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
<div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300" >
<i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
</div>

View File

@@ -69,7 +69,7 @@ const SearchInput = props => {
ref={searchInputRef}
type="text"
className={
'w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'
'outline-none w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'
}
onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput}

View File

@@ -26,7 +26,7 @@ export const ArticleLock = props => {
<div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex mx-4'>
<input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
<input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
<div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-green-500 hover:bg-green-400 text-white rounded-r duration-300" >
<i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
</div>

View File

@@ -61,7 +61,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
<input
ref={searchInputRef}
type='text'
className={'w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
className={'outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput}
onCompositionUpdate={lockSearchInput}

View File

@@ -30,7 +30,7 @@ export const ArticleLock = props => {
<div className="flex mx-4">
<input
id="password" type='password'
className="w-full text-sm pl-5 transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500"
className="outline-none w-full text-sm pl-5 transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500"
></input>
<div
onClick={submitPassword}

View File

@@ -66,7 +66,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
ref={searchInputRef}
type='text'
placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
className={'w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput}
onCompositionUpdate={lockSearchInput}

View File

@@ -25,7 +25,7 @@ export const LayoutTag = props => {
placeholder={
currentTag ? `Search in #${currentTag}` : 'Search Articles'
}
className="block w-full border px-4 py-2 border-black bg-white text-black dark:bg-night dark:border-white dark:text-white"
className="outline-none block w-full border px-4 py-2 border-black bg-white text-black dark:bg-night dark:border-white dark:text-white"
onChange={e => setSearchValue(e.target.value)}
/>
<svg

View File

@@ -26,7 +26,7 @@ export const ArticleLock = props => {
<div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex'>
<input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
<input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
<div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
<i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>
</div>

View File

@@ -62,7 +62,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
ref={searchInputRef}
type='text'
placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
className={'w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput}
onCompositionUpdate={lockSearchInput}

View File

@@ -1,7 +1,7 @@
import CommonHead from '@/components/CommonHead'
import React from 'react'
import { Header } from './components/Header'
import { Nav } from './components/Nav'
import { NavBar } from './components/NavBar'
import { Footer } from './components/Footer'
// import { Title } from './components/Title'
import { SideBar } from './components/SideBar'
@@ -30,17 +30,17 @@ const LayoutBase = props => {
{/* 顶部LOGO */}
<Header {...props} />
{/* 菜单 */}
<Nav {...props} />
{/* 导航栏 */}
<NavBar {...props} />
{/* 主体 */}
<div id='container-inner' className="w-full relative z-10">
<div id='container-wrap' className="w-full relative">
{/* <Title {...props} /> */}
<div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full relative container mx-auto justify-start md:flex items-start pt-12 px-2'}>
<div id='container-inner' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' max-w-9/10 w-full relative container mx-auto flex justify-center items-start pt-12'}>
<div className='w-full max-w-6xl'>{children}</div>
<div className='w-full flex-grow'>{children}</div>
<SideBar {...props} />
@@ -48,7 +48,7 @@ const LayoutBase = props => {
</div>
<div className='fixed right-4 bottom-4 z-10'>
<div className='fixed right-4 bottom-4'>
<JumpToTopButton />
</div>

View File

@@ -26,7 +26,7 @@ export const ArticleLock = props => {
<div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex mx-4'>
<input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
<input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
<div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
<i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>
</div>

View File

@@ -5,23 +5,26 @@ export const DropMenu = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
return <div className='pt-3' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
<Link
href={link?.to}
className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
{link?.name}
{hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
</Link>
return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
{/* 大屏菜单 */}
<Link
href={link?.to}
className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
{link?.name}
{hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
</Link>
{/* 子菜单 */}
{hasSubMenu && <ul className={`${show ? 'visible opacity-100' : 'invisible opacity-0'} border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 top-12 absolute block border drop-shadow-lg `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className=' text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6 pl-2'>
<Link href={sLink.to}>
<span className='text-xs'>{sLink.title}</span>
</Link>
</li>
})}
</ul>}
{/* 子菜单 */}
{hasSubMenu && <ul className={`${show ? 'visible opacity-100' : 'invisible opacity-0'} border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 top-12 absolute block border drop-shadow-lg `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className=' text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6 pl-2'>
<Link href={sLink.to}>
<span className='text-xs'>{sLink.title}</span>
</Link>
</li>
})}
</ul>}
</div>
}

View File

@@ -1,5 +1,6 @@
import BLOG from '@/blog.config'
import Link from 'next/link'
import CONFIG_SIMPLE from '../config_simple'
// import CONFIG_SIMPLE from '../config_simple'
/**
@@ -19,12 +20,12 @@ export const Header = (props) => {
<div className='flex space-x-12'>
<div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR} />
<img src={siteInfo?.icon} className='rounded-full' width={160} alt={BLOG.AUTHOR} />
</div>
<div>
<div className='text-2xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div>
<div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200 text-center'>{BLOG.BIO}</div>
<div className='text-3xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div>
<div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200 text-center' dangerouslySetInnerHTML={{ __html: CONFIG_SIMPLE.LOGO_DESCRIPTION }}/>
</div>
</div>
</Link>

View File

@@ -3,14 +3,15 @@ import { useGlobal } from '@/lib/global'
import { useRouter } from 'next/router'
import { useState } from 'react'
import CONFIG_SIMPLE from '../config_simple'
import { DropMenu } from './DropMenu'
import { NavBarMenu } from './NavBarMenu'
/**
* 菜单导航
* @param {*} props
* @returns
*/
export const Nav = ({ customNav, customMenu }) => {
export const NavBar = (props) => {
const { customNav, customMenu } = props
const { locale } = useGlobal()
const [showSearchInput, changeShowSearchInput] = useState(false)
const router = useRouter()
@@ -47,23 +48,17 @@ export const Nav = ({ customNav, customMenu }) => {
}
return (
<nav className="w-full bg-white md:pt-0 px-6 relative z-20 shadow-md border-t border-gray-100 dark:border-hexo-black-gray dark:bg-black">
<div className="container mx-auto max-w-8xl md:flex justify-between items-center text-sm md:text-md md:justify-start">
<div className="w-full h-12 text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start space-x-4">
{showSearchInput && <input id="theme-simple-search" onKeyUp={onKeyUp} className='h-full px-4 w-full' aria-label="Submit search" type="search" name="s" autoComplete="off" placeholder="Type then hit enter to search..."/>}
{!showSearchInput && links?.map(link => {
if (link?.show) {
return <DropMenu key={link.id} link={link}/>
} else {
return null
}
})}
<nav className="w-full bg-white md:pt-0 relative z-20 shadow border-t border-gray-100 dark:border-hexo-black-gray dark:bg-black">
<div id="nav-bar-inner" className="h-12 mx-auto max-w-9/10 justify-between items-center text-sm md:text-md md:justify-start">
{/* 左侧菜单 */}
<div className="h-full w-full float-left text-center md:text-left flex flex-wrap items-stretch md:justify-start md:items-start space-x-4">
{showSearchInput && <input id="theme-simple-search" onKeyUp={onKeyUp} className='float-left w-full outline-none h-full px-4' aria-label="Submit search" type="search" name="s" autoComplete="off" placeholder="Type then hit enter to search..." />}
{!showSearchInput && (<NavBarMenu {...props}/>)}
</div>
<div className="w-full md:w-1/3 text-center md:text-right hidden md:block">
<div className="absolute right-12 h-full text-center px-2 flex items-center">
{/* <!-- extra links --> */}
<i className={showSearchInput ? 'fa-regular fa-circle-xmark' : 'fa-solid fa-magnifying-glass ' + ' cursor-pointer'} onClick={toggleShowSearchInput}></i>
<i className={showSearchInput ? 'fa-regular fa-circle-xmark' : 'fa-solid fa-magnifying-glass' + ' align-middle cursor-pointer'} onClick={toggleShowSearchInput}></i>
</div>
</div>
</nav>

View File

@@ -0,0 +1,51 @@
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import CONFIG_SIMPLE from '../config_simple'
import { DropMenu } from './DropMenu'
/**
* 菜单导航
* @param {*} props
* @returns
*/
export const NavBarMenu = ({ customNav, customMenu }) => {
const { locale } = useGlobal()
let links = [
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_SIMPLE.MENU_SEARCH },
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_SIMPLE.MENU_ARCHIVE },
{ icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_SIMPLE.MENU_CATEGORY },
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_SIMPLE.MENU_TAG }
]
if (customNav) {
links = links.concat(customNav)
}
if (BLOG.CUSTOM_MENU) {
links = customMenu
}
if (!links || links.length === 0) {
return null
}
return (<>
<div id='nav-menu-pc' className='hidden md:flex my-auto'>
{links?.map(link => {
if (link?.show) {
return <DropMenu key={link.id} link={link} />
} else {
return null
}
})}
</div>
<div id='nav-menu-mobile' className='flex md:hidden my-auto justify-start'>
<div className='cursor-pointer hover:text-red-400 transition-all duration-200'>
<i className='fa fa-bars mr-3'/>
<span>MENU</span>
</div>
</div>
</>
)
}

View File

@@ -4,7 +4,7 @@ import Announcement from './Announcement'
export const SideBar = (props) => {
const { notice } = props
return (
<div className="w-full max-w-lg sticky top-8 border-l dark:border-gray-800 pl-12 border-gray-100">
<div className="hidden lg:block flex-none max-w-md sticky top-8 border-l dark:border-gray-800 pl-12 border-gray-100">
<aside>
<Announcement post={notice}/>

View File

@@ -6,8 +6,10 @@ import CONFIG_SIMPLE from '../config_simple'
*/
export const TopBar = (props) => {
if (CONFIG_SIMPLE.TOP_BAR_CONTENT) {
return <header className="w-full flex justify-between items-center px-20 h-10 bg-black dark:bg-hexo-black-gray z-10">
<div className='text-xs text-white z-50' dangerouslySetInnerHTML={{ __html: CONFIG_SIMPLE.TOP_BAR_CONTENT }}/>
return <header className="flex justify-center items-center bg-black dark:bg-hexo-black-gray">
<div id='top-bar-inner' className='max-w-9/10 w-full'>
<div className='text-xs text-center float-left text-white z-50 leading-5 py-2.5' dangerouslySetInnerHTML={{ __html: CONFIG_SIMPLE.TOP_BAR_CONTENT }}/>
</div>
</header>
}
return <></>

View File

@@ -3,6 +3,7 @@ const CONFIG_SIMPLE = {
LOGO_IMG: '/Logo.webp',
TOP_BAR: true, // 显示顶栏
TOP_BAR_CONTENT: process.env.NEXT_PUBLIC_THEME_SIMPLE_TOP_TIPS || '',
LOGO_DESCRIPTION: process.env.NEXT_PUBLIC_THEME_SIMPLE_LOGO_DESCRIPTION || '<div>程序员<br/>互联网爱好者/人文历史<br/>创业财富</div>',
AUTHOR_LINK: process.env.NEXT_PUBLIC_AUTHOR_LINK || '#',