💄 Design search box footer with pagination & fixed toc enable in home page.

This commit is contained in:
凡梦星尘 2022-10-06 12:00:10 +08:00
parent 0536ac37fc
commit 6a42188853
3 changed files with 38 additions and 36 deletions

View File

@ -78,45 +78,41 @@
height: calc(100% - 55px); height: calc(100% - 55px);
overflow: auto; overflow: auto;
padding: 0px 25px; padding: 0px 25px;
hr {
margin: 5px 0 10px;
&:first-child {
display: none;
}
}
} }
.search-footer { .search-footer {
background: var(--content-bg-color); background: var(--content-bg-color);
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
display: flex;
padding: 0 5px; padding: 0 5px;
color: var(--text-color);
div { .search-meta-info {
color: var(--text-color); height: 26px;
padding: 5px; display: flex;
padding: 5px 0;
.search-hit-stats {
font-size: $font-size-smaller;
width: 65%;
padding: 2px 8px;
}
.search-vendor {
width: 34%;
text-align: right;
font-size: $font-size-small;
font-weight: bold;
img {
width: 68px;
margin: 5px;
vertical-align: middle;
display: inline;
}
}
} }
.search-hit-stats {
width: 65%;
font-size: $font-size-smaller;
}
.search-vendor {
width: 35%;
text-align: right;
font-size: $font-size-small;
img {
width: 68px;
margin: 5px;
vertical-align: middle;
display: inline;
}
}
} }
.search-result-list { .search-result-list {
@ -164,9 +160,11 @@
.algolia-pagination { .algolia-pagination {
// Override default style of ul // Override default style of ul
margin: 40px 0; //margin: 40px 0;
opacity: 1; opacity: 1;
padding: 0; padding: 0;
font-size: $font-size-smallest;
margin-bottom: -16px;
.pagination { .pagination {
visibility: visible; visibility: visible;

View File

@ -10,7 +10,9 @@ NexT.boot.registerEvents = function() {
NexT.utils.registerScrollPercent(); NexT.utils.registerScrollPercent();
// NexT.utils.registerCanIUseTag(); // NexT.utils.registerCanIUseTag();
NexT.utils.registerToolButtons(); if (NexT.CONFIG.page.isPage) {
NexT.utils.registerToolButtons();
}
// Mobile top menu bar. // Mobile top menu bar.
document.querySelector('.site-nav-toggle .toggle').addEventListener('click', event => { document.querySelector('.site-nav-toggle .toggle').addEventListener('click', event => {

View File

@ -9,12 +9,14 @@
</div> </div>
<div class="search-result-container"> <div class="search-result-container">
<div class="algolia-hits"></div> <div class="algolia-hits"></div>
<div class="algolia-pagination"></div>
</div> </div>
<div class="search-footer"> <div class="search-footer">
<div class="search-hit-stats algolia-stats"></div> <div class="algolia-pagination"></div>
<div class="search-vendor"> <div class="search-meta-info">
<span>Search By</span> <div class="search-hit-stats algolia-stats"></div>
<img src="/imgs/algolia-logo.svg"/> <div class="search-vendor">
<span>Search By</span>
<img src="/imgs/algolia-logo.svg"/>
</div>
</div> </div>
</div> </div>