Refactor search-active

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

View File

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

View File

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

View File

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

View File

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

View File

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