From b135764ffa0644046d2331638755fd1d0b4c7d98 Mon Sep 17 00:00:00 2001 From: liuyib <1656081615@qq.com> Date: Fri, 23 Aug 2019 14:45:46 +0800 Subject: [PATCH] refactor: Optimize UI of search --- layout/_components/search/algolia.pug | 11 +++--- layout/_components/search/localsearch.pug | 11 +++--- layout/_third-party/search/localsearch.pug | 20 +++++----- source/css/_common/responsive.styl | 17 +++------ source/css/_components/search/algolia.styl | 6 ++- source/css/_components/search/common.styl | 37 ++++++++++++------- .../css/_components/search/localsearch.styl | 24 +++++++----- source/css/_global/utils.styl | 24 +++++++++++- source/images/algolia.svg | 2 +- source/js/algolia-search.js | 16 ++++---- 10 files changed, 102 insertions(+), 66 deletions(-) diff --git a/layout/_components/search/algolia.pug b/layout/_components/search/algolia.pug index ed8645d..c399c6f 100644 --- a/layout/_components/search/algolia.pug +++ b/layout/_components/search/algolia.pug @@ -1,11 +1,10 @@ -div.algolia-mask +div.search-mask -div.algolia-popup - div.algolia-input-wrapper - span.algolia-close - i.fa.fa-times +div.search-popup + span.search-close + div.search-input - div.algolia-results + div.search-results div#algolia-hits div#algolia-pagination diff --git a/layout/_components/search/localsearch.pug b/layout/_components/search/localsearch.pug index b5d8970..95f8b01 100644 --- a/layout/_components/search/localsearch.pug +++ b/layout/_components/search/localsearch.pug @@ -1,9 +1,8 @@ -div.localsearch-mask +div.search-mask -div.localsearch-popup - div.localsearch-input-wrapper +div.search-popup + span.search-close + div.search-input input(placeholder= _p("local_search.input_placeholder")) - span.localsearch-close - i.fa.fa-times - div.localsearch-result + div.search-results diff --git a/layout/_third-party/search/localsearch.pug b/layout/_third-party/search/localsearch.pug index 6fbb2ce..aadac49 100644 --- a/layout/_third-party/search/localsearch.pug +++ b/layout/_third-party/search/localsearch.pug @@ -5,15 +5,15 @@ if theme.local_search.enable e.stopPropagation(); $('body').css('overflow', 'hidden'); - $('.localsearch-popup') + $('.search-popup') .velocity('stop') .velocity('transition.expandIn', { duration: 300, complete: function () { - $('.localsearch-popup input').focus(); + $('.search-popup input').focus(); } }); - $('.localsearch-mask') + $('.search-mask') .velocity('stop') .velocity('transition.fadeIn', { duration: 300 @@ -22,7 +22,7 @@ if theme.local_search.enable initSearch(); }); - $('.localsearch-mask, .localsearch-close').on('click', function () { + $('.search-mask, .search-close').on('click', function () { closeSearch(); }); @@ -59,8 +59,8 @@ if theme.local_search.enable }; }).get() : res; - var $input = $('.localsearch-input-wrapper input'); - var $result = $('.localsearch-result'); + var $input = $('.search-input input'); + var $result = $('.search-results'); // 搜索对象（标题、内容）的权重，影响显示顺序 var WEIGHT = { title: 100, content: 1 }; @@ -221,9 +221,9 @@ if theme.local_search.enable }); matchPosts.forEach(function (post) { - resultInnerHtml += '
  • '; + resultInnerHtml += '
  • '; resultInnerHtml += post.title; - resultInnerHtml += '
    '; + resultInnerHtml += '
    '; resultInnerHtml += post.content; resultInnerHtml += '
    • '; }); @@ -243,12 +243,12 @@ if theme.local_search.enable function closeSearch () { $('body').css('overflow', 'auto'); - $('.localsearch-popup') + $('.search-popup') .velocity('stop') .velocity('transition.expandOut', { duration: 300 }); - $('.localsearch-mask') + $('.search-mask') .velocity('stop') .velocity('transition.fadeOut', { duration: 300 diff --git a/source/css/_common/responsive.styl b/source/css/_common/responsive.styl index f71cc8c..f5bc3ea 100644 --- a/source/css/_common/responsive.styl +++ b/source/css/_common/responsive.styl @@ -81,8 +81,7 @@ .header-info-subtitle font-size: 1rem - div.algolia-popup, - div.localsearch-popup + div.search-popup top: 0 left: 0 margin: 0 @@ -91,7 +90,7 @@ height: 100vh max-height: 100vh - div.localsearch-result + div.search-results max-height: calc(100vh - 6rem) // $xs-width: 576px - 0.02px @@ -135,11 +134,8 @@ span display: none - div.algolia-results - max-height: 10rem - - .algolia-hit-item - margin: 0 + .algolia-hit-item + margin: 0 .post-header font-size: $font-size-base @@ -179,11 +175,10 @@ .gallery-image width: 100% - div.algolia-popup, - div.localsearch-popup + div.search-popup padding: .8rem .6rem 1rem - div.localsearch-result + div.search-results & > ul padding-left: 1rem diff --git a/source/css/_components/search/algolia.styl b/source/css/_components/search/algolia.styl index 83e3f74..2230d7d 100644 --- a/source/css/_components/search/algolia.styl +++ b/source/css/_components/search/algolia.styl @@ -1,4 +1,4 @@ -.algolia-input-wrapper +.search-input .ais-search-box max-width: 100% @@ -14,6 +14,10 @@ background-color: #fff transition: color .2s + em + font-style: normal + background-color: $yellow-light + #algolia-pagination margin: .5rem 0 diff --git a/source/css/_components/search/common.styl b/source/css/_components/search/common.styl index 41689e3..eaa37ed 100644 --- a/source/css/_components/search/common.styl +++ b/source/css/_components/search/common.styl @@ -1,5 +1,4 @@ -.algolia-mask, -.localsearch-mask +.search-mask display: none position: fixed top: 0 @@ -9,8 +8,7 @@ height: 100% background-color: alpha($black-dark, .7) -.algolia-popup, -.localsearch-popup +.search-popup display: none position: fixed top: 10% @@ -25,8 +23,7 @@ color: $font-color background-color: $white-light -.algolia-input-wrapper, -.localsearch-input-wrapper +.search-input margin: 1.2rem 0 1rem input @@ -41,21 +38,35 @@ &:focus border-color: $blue-light -.algolia-close, -.localsearch-close +.search-close position: absolute - top: 0 - right: .6rem + top: .5rem + right: .5rem + width: 1rem + height: 1rem font-size: 1.25em color: $black-light + transform: translateZ(0) cursor: pointer -.algolia-results, -.localsearch-results + &::before, + &::after + content: '' + display: block + position: absolute + top: 50% + margin-top: -.1rem + width: 1rem + height: .2rem + background-color: $black-light + + @extend .anime-close + +.search-results overflow-x: hidden overflow-y: scroll max-height: 16rem em font-style: normal - background-color: $yellow-light \ No newline at end of file + background-color: $yellow-light diff --git a/source/css/_components/search/localsearch.styl b/source/css/_components/search/localsearch.styl index 3d70e8d..77c9688 100644 --- a/source/css/_components/search/localsearch.styl +++ b/source/css/_components/search/localsearch.styl @@ -1,14 +1,14 @@ -.localsearch-input-wrapper +.search-input input width: 100% -.localsearch-result - overflow: auto +.search-results max-height: calc(80vh - 6rem) b border-bottom: 1px dashed red color: red + transition: color .2s & > ul margin: 0 @@ -18,18 +18,24 @@ &:not(:last-child) margin-bottom: 1rem - &::after - content: '' - display: block - border-bottom: 1px dashed #ccc - padding-bottom: .5rem - width: 100% + &::after + content: '' + display: block + border-bottom: 1px dashed #ccc + padding-bottom: .5rem + width: 100% &-title clearAStyle() font-weight: $font-weight-bold color: #222 + &:hover + color: $blue-light + + b + color: $blue-light + &-content overflow: hidden width: 100% diff --git a/source/css/_global/utils.styl b/source/css/_global/utils.styl index e359684..d4b82df 100644 --- a/source/css/_global/utils.styl +++ b/source/css/_global/utils.styl @@ -1,3 +1,5 @@ +// Clear global style +// ---------------------------------------- clearAStyle() border-bottom: 0 @@ -9,17 +11,21 @@ clearImgStyle() border-radius: 0 padding: 0 +// Clear float +// ---------------------------------------- .clearfix::after content: '' display: table clear: both +// UI component +// ---------------------------------------- $popover-bg-color = alpha(#000, .7) +// UI components of "popover" [data-popover] position: relative -// UI components of "popover" [data-popover]::before position: absolute top: 0 @@ -46,3 +52,19 @@ $popover-bg-color = alpha(#000, .7) [data-popover][data-popover-pos='up']:hover::before opacity: 1 transform: translate(-50%, -115%) + +// Animation class +// ---------------------------------------- +.anime-close + &::before, + &::after + transition: transform .25s + transform: rotate(-45deg) + + &::after + transform: rotate(-135deg) + + &:hover + &::before, + &::after + transform: rotate(0) \ No newline at end of file diff --git a/source/images/algolia.svg b/source/images/algolia.svg index e81bb92..861979b 100644 --- a/source/images/algolia.svg +++ b/source/images/algolia.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/source/js/algolia-search.js b/source/js/algolia-search.js index 4b4208b..5cae03f 100644 --- a/source/js/algolia-search.js +++ b/source/js/algolia-search.js @@ -3,22 +3,22 @@ $(document).ready(function () { e.stopPropagation(); $('body').css('overflow', 'hidden'); - $('.algolia-popup') + $('.search-popup') .velocity('stop') .velocity('transition.expandIn', { duration: 300, complete: function () { - $('.algolia-popup input').focus(); + $('.search-popup input').focus(); } }); - $('.algolia-mask') + $('.search-mask') .velocity('stop') .velocity('transition.fadeIn', { duration: 300 }); }); - $('.algolia-mask, .algolia-close').on('click', function () { + $('.search-mask, .search-close').on('click', function () { closeSearch(); }); @@ -43,7 +43,7 @@ $(document).ready(function () { hitsPerPage: algolia.hits.per_page || 10 }, searchFunction: function (helper) { - var searchInput = $('.algolia-input-wrapper').find('input'); + var searchInput = $('.search-input').find('input'); if (searchInput.val()) { helper.search(); @@ -53,7 +53,7 @@ $(document).ready(function () { search.addWidget( instantsearch.widgets.searchBox({ - container: '.algolia-input-wrapper', + container: '.search-input', reset: false, magnifier: false, placeholder: algolia.languages.input_placeholder @@ -136,12 +136,12 @@ $(document).ready(function () { function closeSearch () { $('body').css('overflow', 'auto'); - $('.algolia-popup') + $('.search-popup') .velocity('stop') .velocity('transition.expandOut', { duration: 300 }); - $('.algolia-mask') + $('.search-mask') .velocity('stop') .velocity('transition.fadeOut', { duration: 300 -- GitLab