fix(core): comprehensive search UI redesign and module modernization
- Rebuilt Users and People search from scratch using robust flexbox (grow, min-w-100px, whitespace-nowrap). - Added search functionality and card-grid layout to Address and Contact management lists. - Modernized detail pages for Addresses and Contacts with standardized headers and iconography. - Unified form padding (p-3 for inputs, p-2 for selects) across all Core modules. - Fixed variable hoisting and missing icon imports in Address components.
This commit is contained in:
@@ -83,20 +83,22 @@
|
||||
<div class="flex flex-wrap gap-6 items-end">
|
||||
<div class="flex-1 min-w-[280px] space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Users</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] variant-filled-surface rounded-lg overflow-hidden border border-surface-500/20 shadow-inner">
|
||||
<div class="input-group-shim !px-4"><Search size={18} class="opacity-50" /></div>
|
||||
<div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
|
||||
<div class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
|
||||
<Search size={18} class="opacity-50" />
|
||||
</div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 p-3"
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 p-3 grow placeholder:opacity-50"
|
||||
type="search"
|
||||
bind:value={qry_str}
|
||||
placeholder="Search username or email..."
|
||||
onkeydown={(e) => e.key === 'Enter' && load_users()}
|
||||
/>
|
||||
<button class="variant-filled-primary font-bold px-8 hover:brightness-110 transition-all border-l border-surface-500/20" onclick={load_users} disabled={loading}>
|
||||
<button class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_users} disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="animate-spin mr-1">⏳</span>
|
||||
<span class="animate-spin text-xl">⏳</span>
|
||||
{:else}
|
||||
Go
|
||||
<span class="whitespace-nowrap tracking-wide">Go</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user