danvics/Pulse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(kubernetes): Move search bar to its own row above filters

Browse source
This commit is contained in:
rcourtman 2025-12-12 23:37:49 +00:00
parent 9725849d77
commit fa5fde56e6
1 changed files with 41 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
frontend-modern/src/components/Kubernetes/KubernetesClusters.tsx
View file

@ -451,53 +451,51 @@ export const KubernetesClusters: Component<KubernetesClustersProps> = (props) =>
{/* Filter Bar */} {/* Filter Bar */}
<Card padding="sm"> <Card padding="sm">
<div class="flex flex-col lg:flex-row gap-3"> <div class="flex flex-col gap-3">
{/* Search */} {/* Search - full width on its own row */}
<div class="flex gap-2 flex-1 items-center"> <div class="relative">
<div class="relative flex-1"> <input
<input ref={searchInputRef}
ref={searchInputRef} type="text"
type="text" placeholder="Search clusters, nodes, pods..."
placeholder="Search clusters, nodes, pods..." value={search()}
value={search()} onInput={(e) => setSearch(e.currentTarget.value)}
onInput={(e) => setSearch(e.currentTarget.value)} onKeyDown={(e) => {
onKeyDown={(e) => { if (e.key === 'Escape') {
if (e.key === 'Escape') { setSearch('');
setSearch(''); e.currentTarget.blur();
e.currentTarget.blur(); }
} }}
}} class="w-full pl-9 pr-8 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 dark:focus:border-blue-400 outline-none transition-all"
class="w-full pl-9 pr-8 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 dark:focus:border-blue-400 outline-none transition-all" />
<svg
class="absolute left-3 top-2 h-4 w-4 text-gray-400 dark:text-gray-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/> />
<svg </svg>
class="absolute left-3 top-2 h-4 w-4 text-gray-400 dark:text-gray-500" <Show when={search()}>
fill="none" <button
viewBox="0 0 24 24" type="button"
stroke="currentColor" class="absolute right-2 top-1/2 -translate-y-1/2 transform text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
onClick={() => setSearch('')}
aria-label="Clear search"
> >
<path <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
stroke-linecap="round" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
stroke-linejoin="round" </svg>
stroke-width="2" </button>
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" </Show>
/>
</svg>
<Show when={search()}>
<button
type="button"
class="absolute right-2 top-1/2 -translate-y-1/2 transform text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
onClick={() => setSearch('')}
aria-label="Clear search"
>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</Show>
</div>
</div> </div>
{/* Filters */} {/* Filters - second row */}
<div class="flex flex-wrap items-center gap-2"> <div class="flex flex-wrap items-center gap-2">
{/* View Mode Toggle */} {/* View Mode Toggle */}
<div class="inline-flex rounded-lg bg-gray-100 dark:bg-gray-700 p-0.5"> <div class="inline-flex rounded-lg bg-gray-100 dark:bg-gray-700 p-0.5">