fix nav.css style issue,
make search feature not case sensitive
This commit is contained in:
parent
7dd25a0f94
commit
e9504bdf94
10
css/nav.css
10
css/nav.css
@ -69,15 +69,15 @@ label[for="navtoggle"], #navtoggle {
|
||||
background-color: var(--nav-link-active-bg-color);
|
||||
}
|
||||
|
||||
nav:hover a[aria-current="page"]:has(~ a:hover) {
|
||||
color: var(--nav-text-color);
|
||||
background-color: var(--nav-bg-color);
|
||||
}
|
||||
|
||||
nav:hover a[aria-current="page"]:hover {
|
||||
color: var(--nav-link-active-text-color);
|
||||
background-color: var(--nav-link-active-bg-color);
|
||||
}
|
||||
|
||||
nav:hover a[aria-current="page"]:has(~ a:hover) {
|
||||
color: var(--nav-text-color);
|
||||
background-color: var(--nav-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 600px){
|
||||
|
@ -47,8 +47,8 @@ async function populateInstances () {
|
||||
}
|
||||
else {
|
||||
criteria = (a, b) => {
|
||||
const aInc = a.name.includes(searchQuery);
|
||||
const bInc = b.name.includes(searchQuery);
|
||||
const aInc = a.name.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
const bInc = b.name.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
if (aInc && bInc) {
|
||||
return a.vmid > b.vmid ? 1 : -1;
|
||||
}
|
||||
|
@ -77,10 +77,15 @@ class InstanceCard extends HTMLElement {
|
||||
|
||||
const nameParagraph = this.shadowRoot.querySelector("#instance-name");
|
||||
if (this.searchQuery) {
|
||||
const nameParts = this.name.split(this.searchQuery);
|
||||
nameParagraph.innerHTML += `<span>${nameParts[0]}</span>`;
|
||||
for (let i = 1; i < nameParts.length; i++) {
|
||||
nameParagraph.innerHTML += `<span style="color: var(--lightbg-text-color); background-color: var(--highlight-color);">${this.searchQuery}</span><span>${nameParts[i]}</span>`;
|
||||
const regEscape = v => v.replace("[-[\]{}()*+?.,\\^$|#\s]", "\\$&");
|
||||
const nameParts = this.name.split(new RegExp(regEscape(`(${this.searchQuery})`), "ig"));
|
||||
for (let i = 0; i < nameParts.length; i++) {
|
||||
const part = document.createElement("span");
|
||||
part.innerText = nameParts[i];
|
||||
if (nameParts[i].toLowerCase() === this.searchQuery.toLowerCase()) {
|
||||
part.style = "color: var(--lightbg-text-color); background-color: var(--highlight-color);";
|
||||
}
|
||||
nameParagraph.append(part);
|
||||
}
|
||||
}
|
||||
else {
|
||||
|
Loading…
Reference in New Issue
Block a user