diff --git a/assets/search/js/renderer.ts b/assets/search/js/renderer.ts index 402d5e30a65..46ce12179c6 100644 --- a/assets/search/js/renderer.ts +++ b/assets/search/js/renderer.ts @@ -62,6 +62,10 @@ export default class Renderer { } icon(page) { + return page.kind in params.icons ? params.icons[page.kind] : params.icons.page + } + + img(page) { if (page.img) { let h = '' let w = '' @@ -74,7 +78,7 @@ export default class Renderer { return `` } - return page.kind in params.icons ? params.icons[page.kind] : params.icons.page + return '' } url(page, url): string { @@ -357,6 +361,7 @@ export default class Renderer {
${this.title(result)}
${this.desc(result)} + ${this.img(result.item)}
${this.score(result.score)} ${result.item.lang} diff --git a/assets/search/scss/_result.scss b/assets/search/scss/_result.scss index 0ff6dc8df12..b8d36a9a568 100644 --- a/assets/search/scss/_result.scss +++ b/assets/search/scss/_result.scss @@ -1,5 +1,5 @@ .search-result-icon { - margin-right: 0.5rem; + margin: 0.25rem 0.5rem 0 0; svg { vertical-align: middle; @@ -7,14 +7,22 @@ } .search-result-img { - height: 64px; - width: auto; + width: 86px; + height: 48px; + object-fit: cover; + + @media (max-width: 576px) { + width: 100%; + height: 120px; + order: 1; + margin-top: .25rem; + } } .search-result-content { display: flex; flex: 1; - margin: 0 2rem 0.125rem 0; + margin: 0 0 0.125rem 0; flex-flow: column nowrap; overflow: hidden; } @@ -25,14 +33,13 @@ .search-result-desc, .search-result-meta { - font-size: 0.75rem; + font-size: 0.95rem; color: var(--search-result-color-secondary); } .search-result-title, .search-result-desc { overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; mark { @@ -115,6 +122,14 @@ white-space: normal; } +.search-result-action-meta { + opacity: .75; + + &:hover { + opacity: 1; + } +} + .search-results { margin-bottom: 0.5rem; @@ -135,7 +150,7 @@ text-decoration: none; display: flex; flex-wrap: wrap; - align-items: center; + align-items: start; margin: 0.5rem 0 0; padding: 0.5rem; position: relative;