tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix nav.css style issue,

Browse Source 
make search feature not case sensitive
This commit is contained in:
Arthur Lu 2023-09-28 01:38:19 +00:00
parent 49b2405814
commit a3fb992159
3 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/nav.css
View File

@ -68,16 +68,16 @@ label[for="navtoggle"], #navtoggle {
color: var(--nav-link-active-text-color); color: var(--nav-link-active-text-color);
background-color: var(--nav-link-active-bg-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);
}
nav:hover a[aria-current="page"]:hover { nav:hover a[aria-current="page"]:hover {
color: var(--nav-link-active-text-color); color: var(--nav-link-active-text-color);
background-color: var(--nav-link-active-bg-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){ @media screen and (width <= 600px){

4
scripts/index.js
View File

@ -47,8 +47,8 @@ async function populateInstances () {
} }
else { else {
criteria = (a, b) => { criteria = (a, b) => {
const aInc = a.name.includes(searchQuery); const aInc = a.name.toLowerCase().includes(searchQuery.toLowerCase());
const bInc = b.name.includes(searchQuery); const bInc = b.name.toLowerCase().includes(searchQuery.toLowerCase());
if (aInc && bInc) { if (aInc && bInc) {
return a.vmid > b.vmid ? 1 : -1; return a.vmid > b.vmid ? 1 : -1;
} }

13
scripts/instance.js
View File

@ -77,10 +77,15 @@ class InstanceCard extends HTMLElement {
const nameParagraph = this.shadowRoot.querySelector("#instance-name"); const nameParagraph = this.shadowRoot.querySelector("#instance-name");
if (this.searchQuery) { if (this.searchQuery) {
const nameParts = this.name.split(this.searchQuery); const regEscape = v => v.replace("[-[\]{}()*+?.,\\^$|#\s]", "\\$&");
nameParagraph.innerHTML += `<span>${nameParts[0]}</span>`; const nameParts = this.name.split(new RegExp(regEscape(`(${this.searchQuery})`), "ig"));
for (let i = 1; i < nameParts.length; i++) { for (let i = 0; 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 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 { else {