perf(local-search): optimize local search popup
This commit is contained in:
parent
e65ec7f711
commit
e1890116b2
|
@ -14,7 +14,7 @@
|
|||
class="search-input"
|
||||
>
|
||||
</div>
|
||||
<span class="popup-btn-close">
|
||||
<span class="close-popup-btn">
|
||||
<i class="fas fa-times"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
@ -1,97 +1,93 @@
|
|||
$icon-size = 1.2rem;
|
||||
$icon-size = 1.2rem
|
||||
$search-header-height = 3rem
|
||||
|
||||
.search-pop-overlay {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
visibility: hidden;
|
||||
z-index: $z-index-8;
|
||||
transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease");
|
||||
position fixed
|
||||
display flex
|
||||
height 100%
|
||||
width 100%
|
||||
left 0
|
||||
top 0
|
||||
background rgba(0, 0, 0, 0)
|
||||
visibility hidden
|
||||
z-index $z-index-8
|
||||
transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease")
|
||||
|
||||
&.active {
|
||||
visibility: visible;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
visibility visible
|
||||
background rgba(0, 0, 0, 0.35)
|
||||
|
||||
.search-popup {
|
||||
transform: scale(1);
|
||||
transform scale(1)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.search-popup {
|
||||
background: var(--background-color);
|
||||
border-radius: 5px;
|
||||
height: 80%;
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
transform: scale(0);
|
||||
z-index: $z-index-6;
|
||||
transition-t("transform", "0", "0.3", "ease");
|
||||
background var(--background-color)
|
||||
border-radius 0.4rem
|
||||
height 80%
|
||||
width 70%
|
||||
margin auto
|
||||
transform scale(0)
|
||||
z-index $z-index-6
|
||||
transition-t("transform", "0", "0.3", "ease")
|
||||
|
||||
+keep-tablet() {
|
||||
width: 80%;
|
||||
width 80%
|
||||
}
|
||||
|
||||
+keep-mobile() {
|
||||
width: 90%;
|
||||
width 90%
|
||||
}
|
||||
|
||||
.search-header {
|
||||
background: var(--fourth-text-color);
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
|
||||
.search-input-field-pre, .popup-btn-close {
|
||||
font-size: $icon-size;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
background var(--fourth-text-color)
|
||||
border-top-left-radius 0.2rem
|
||||
border-top-right-radius 0.2rem
|
||||
display flex
|
||||
height $search-header-height
|
||||
align-items center
|
||||
padding 0 1rem
|
||||
|
||||
.search-input-field-pre {
|
||||
cursor: pointer;
|
||||
color: var(--third-text-color);
|
||||
cursor pointer
|
||||
color var(--default-text-color)
|
||||
margin-right 0.2rem
|
||||
}
|
||||
|
||||
.popup-btn-close {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
|
||||
|
||||
.search-input-container {
|
||||
|
||||
flex-grow: 1;
|
||||
padding: 2px;
|
||||
flex-grow 1
|
||||
padding 0.2rem
|
||||
|
||||
.search-input {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
font-size: 1.2rem;
|
||||
color: var(--default-text-color);
|
||||
background transparent
|
||||
border 0
|
||||
outline 0
|
||||
width 100%
|
||||
font-size 1.2rem
|
||||
color var(--default-text-color)
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
display none
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color var(--third-text-color)
|
||||
font-size 1rem
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.popup-btn-close {
|
||||
cursor: pointer;
|
||||
.close-popup-btn {
|
||||
color var(--default-text-color)
|
||||
font-size $icon-size
|
||||
cursor pointer
|
||||
|
||||
&:hover .fas, far, fab {
|
||||
color: var(--first-text-color);
|
||||
color var(--first-text-color)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -99,66 +95,68 @@ $icon-size = 1.2rem;
|
|||
|
||||
|
||||
#search-result {
|
||||
display: flex;
|
||||
height: calc(100% - 55px);
|
||||
overflow: auto;
|
||||
padding: 5px 25px;
|
||||
position relative
|
||||
box-sizing border-box
|
||||
display flex
|
||||
height 'calc(100% - %s)' % $search-header-height
|
||||
overflow auto
|
||||
padding 0.3rem 1.5rem
|
||||
|
||||
.search-result-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1rem;
|
||||
width 100%
|
||||
height 100%
|
||||
font-size 1rem
|
||||
|
||||
li {
|
||||
border-bottom: 1px dashed var(--border-color);
|
||||
padding: 10px 0;
|
||||
margin: 10px 0;
|
||||
box-sizing: border-box;
|
||||
box-sizing border-box
|
||||
border-bottom 0.1rem dashed var(--border-color)
|
||||
padding 0.8rem 0
|
||||
margin 0.8rem 0
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom none
|
||||
}
|
||||
|
||||
|
||||
.search-result-title {
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position relative
|
||||
font-weight bold
|
||||
margin-bottom 0.8rem
|
||||
padding-left 1rem
|
||||
display flex
|
||||
align-items center
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
background: var(--default-text-color);
|
||||
content ''
|
||||
position absolute
|
||||
width 0.4rem
|
||||
height 0.4rem
|
||||
border-radius 50%
|
||||
top 50%
|
||||
transform translateY(-50%)
|
||||
left 0
|
||||
background var(--default-text-color)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.search-result {
|
||||
line-height: 2rem;
|
||||
margin: 0;
|
||||
padding-left: 16px;
|
||||
word-wrap: break-word;
|
||||
line-height 2rem
|
||||
margin 0
|
||||
padding-left 1rem
|
||||
word-wrap break-word
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
color: var(--default-text-color);
|
||||
color var(--default-text-color)
|
||||
}
|
||||
}
|
||||
|
||||
.search-keyword {
|
||||
border-bottom: 1px dashed var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
border-bottom 0.1rem dashed var(--primary-color)
|
||||
color var(--primary-color)
|
||||
font-weight bold
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -166,8 +164,8 @@ $icon-size = 1.2rem;
|
|||
|
||||
|
||||
#no-result {
|
||||
color: var(--third-text-color);
|
||||
margin: auto;
|
||||
color var(--third-text-color)
|
||||
margin auto
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -271,7 +271,7 @@ KEEP.initLocalSearch = () => {
|
|||
searchInputDom.focus();
|
||||
inputEventFunction();
|
||||
});
|
||||
document.querySelector('.popup-btn-close').addEventListener('click', onPopupClose);
|
||||
document.querySelector('.close-popup-btn').addEventListener('click', onPopupClose);
|
||||
window.addEventListener('pjax:success', onPopupClose);
|
||||
window.addEventListener('keyup', event => {
|
||||
if (event.key === 'Escape') {
|
||||
|
|
Loading…
Reference in New Issue