penpot/penpot-docs
1
0
Fork 0
mirror of https://github.com/penpot/penpot-docs.git synced 2024-07-03 05:13:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix search box misalingment when its active

Browse Source
This commit is contained in:
Pablo Alba 2022-12-01 06:55:18 +01:00
parent 872a6d0160
commit 2c5b35cf09
2 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/index.css
View File

@ -565,6 +565,7 @@ a[href].direct-link:focus:visited,
.search {
align-items: center;
display: flex;
flex-direction: column;
position: absolute;
right: 0;
top: -6px;
@ -591,7 +592,7 @@ a[href].direct-link:focus:visited,
.search-icon {
position: absolute;
right: 13px;
top: calc(50% - 8px);
top: 11px;
fill: var(--graymedium);
pointer-events: none;
}
@ -609,6 +610,7 @@ a[href].direct-link:focus:visited,
box-shadow: 0 0 10px rgba(68, 68, 68, 0.1);
height: 85vh;
overflow: auto;
width: 18rem;
}
#search-results li {
padding: 0;
@ -642,6 +644,7 @@ a[href].direct-link:focus:visited,
margin: 0;
padding: 2rem;
box-shadow: 0 0 10px rgba(68, 68, 68, 0.1);
width: 18rem;
}
#no-results-found p {
@ -882,6 +885,16 @@ table tr:nth-child(odd) {
.search input:focus + .search-icon {
display: none;
}
#search-results {
width: 100%;
}
#no-results-found {
width: 100%;
}
.preheader {
padding: 1rem;
}

6
js/search.js
View File

@ -7,14 +7,16 @@
expand: true,
});
const cleanResults = results.filter((r) => r.doc.title !== undefined)
const resEl = document.getElementById("search-results");
const noResultsEl = document.getElementById("no-results-found");
resEl.innerHTML = "";
if (results.length > 0) {
if (cleanResults.length > 0) {
resEl.style.display = "block";
noResultsEl.style.display = "none";
results.map((r) => {
cleanResults.map((r) => {
const { id, title, description } = r.doc;
const el = document.createElement("li");
resEl.appendChild(el);