feat(core): standardized search UI and improved form padding
- 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
@@ -5,7 +5,7 @@
|
||||
import { editable_fields__account } from '$lib/ae_core/ae_core__account.editable_fields';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Save, Trash2, ArrowLeft, Building } from 'lucide-svelte';
|
||||
import { Save, Trash2, ArrowLeft, Building, Settings, Activity, Info } from 'lucide-svelte';
|
||||
|
||||
let account_id = $page.params.account_id;
|
||||
let account: any = $state(null);
|
||||
@@ -105,64 +105,64 @@
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<span class="text-primary-500">◆</span> Basic Information
|
||||
<Info size={18} class="text-primary-500" /> Basic Information
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Account Name</label>
|
||||
<input class="input variant-filled-surface rounded-lg p-2" type="text" bind:value={account.name} />
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Name</label>
|
||||
<input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={account.name} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Short Name</label>
|
||||
<input class="input variant-filled-surface rounded-lg p-2" type="text" bind:value={account.short_name} />
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Short Name</label>
|
||||
<input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={account.short_name} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Account Code</label>
|
||||
<input class="input variant-filled-surface rounded-lg font-mono p-2" type="text" bind:value={account.code} />
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Code</label>
|
||||
<input class="input variant-filled-surface rounded-lg font-mono p-3" type="text" bind:value={account.code} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Description</label>
|
||||
<textarea class="textarea variant-filled-surface rounded-lg p-2" rows="3" bind:value={account.description}></textarea>
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Description</label>
|
||||
<textarea class="textarea variant-filled-surface rounded-lg p-3" rows="3" bind:value={account.description}></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<span class="text-secondary-500">◆</span> Settings & Status
|
||||
<Settings size={18} class="text-secondary-500" /> Settings & Status
|
||||
</h3>
|
||||
<div class="flex flex-col gap-4 py-2">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={account.enable} />
|
||||
<span class="text-sm font-medium">Enabled</span>
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Enabled</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={account.hide} />
|
||||
<span class="text-sm font-medium">Hidden</span>
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Hidden</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={account.priority} />
|
||||
<span class="text-sm font-medium">Priority Account</span>
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Priority Account</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="space-y-4 border-t border-surface-500/30 pt-4">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Group</label>
|
||||
<input class="input variant-filled-surface rounded-lg p-2" type="text" bind:value={account.group} />
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Group</label>
|
||||
<input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={account.group} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Sort Order</label>
|
||||
<input class="input variant-filled-surface rounded-lg p-2" type="number" bind:value={account.sort} />
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Sort Order</label>
|
||||
<input class="input variant-filled-surface rounded-lg p-3" type="number" bind:value={account.sort} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 md:col-span-2 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<span class="text-tertiary-500">◆</span> Internal Notes
|
||||
<Activity size={18} class="text-tertiary-500" /> Internal Notes
|
||||
</h3>
|
||||
<div class="space-y-1">
|
||||
<textarea class="textarea variant-filled-surface rounded-lg p-2" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
|
||||
<textarea class="textarea variant-filled-surface rounded-lg p-3" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -47,15 +47,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 People</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"
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 p-3"
|
||||
type="search"
|
||||
bind:value={qry_str}
|
||||
placeholder="Search by name, email, or ID..."
|
||||
onkeydown={(e) => e.key === 'Enter' && handle_search()}
|
||||
/>
|
||||
<button class="variant-filled-primary font-bold px-6 hover:brightness-110 transition-all" onclick={handle_search} disabled={loading}>
|
||||
<button class="variant-filled-primary font-bold px-8 hover:brightness-110 transition-all border-l border-surface-500/20" onclick={handle_search} disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="animate-spin mr-1">⏳</span>
|
||||
{:else}
|
||||
@@ -68,7 +68,7 @@
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Status</label>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20" bind:value={qry_enabled} onchange={handle_search}>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={handle_search}>
|
||||
<option value="all">All Records</option>
|
||||
<option value="enabled">Enabled Only</option>
|
||||
<option value="not_enabled">Disabled Only</option>
|
||||
@@ -77,7 +77,7 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</label>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20" bind:value={qry_hidden} onchange={handle_search}>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={handle_search}>
|
||||
<option value="all">All Visible</option>
|
||||
<option value="not_hidden">Publicly Visible</option>
|
||||
<option value="hidden">System Hidden</option>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
import { editable_fields__site_domain } from '$lib/ae_core/ae_core__site_domain.editable_fields';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Save, Trash2, ArrowLeft, Globe, Plus, ExternalLink, Key, Settings, Activity } from 'lucide-svelte';
|
||||
import { Save, Trash2, ArrowLeft, Globe, Plus, ExternalLink, Key, Settings, Activity, Info } from 'lucide-svelte';
|
||||
|
||||
let site_id = $page.params.site_id;
|
||||
let site: any = $state(null);
|
||||
@@ -139,20 +139,20 @@
|
||||
</h3>
|
||||
<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">Site Name</label>
|
||||
<input class="input variant-filled-surface rounded-lg" type="text" bind:value={site.name} />
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Site Name</label>
|
||||
<input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={site.name} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Site Code</label>
|
||||
<input class="input variant-filled-surface rounded-lg font-mono" type="text" bind:value={site.code} />
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Site Code</label>
|
||||
<input class="input variant-filled-surface rounded-lg font-mono p-3" type="text" bind:value={site.code} />
|
||||
</div>
|
||||
<div class="space-y-1 md:col-span-2">
|
||||
<label class="label text-xs font-bold opacity-75">Tagline</label>
|
||||
<input class="input variant-filled-surface rounded-lg" type="text" bind:value={site.tagline} />
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Tagline</label>
|
||||
<input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={site.tagline} />
|
||||
</div>
|
||||
<div class="space-y-1 md:col-span-2">
|
||||
<label class="label text-xs font-bold opacity-75">Description</label>
|
||||
<textarea class="textarea variant-filled-surface rounded-lg" rows="2" bind:value={site.description}></textarea>
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Description</label>
|
||||
<textarea class="textarea variant-filled-surface rounded-lg p-3" rows="2" bind:value={site.description}></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -162,14 +162,14 @@
|
||||
<Key size={18} class="text-secondary-500" /> Access Control
|
||||
</h3>
|
||||
<div class="flex flex-col gap-4">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<label class="flex items-center space-x-2 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={site.restrict_access} />
|
||||
<span class="text-sm font-medium">Restrict Access</span>
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Restrict Access</span>
|
||||
</label>
|
||||
{#if site.restrict_access}
|
||||
<div class="space-y-1 max-w-md animate-fade-in">
|
||||
<label class="label text-xs font-bold opacity-75">Access Key</label>
|
||||
<input class="input variant-filled-surface rounded-lg font-mono" type="text" bind:value={site.access_key} />
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Access Key</label>
|
||||
<input class="input variant-filled-surface rounded-lg font-mono p-3" type="text" bind:value={site.access_key} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -224,13 +224,13 @@
|
||||
<Activity size={18} class="text-error-500" /> System Status
|
||||
</h3>
|
||||
<div class="space-y-4 py-2">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={site.enable} />
|
||||
<span class="text-sm font-medium">Site Enabled</span>
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Site Enabled</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={site.hide} />
|
||||
<span class="text-sm font-medium">Hidden from Public</span>
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Hidden from Public</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user