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;