schmidt1024/kashilo
1
0
Fork 0
Code Issues Pull Requests Releases Activity

improve display of searchbox

Browse Source
This commit is contained in:
Schmidt
2026-01-31 15:49:36 +01:00
parent 640e7a3a4f
commit 52446a994a
1 changed files with 40 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
js/components/search-box.js
View File

@@ -624,6 +624,15 @@ style.textContent = /* css */`
outline-offset: -2px;
}
/* Mobile: Search query field top corners */
search-box .search-field-query input {
border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
}
search-box .search-field-query input:focus {
border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
}
search-box .search-field input::placeholder {
color: var(--color-text-muted);
}
@@ -631,6 +640,7 @@ style.textContent = /* css */`
search-box .search-row-submit {
padding: var(--space-sm);
background: var(--color-bg-secondary);
border-radius: 0 0 calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px);
}
search-box .btn-search {
@@ -725,6 +735,11 @@ style.textContent = /* css */`
border-radius: var(--radius-md);
}
/* Desktop: Submit row - top-right corner inherits from parent */
search-box .search-box .search-row-submit {
border-radius: 0 calc(var(--radius-xl) - 2px) 0 0;
}
search-box .search-box .btn-search-text {
display: none;
}
@@ -733,6 +748,31 @@ style.textContent = /* css */`
search-box .search-box .category-dropdown-label {
max-width: 250px;
}
/* Desktop: Search query field - only top-left rounded */
search-box .search-field-query input {
border-radius: calc(var(--radius-xl) - 2px) 0 0 0;
}
/* Desktop: Category dropdown trigger - bottom-left rounded on hover/focus */
search-box .category-dropdown-trigger:hover,
search-box .category-dropdown-trigger:focus {
border-radius: 0 0 0 calc(var(--radius-xl) - 2px);
}
/* Desktop: Last filter (location/radius) - bottom-right rounded */
search-box .filter-location:last-child select,
search-box .filter-radius:not(.hidden):last-child select {
border-radius: 0 0 calc(var(--radius-xl) - 2px) 0;
}
search-box .filter-location:last-child select:hover,
search-box .filter-location:last-child select:focus,
search-box .filter-radius:not(.hidden):last-child select:hover,
search-box .filter-radius:not(.hidden):last-child select:focus {
background: var(--color-bg-secondary);
border-radius: 0 0 calc(var(--radius-xl) - 2px) 0;
}
}
/* Category Dropdown (Desktop) */