breaking changes: algolia 升級至 v4

feat:  本地搜索增加數據庫加載中和搜索中 loading 顯示
feat: 更改文章美化後,列表的顯示效果 closed #693 closed #686
improvement: UI 微調
This commit is contained in:
Jerry
2021-10-29 14:40:10 +08:00
Unverified
parent 632cb37bc5
commit f7c50586ce
36 changed files with 290 additions and 364 deletions

View File

@@ -1,69 +1,52 @@
#algolia-search
.search-dialog
.ais-search-box
margin: 0 auto
max-width: 100%
width: 100%
.ais-SearchBox
input
padding: 5px 14px
width: 100%
outline: none
border: 2px solid $search-color
border-radius: 40px
background: var(--search-bg)
color: var(--search-input-color)
.ais-hits--item.algolia-hit-item
position: relative
.ais-Hits-list
padding-left: 24px
&:hover
&:before
border-color: var(--pseudo-hover)
&:before
$w = .5em
position: absolute
top: .53em
left: 0
width: w = $w
height: h = w
border: 3px solid $search-color
border-radius: w
background: transparent
content: ''
line-height: h
transition: all .2s ease-in-out
@extend .list-beauty
a
display: block
color: var(--search-result-title)
cursor: pointer
&:hover
color: $search-color
em
mark
background: transparent
color: $search-keyword-highlight
font-weight: bold
.ais-pagination.pagination
.ais-Pagination
margin: 16px 0 0
padding: 0
text-align: center
.ais-pagination--item
.ais-Pagination-list
padding: 0
list-style: none
.ais-Pagination-item
display: inline
margin: 0 4px
padding: 0
a
.ais-Pagination-link
display: inline-block
min-width: 24px
height: 24px
text-align: center
line-height: 24px
.ais-pagination--item.current
.ais-Pagination-item--selected
a
background: $theme-paginator-color
color: #eee