NotAShelf/nvf
1
0
Fork 0
mirror of https://github.com/NotAShelf/nvf.git synced 2024-12-27 21:22:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: move inline style options to the scss stylesheet

Browse source
This commit is contained in:
raf 2024-12-09 14:13:33 +03:00
parent 52d88111ea
commit 5dbf5646a8
Signed by: NotAShelf
GPG key ID: AF26552424E53993
2 changed files with 66 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
docs/static/script/search.js vendored
View file

@ -24,71 +24,6 @@ document.addEventListener("DOMContentLoaded", () => {
searchPopup.classList.add("hidden"); searchPopup.classList.add("hidden");
document.body.appendChild(searchPopup); document.body.appendChild(searchPopup);
// TODO: move this to the compiled stylesheet after development
const style = document.createElement("style");
style.textContent = `
#search-bar {
position: sticky;
top: 0;
background: #f9f9f9;
padding: 10px;
border-bottom: 1px solid #ccc;
z-index: 1000;
cursor: pointer;
}
#search-popup {
position: fixed;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
width: 450px;
max-height: 400px; /* Limit the height of the popup */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 1001;
display: none; /* Initially hidden */
overflow: hidden;
}
#search-popup-content {
display: flex;
flex-direction: column;
}
#search-input-popup {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}
#search-results-list {
list-style-type: none;
padding: 0;
max-height: 300px; /* Limit the number of visible entries */
overflow-y: auto; /* Make it scrollable */
}
#search-results-list li {
margin: 5px 0;
cursor: pointer;
padding: 5px;
}
#search-results-list li:hover {
background-color: #f0f0f0;
}
.hidden {
display: none;
}
`;
document.head.appendChild(style);
// Focus the input on pop-up widget // Focus the input on pop-up widget
searchBar.addEventListener("click", (event) => { searchBar.addEventListener("click", (event) => {
event.stopPropagation(); // also cancel clicks to get rid of that annoying cursor flicker event.stopPropagation(); // also cancel clicks to get rid of that annoying cursor flicker
@ -181,7 +116,7 @@ document.addEventListener("DOMContentLoaded", () => {
// If there are items > maxVisibleResults, show a "See More" option // If there are items > maxVisibleResults, show a "See More" option
if (matchingOptions.length > maxVisibleResults) { if (matchingOptions.length > maxVisibleResults) {
const li = document.createElement("li"); const li = document.createElement("li");
li.textContent = `See more (${matchingOptions.length - maxVisibleResults} more)`; li.textContent = `${matchingOptions.length - maxVisibleResults} more results...\nNarrow down your query to see them.`;
li.style.fontStyle = "italic"; li.style.fontStyle = "italic";
searchResultsList.appendChild(li); searchResultsList.appendChild(li);
} }

65
docs/static/style.scss vendored
View file

@ -61,6 +61,71 @@ $color-blue-900: #1e3a8a;
} }
} }
#search-bar {
position: sticky;
top: 0;
background: white;
padding: 10px;
border-bottom: 1px solid $color-gray-700;
z-index: 1000;
cursor: pointer;
@media (prefers-color-scheme: dark) {
background: $color-gray-900;
color: $color-gray-50;
}
}
#search-popup {
position: fixed;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
width: 450px;
max-height: 400px; /* Limit the height of the popup */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 1001;
display: none; /* Initially hidden */
overflow: hidden;
}
#search-popup-content {
display: flex;
flex-direction: column;
}
#search-input-popup {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}
#search-results-list {
list-style-type: none;
padding: 0;
max-height: 300px; /* Limit the number of visible entries */
overflow-y: auto; /* Make it scrollable */
}
#search-results-list li {
margin: 5px 0;
cursor: pointer;
padding: 5px;
}
#search-results-list li:hover {
background-color: #f0f0f0;
}
.hidden {
display: none;
}
body { body {
background: white; background: white;
color: $color-gray-900; color: $color-gray-900;