From e1890116b2754420bbf7d522e59876bbdef06f62 Mon Sep 17 00:00:00 2001 From: XPoet Date: Thu, 29 Sep 2022 10:09:53 +0800 Subject: [PATCH] perf(local-search): optimize local search popup --- layout/_partial/local-search.ejs | 2 +- source/css/layout/_partial/local-search.styl | 188 +++++++++---------- source/js/local-search.js | 2 +- 3 files changed, 95 insertions(+), 97 deletions(-) diff --git a/layout/_partial/local-search.ejs b/layout/_partial/local-search.ejs index 3c9d57d..a808b59 100644 --- a/layout/_partial/local-search.ejs +++ b/layout/_partial/local-search.ejs @@ -14,7 +14,7 @@ class="search-input" > - + diff --git a/source/css/layout/_partial/local-search.styl b/source/css/layout/_partial/local-search.styl index 439c49a..fc5871c 100644 --- a/source/css/layout/_partial/local-search.styl +++ b/source/css/layout/_partial/local-search.styl @@ -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 } } diff --git a/source/js/local-search.js b/source/js/local-search.js index 41589d2..620174e 100644 --- a/source/js/local-search.js +++ b/source/js/local-search.js @@ -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') {