fix(search): properly show mobile layout

This commit is contained in:
Jacky Zhao 2025-04-10 17:43:35 -07:00
parent e9b60c7285
commit 091cc1b05e
2 changed files with 15 additions and 5 deletions

View file

@ -300,9 +300,11 @@ async function setupSearch(searchElement: Element, currentSlug: FullSlug, data:
itemTile.classList.add("result-card") itemTile.classList.add("result-card")
itemTile.id = slug itemTile.id = slug
itemTile.href = resolveUrl(slug).toString() itemTile.href = resolveUrl(slug).toString()
itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}${ itemTile.innerHTML = `
enablePreview && window.innerWidth > 600 ? "" : `<p>${content}</p>` <h3 class="card-title">${title}</h3>
}` ${htmlTags}
<p class="card-description">${content}</p>
`
itemTile.addEventListener("click", (event) => { itemTile.addEventListener("click", (event) => {
if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
hideSearch() hideSearch()

View file

@ -133,11 +133,13 @@
} }
@media all and ($mobile) { @media all and ($mobile) {
& > #preview-container { flex-direction: column;
& > .preview-container {
display: none !important; display: none !important;
} }
&[data-preview] > #results-container { &[data-preview] > .results-container {
width: 100%; width: 100%;
height: auto; height: auto;
flex: 0 0 100%; flex: 0 0 100%;
@ -204,6 +206,12 @@
margin: 0; margin: 0;
} }
@media all and not ($mobile) {
& > p.card-description {
display: none;
}
}
& > ul.tags { & > ul.tags {
margin-top: 0.45rem; margin-top: 0.45rem;
margin-bottom: 0; margin-bottom: 0;