Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(core): standardized search UI and improved form padding

Browse Source 
- Standardized User Management search to match People Management style.
- Added 'p-3' padding to main search inputs and 'p-2' to selects for better visual clarity.
- Improved search icon spacing with enhanced shim padding (!px-4).
- Applied consistent padding enhancements to Account, Site, and User detail pages.
- Standardized 'Go' button prominence across search sections.
This commit is contained in:
Scott Idem
2026-01-15 18:01:52 -05:00
parent 39d0707968
commit b2f695c846
5 changed files with 52 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/routes/core/users/+page.svelte
View File

@@ -84,15 +84,15 @@
<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"><Search size={18} class="opacity-50" /></div>
<div class="input-group-shim !px-4"><Search size={18} class="opacity-50" /></div>
<input
class="bg-transparent border-0 ring-0 focus:ring-0 p-2"
class="bg-transparent border-0 ring-0 focus:ring-0 p-3"
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-6 hover:brightness-110 transition-all" onclick={load_users} disabled={loading}>
<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}>
{#if loading}
<span class="animate-spin mr-1">⏳</span>
{:else}

8
src/routes/core/users/[user_id]/+page.svelte
View File

@@ -114,17 +114,17 @@
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Display Name</label>
<input class="input variant-filled-surface rounded-lg" type="text" bind:value={user.name} placeholder="Full Name" />
<input class="input variant-filled-surface rounded-lg p-2" type="text" bind:value={user.name} placeholder="Full Name" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Email Address</label>
<input class="input variant-filled-surface rounded-lg" type="email" bind:value={user.email} />
<input class="input variant-filled-surface rounded-lg p-2" type="email" bind:value={user.email} />
</div>
<div class="space-y-1 md:col-span-2">
<label class="label text-xs font-bold opacity-75">Username</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-soft rounded-lg overflow-hidden border border-surface-500/20">
<div class="input-group-shim"><Fingerprint size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 font-mono opacity-60" type="text" bind:value={user.username} disabled />
<div class="input-group-shim !pl-4 !pr-0"><Fingerprint size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 font-mono opacity-60 p-2" type="text" bind:value={user.username} disabled />
</div>
<p class="text-[10px] opacity-50 mt-1 italic uppercase tracking-tighter">Username changes are currently restricted.</p>
</div>