github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-20 19:02:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor search-active

Browse Source
This commit is contained in:
Mimi 2020-06-18 16:17:11 +08:00
parent d905a28d6a
commit 4bcccea378
5 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
layout/_scripts/noscript.njk
View File

@ -18,5 +18,8 @@
.use-motion .logo-line-before i { left: initial; } .use-motion .logo-line-before i { left: initial; }
.use-motion .logo-line-after i { right: initial; } .use-motion .logo-line-after i { right: initial; }
.search-pop-overlay, .sidebar-nav { display: none; }
.sidebar-panel { display: block; }
</style> </style>
</noscript> </noscript>

1
source/css/_common/components/pages/breadcrumb.styl
View File

@ -3,6 +3,7 @@ ul.breadcrumb {
list-style: none; list-style: none;
margin: 1em 0; margin: 1em 0;
padding: 0 2em; padding: 0 2em;
text-align: center;
li { li {
display: inline; display: inline;

14
source/css/_common/components/third-party/search.styl vendored
View File

@ -1,5 +1,10 @@
.search-active {
overflow: hidden;
}
.search-pop-overlay { .search-pop-overlay {
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0);
display: flex;
height: 100%; height: 100%;
left: 0; left: 0;
position: fixed; position: fixed;
@ -9,7 +14,7 @@
width: 100%; width: 100%;
z-index: $zindex-4; z-index: $zindex-4;
&.search-active { .search-active & {
background: rgba(0, 0, 0, .3); background: rgba(0, 0, 0, .3);
transition: background .2s; transition: background .2s;
visibility: visible; visibility: visible;
@ -20,9 +25,7 @@
background: var(--card-bg-color); background: var(--card-bg-color);
border-radius: 5px; border-radius: 5px;
height: 80%; height: 80%;
left: calc(50% - 350px); margin: auto;
position: fixed;
top: 10%;
transform: scale(0); transform: scale(0);
transition: transform .2s; transition: transform .2s;
width: 700px; width: 700px;
@ -35,9 +38,6 @@
+mobile() { +mobile() {
border-radius: 0; border-radius: 0;
height: 100%; height: 100%;
left: 0;
margin: 0;
top: 0;
width: 100%; width: 100%;
} }

6
source/js/algolia-search.js
View File

@ -97,16 +97,14 @@ document.addEventListener('DOMContentLoaded', () => {
// Handle and trigger popup window // Handle and trigger popup window
document.querySelectorAll('.popup-trigger').forEach(element => { document.querySelectorAll('.popup-trigger').forEach(element => {
element.addEventListener('click', () => { element.addEventListener('click', () => {
document.body.style.overflow = 'hidden'; document.body.classList.add('search-active');
document.querySelector('.search-pop-overlay').classList.add('search-active');
document.querySelector('.search-input').focus(); document.querySelector('.search-input').focus();
}); });
}); });
// Monitor main search box // Monitor main search box
const onPopupClose = () => { const onPopupClose = () => {
document.body.style.overflow = ''; document.body.classList.remove('search-active');
document.querySelector('.search-pop-overlay').classList.remove('search-active');
}; };
document.querySelector('.search-pop-overlay').addEventListener('click', event => { document.querySelector('.search-pop-overlay').addEventListener('click', event => {

6
source/js/local-search.js
View File

@ -250,8 +250,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Handle and trigger popup window // Handle and trigger popup window
document.querySelectorAll('.popup-trigger').forEach(element => { document.querySelectorAll('.popup-trigger').forEach(element => {
element.addEventListener('click', () => { element.addEventListener('click', () => {
document.body.style.overflow = 'hidden'; document.body.classList.add('search-active');
document.querySelector('.search-pop-overlay').classList.add('search-active');
input.focus(); input.focus();
if (!isfetched) fetchData(); if (!isfetched) fetchData();
}); });
@ -259,8 +258,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Monitor main search box // Monitor main search box
const onPopupClose = () => { const onPopupClose = () => {
document.body.style.overflow = ''; document.body.classList.remove('search-active');
document.querySelector('.search-pop-overlay').classList.remove('search-active');
}; };
document.querySelector('.search-pop-overlay').addEventListener('click', event => { document.querySelector('.search-pop-overlay').addEventListener('click', event => {