Projets/ObsiGate
1
1
Fork 0
Code Issues 16 Pull Requests Actions Packages Projects Releases 20 Wiki Activity

Guard against missing search elements and restyle search layout

Browse Source
This commit is contained in:
bruno
2026-05-26 14:05:26 -04:00
parent 8fdcdaf412
commit f2170e9ac8
2 changed files with 20 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app.js
+2 -1
View File
@@ -4682,6 +4682,7 @@
function initSearch() { function initSearch() {
const input = document.getElementById("search-input"); const input = document.getElementById("search-input");
if (!input) return;
const caseBtn = document.getElementById("search-case-btn"); const caseBtn = document.getElementById("search-case-btn");
const wordBtn = document.getElementById("search-word-btn"); const wordBtn = document.getElementById("search-word-btn");
const regexBtn = document.getElementById("search-regex-btn"); const regexBtn = document.getElementById("search-regex-btn");
@@ -4770,7 +4771,7 @@
SearchChips.init(); SearchChips.init();
// Initially hide clear button // Initially hide clear button
clearBtn.style.display = "none"; if (clearBtn) clearBtn.style.display = "none";
// --- Input handler: debounced search + autocomplete dropdown --- // --- Input handler: debounced search + autocomplete dropdown ---
input.addEventListener("input", () => { input.addEventListener("input", () => {
frontend/style.css
+18 -18
View File
@@ -243,17 +243,17 @@ a:hover {
.search-wrapper { .search-wrapper {
width: 100%; width: 100%;
max-width: 520px; max-width: 620px;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; flex-direction: column;
gap: 4px;
} }
.search-wrapper .search-icon { .search-wrapper .search-icon {
position: absolute; position: absolute;
left: 10px; left: 10px;
top: 50%; top: 14px;
transform: translateY(-50%);
color: var(--text-secondary); color: var(--text-secondary);
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
@@ -267,7 +267,8 @@ a:hover {
} }
.search-input-wrapper input { .search-input-wrapper input {
width: 100%; flex: 1;
min-width: 0;
padding: 8px 14px 8px 38px; padding: 8px 14px 8px 38px;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 6px; border-radius: 6px;
@@ -286,31 +287,29 @@ a:hover {
} }
.search-actions { .search-actions {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 2px;
flex-shrink: 0;
padding-left: 4px;
} }
.search-btn { .search-btn {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 28px; min-width: 26px;
height: 28px; height: 26px;
padding: 0 4px;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: 4px;
background: var(--bg-secondary); background: var(--bg-secondary);
color: var(--text-secondary); color: var(--text-secondary);
cursor: pointer; cursor: pointer;
font-family: "JetBrains Mono", monospace; font-family: "JetBrains Mono", monospace;
font-size: 0.75rem; font-size: 0.7rem;
font-weight: 600; font-weight: 600;
transition: all 150ms ease; transition: all 150ms ease;
padding: 0;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -2660,13 +2659,14 @@ body.resizing-v {
} }
.search-actions { .search-actions {
right: 6px; gap: 2px;
} }
.search-btn { .search-btn {
width: 34px; min-width: 28px;
height: 34px; height: 28px;
border-radius: 8px; font-size: 0.65rem;
padding: 0 3px;
} }
.search-dropdown { .search-dropdown {