Now even prettier with the new Tailwind CSS plugin. Probably should have done this long ago...
This commit is contained in:
Scott Idem
@@ -59,11 +59,11 @@ onMount(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<div class="container mx-auto space-y-6 p-4">
|
||||
<header
|
||||
class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
class="bg-surface-50-900-token border-surface-500/10 flex items-center justify-between rounded-xl border p-4 shadow-lg">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<div class="bg-primary-500/10 rounded-lg p-2">
|
||||
<Phone size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<h1 class="h2 font-black tracking-tight">Contact Management</h1>
|
||||
@@ -94,30 +94,30 @@ onMount(() => {
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
class="card preset-tonal-surface border-surface-500/10 border p-6 shadow-xl">
|
||||
<div class="max-w-2xl space-y-1">
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
class="label ml-1 block text-xs font-bold tracking-wider uppercase opacity-75"
|
||||
>Search Directory</span>
|
||||
<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">
|
||||
class="bg-surface-200-700-token border-surface-500/20 group focus-within:ring-primary-500/50 flex overflow-hidden rounded-lg border shadow-inner transition-all focus-within:ring-2">
|
||||
<div
|
||||
class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
|
||||
class="bg-surface-300-600-token border-surface-500/20 flex items-center justify-center border-r px-4">
|
||||
<Search size={18} class="opacity-50" />
|
||||
</div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 p-3 grow placeholder:opacity-50"
|
||||
class="grow border-0 bg-transparent p-3 ring-0 placeholder:opacity-50 focus:ring-0"
|
||||
type="search"
|
||||
bind:value={qry_str}
|
||||
placeholder="Search by name, title, email, or phone..." />
|
||||
<button
|
||||
class="preset-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]"
|
||||
class="preset-filled-primary border-surface-500/20 flex min-w-[100px] items-center justify-center border-l px-10 py-3 font-bold transition-all hover:brightness-110"
|
||||
onclick={load_contacts}
|
||||
disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="animate-spin text-xl">⏳</span>
|
||||
{:else}
|
||||
<span class="whitespace-nowrap tracking-wide"
|
||||
<span class="tracking-wide whitespace-nowrap"
|
||||
>Refresh</span>
|
||||
{/if}
|
||||
</button>
|
||||
@@ -126,54 +126,54 @@ onMount(() => {
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="card p-8 flex justify-center items-center h-64">
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl">
|
||||
<div class="card flex h-64 items-center justify-center p-8">
|
||||
<div class="placeholder h-full w-full animate-pulse rounded-2xl">
|
||||
</div>
|
||||
</div>
|
||||
{:else if filtered_li.length === 0}
|
||||
<div
|
||||
class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
class="card preset-tonal-surface border-surface-500/20 rounded-2xl border-2 border-dashed p-12 text-center">
|
||||
<Contact size={48} class="mx-auto mb-4 opacity-20" />
|
||||
<h3 class="h3 font-bold opacity-50">No Contacts Found</h3>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">
|
||||
<p class="mx-auto mt-2 max-w-xs opacity-60">
|
||||
Business and support contacts will appear here.
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
class="card preset-tonal-surface border-surface-500/10 border p-6 shadow-xl">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
|
||||
class="h4 border-surface-500/30 mb-6 flex items-center gap-2 border-b pb-2 font-bold">
|
||||
<ListFilter size={18} class="text-secondary-500" />
|
||||
Directory Results
|
||||
<span class="badge preset-tonal-secondary ml-auto"
|
||||
>{filtered_li.length} entries</span>
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each filtered_li as con (con.contact_id_random)}
|
||||
<div
|
||||
class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
|
||||
class="card preset-tonal-surface border-surface-500/10 hover:border-primary-500/30 group relative space-y-4 border p-5 shadow-md transition-all">
|
||||
<div class="absolute top-4 right-4">
|
||||
<span
|
||||
class="badge {con.enable
|
||||
? 'preset-filled-success'
|
||||
: 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
: 'preset-filled-error'} text-[8px] font-bold uppercase shadow-sm">
|
||||
{con.enable ? 'Active' : 'Disabled'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<header class="flex items-center gap-3">
|
||||
<div
|
||||
class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
|
||||
class="avatar preset-filled-primary flex h-12 w-12 items-center justify-center rounded-full shadow-inner transition-transform group-hover:scale-110">
|
||||
<User size={24} />
|
||||
</div>
|
||||
<div class="pr-12">
|
||||
<p class="font-black tracking-tight truncate">
|
||||
<p class="truncate font-black tracking-tight">
|
||||
{con.name || con.title || '--'}
|
||||
</p>
|
||||
<p
|
||||
class="text-[10px] uppercase font-bold opacity-50 truncate">
|
||||
class="truncate text-[10px] font-bold uppercase opacity-50">
|
||||
{con.title || 'Support Contact'}
|
||||
</p>
|
||||
</div>
|
||||
@@ -181,7 +181,7 @@ onMount(() => {
|
||||
|
||||
<div class="space-y-2 text-xs opacity-70">
|
||||
<div
|
||||
class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
class="flex items-center gap-2 rounded-lg bg-black/5 p-2">
|
||||
<Mail
|
||||
size={14}
|
||||
class="text-primary-500 shrink-0" />
|
||||
@@ -189,7 +189,7 @@ onMount(() => {
|
||||
>{con.email || 'No Email'}</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
class="flex items-center gap-2 rounded-lg bg-black/5 p-2">
|
||||
<Phone
|
||||
size={14}
|
||||
class="text-secondary-500 shrink-0" />
|
||||
@@ -201,7 +201,7 @@ onMount(() => {
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all"
|
||||
class="btn btn-sm preset-filled-primary w-full font-bold shadow-lg transition-all group-hover:brightness-110"
|
||||
href="/core/contacts/{con.contact_id_random}">
|
||||
Manage Contact
|
||||
</a>
|
||||
|
||||
@@ -63,9 +63,9 @@ async function handle_delete() {
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<div class="container mx-auto space-y-6 p-4">
|
||||
<header
|
||||
class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
|
||||
class="bg-surface-50-900-token border-surface-500/10 flex flex-wrap items-center justify-between gap-4 rounded-xl border p-4 shadow-lg">
|
||||
<div class="flex items-center gap-4">
|
||||
<a
|
||||
class="btn btn-sm preset-tonal-surface shadow-sm"
|
||||
@@ -73,7 +73,7 @@ async function handle_delete() {
|
||||
<ArrowLeft size={16} />
|
||||
</a>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<div class="bg-primary-500/10 rounded-lg p-2">
|
||||
<UserRound size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -81,7 +81,7 @@ async function handle_delete() {
|
||||
{contact?.name || contact?.title || 'Loading...'}
|
||||
</h1>
|
||||
<p
|
||||
class="text-xs font-bold opacity-50 uppercase tracking-widest">
|
||||
class="text-xs font-bold tracking-widest uppercase opacity-50">
|
||||
Contact Detail
|
||||
</p>
|
||||
</div>
|
||||
@@ -108,8 +108,8 @@ async function handle_delete() {
|
||||
</header>
|
||||
|
||||
{#if loading}
|
||||
<div class="card p-8 flex justify-center items-center h-64">
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl">
|
||||
<div class="card flex h-64 items-center justify-center p-8">
|
||||
<div class="placeholder h-full w-full animate-pulse rounded-2xl">
|
||||
</div>
|
||||
</div>
|
||||
{:else if contact}
|
||||
@@ -124,29 +124,29 @@ async function handle_delete() {
|
||||
onCancel={() => (is_editing = false)} />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-fade-in">
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<div class="animate-fade-in grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
<div class="space-y-6 lg:col-span-2">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
|
||||
class="card preset-tonal-surface border-surface-500/10 space-y-6 border p-6 shadow-xl">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
class="h4 border-surface-500/30 flex items-center gap-2 border-b pb-2 font-bold">
|
||||
<Contact size={20} class="text-primary-500" />
|
||||
Core Information
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div class="space-y-1">
|
||||
<p
|
||||
class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
class="flex items-center gap-1 text-[10px] font-black tracking-widest uppercase opacity-60">
|
||||
<UserRound size={10} /> Full Name / Title
|
||||
</p>
|
||||
<p
|
||||
class="text-lg font-black tracking-tight leading-tight">
|
||||
class="text-lg leading-tight font-black tracking-tight">
|
||||
{contact.name || contact.title || '--'}
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p
|
||||
class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
class="flex items-center gap-1 text-[10px] font-black tracking-widest uppercase opacity-60">
|
||||
<Activity size={10} /> Tagline / Role
|
||||
</p>
|
||||
<p class="font-bold">
|
||||
@@ -154,19 +154,19 @@ async function handle_delete() {
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="space-y-1 bg-black/5 p-4 rounded-xl border border-surface-500/10">
|
||||
class="border-surface-500/10 space-y-1 rounded-xl border bg-black/5 p-4">
|
||||
<p
|
||||
class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
class="flex items-center gap-1 text-[10px] font-black tracking-widest uppercase opacity-60">
|
||||
<Mail size={10} /> Email Address
|
||||
</p>
|
||||
<p class="font-bold text-primary-500 break-all">
|
||||
<p class="text-primary-500 font-bold break-all">
|
||||
{contact.email || '--'}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="space-y-1 bg-black/5 p-4 rounded-xl border border-surface-500/10">
|
||||
class="border-surface-500/10 space-y-1 rounded-xl border bg-black/5 p-4">
|
||||
<p
|
||||
class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
class="flex items-center gap-1 text-[10px] font-black tracking-widest uppercase opacity-60">
|
||||
<Globe size={10} /> Website
|
||||
</p>
|
||||
{#if contact.website_url}
|
||||
@@ -174,7 +174,7 @@ async function handle_delete() {
|
||||
href={contact.website_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="font-bold text-secondary-500 hover:underline flex items-center gap-2 truncate">
|
||||
class="text-secondary-500 flex items-center gap-2 truncate font-bold hover:underline">
|
||||
{contact.website_url}
|
||||
<Link2 size={12} />
|
||||
</a>
|
||||
@@ -186,16 +186,16 @@ async function handle_delete() {
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
|
||||
class="card preset-tonal-surface border-surface-500/10 space-y-6 border p-6 shadow-xl">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
class="h4 border-surface-500/30 flex items-center gap-2 border-b pb-2 font-bold">
|
||||
<Phone size={20} class="text-secondary-500" />
|
||||
Communication & Social
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div class="space-y-1">
|
||||
<p
|
||||
class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
class="flex items-center gap-1 text-[10px] font-black tracking-widest uppercase opacity-60">
|
||||
<Phone size={10} /> Mobile Phone
|
||||
</p>
|
||||
<p class="font-mono font-bold">
|
||||
@@ -206,7 +206,7 @@ async function handle_delete() {
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p
|
||||
class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
class="flex items-center gap-1 text-[10px] font-black tracking-widest uppercase opacity-60">
|
||||
<Phone size={10} /> Office Phone
|
||||
</p>
|
||||
<p class="font-mono font-bold">
|
||||
@@ -215,20 +215,20 @@ async function handle_delete() {
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p
|
||||
class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
class="flex items-center gap-1 text-[10px] font-black tracking-widest uppercase opacity-60">
|
||||
<Linkedin size={10} /> LinkedIn
|
||||
</p>
|
||||
<p class="font-bold truncate">
|
||||
<p class="truncate font-bold">
|
||||
{contact.linkedin_url || '--'}
|
||||
</p>
|
||||
</div>
|
||||
<div class="md:col-span-2 space-y-2">
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<p
|
||||
class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
class="flex items-center gap-1 text-[10px] font-black tracking-widest uppercase opacity-60">
|
||||
<Info size={10} /> Internal Notes
|
||||
</p>
|
||||
<div
|
||||
class="p-4 bg-black/5 rounded-xl border border-dashed border-surface-500/20 italic opacity-80 min-h-[80px]">
|
||||
class="border-surface-500/20 min-h-[80px] rounded-xl border border-dashed bg-black/5 p-4 italic opacity-80">
|
||||
{contact.notes ||
|
||||
'No internal notes provided for this contact.'}
|
||||
</div>
|
||||
@@ -239,15 +239,15 @@ async function handle_delete() {
|
||||
|
||||
<div class="space-y-6">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
|
||||
class="card preset-tonal-surface border-surface-500/10 space-y-6 border p-6 shadow-xl">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
class="h4 border-surface-500/30 flex items-center gap-2 border-b pb-2 font-bold">
|
||||
<ShieldCheck size={20} class="text-warning-500" />
|
||||
Status & Flags
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
|
||||
class="flex items-center justify-between rounded-lg bg-black/5 p-3">
|
||||
<span class="text-sm font-bold opacity-75"
|
||||
>Enabled</span>
|
||||
<span
|
||||
@@ -258,7 +258,7 @@ async function handle_delete() {
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
|
||||
class="flex items-center justify-between rounded-lg bg-black/5 p-3">
|
||||
<span class="text-sm font-bold opacity-75"
|
||||
>Hidden</span>
|
||||
<span
|
||||
@@ -269,7 +269,7 @@ async function handle_delete() {
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
|
||||
class="flex items-center justify-between rounded-lg bg-black/5 p-3">
|
||||
<span class="text-sm font-bold opacity-75"
|
||||
>Priority</span>
|
||||
<span
|
||||
@@ -283,12 +283,12 @@ async function handle_delete() {
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="card p-5 preset-tonal-surface shadow-inner border border-surface-500/10 space-y-3">
|
||||
class="card preset-tonal-surface border-surface-500/10 space-y-3 border p-5 shadow-inner">
|
||||
<p
|
||||
class="text-[10px] uppercase font-black opacity-40 tracking-widest border-b border-surface-500/20 pb-1">
|
||||
class="border-surface-500/20 border-b pb-1 text-[10px] font-black tracking-widest uppercase opacity-40">
|
||||
System Audit
|
||||
</p>
|
||||
<div class="space-y-2 text-[10px] font-mono opacity-60">
|
||||
<div class="space-y-2 font-mono text-[10px] opacity-60">
|
||||
<p class="flex justify-between">
|
||||
<span>ID:</span>
|
||||
<span class="text-primary-500 font-bold"
|
||||
|
||||
@@ -119,9 +119,9 @@ async function handleSubmit(event: Event) {
|
||||
|
||||
<form
|
||||
onsubmit={handleSubmit}
|
||||
class="card p-6 space-y-6 shadow-xl preset-tonal-surface">
|
||||
class="card preset-tonal-surface space-y-6 p-6 shadow-xl">
|
||||
<header
|
||||
class="flex justify-between items-center border-b border-surface-500/30 pb-4">
|
||||
class="border-surface-500/30 flex items-center justify-between border-b pb-4">
|
||||
<h3 class="h3 flex items-center gap-2">
|
||||
<UserPlus size={24} />
|
||||
{contact ? 'Edit Contact' : 'Create New Contact'}
|
||||
@@ -140,7 +140,7 @@ async function handleSubmit(event: Event) {
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
disabled={is_loading}>
|
||||
{#if is_loading}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
<span class="mr-2 animate-spin">⏳</span>
|
||||
{:else}
|
||||
<Save size={16} class="mr-1" />
|
||||
{/if}
|
||||
@@ -157,11 +157,11 @@ async function handleSubmit(event: Event) {
|
||||
</aside>
|
||||
{/if}
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<!-- Identity Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend
|
||||
class="text-sm font-bold uppercase tracking-widest opacity-60"
|
||||
class="text-sm font-bold tracking-widest uppercase opacity-60"
|
||||
>Identity & Branding</legend>
|
||||
|
||||
<div class="space-y-1">
|
||||
@@ -169,7 +169,7 @@ async function handleSubmit(event: Event) {
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-title">Title / Name</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
class="input preset-filled-surface placeholder-surface-400 rounded-lg p-2"
|
||||
id="contact-title"
|
||||
type="text"
|
||||
bind:value={formData.title}
|
||||
@@ -182,7 +182,7 @@ async function handleSubmit(event: Event) {
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-tagline">Tagline</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
class="input preset-filled-surface placeholder-surface-400 rounded-lg p-2"
|
||||
id="contact-tagline"
|
||||
type="text"
|
||||
bind:value={formData.tagline}
|
||||
@@ -194,10 +194,10 @@ async function handleSubmit(event: Event) {
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-email">Email Address</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
class="input-group input-group-divider preset-filled-surface grid-cols-[auto_1fr] overflow-hidden rounded-lg">
|
||||
<div class="input-group-shim"><Mail size={16} /></div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
class="placeholder-surface-400 border-0 bg-transparent p-2 ring-0 focus:ring-0"
|
||||
id="contact-email"
|
||||
type="email"
|
||||
bind:value={formData.email}
|
||||
@@ -209,7 +209,7 @@ async function handleSubmit(event: Event) {
|
||||
<!-- Communication Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend
|
||||
class="text-sm font-bold uppercase tracking-widest opacity-60"
|
||||
class="text-sm font-bold tracking-widest uppercase opacity-60"
|
||||
>Phone & Web</legend>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
@@ -218,10 +218,10 @@ async function handleSubmit(event: Event) {
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-phone-mobile">Mobile Phone</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
class="input-group input-group-divider preset-filled-surface grid-cols-[auto_1fr] overflow-hidden rounded-lg">
|
||||
<div class="input-group-shim"><Phone size={16} /></div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
class="placeholder-surface-400 border-0 bg-transparent p-2 ring-0 focus:ring-0"
|
||||
id="contact-phone-mobile"
|
||||
type="tel"
|
||||
bind:value={formData.phone_mobile}
|
||||
@@ -233,10 +233,10 @@ async function handleSubmit(event: Event) {
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-phone-office">Office Phone</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
class="input-group input-group-divider preset-filled-surface grid-cols-[auto_1fr] overflow-hidden rounded-lg">
|
||||
<div class="input-group-shim"><Phone size={16} /></div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
class="placeholder-surface-400 border-0 bg-transparent p-2 ring-0 focus:ring-0"
|
||||
id="contact-phone-office"
|
||||
type="tel"
|
||||
bind:value={formData.phone_office}
|
||||
@@ -250,10 +250,10 @@ async function handleSubmit(event: Event) {
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-website">Website URL</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
class="input-group input-group-divider preset-filled-surface grid-cols-[auto_1fr] overflow-hidden rounded-lg">
|
||||
<div class="input-group-shim"><Globe size={16} /></div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
class="placeholder-surface-400 border-0 bg-transparent p-2 ring-0 focus:ring-0"
|
||||
id="contact-website"
|
||||
type="url"
|
||||
bind:value={formData.website_url}
|
||||
@@ -265,7 +265,7 @@ async function handleSubmit(event: Event) {
|
||||
<!-- Social Media Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend
|
||||
class="text-sm font-bold uppercase tracking-widest opacity-60"
|
||||
class="text-sm font-bold tracking-widest uppercase opacity-60"
|
||||
>Social Media</legend>
|
||||
|
||||
<div class="space-y-1">
|
||||
@@ -273,10 +273,10 @@ async function handleSubmit(event: Event) {
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-linkedin">LinkedIn URL</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
class="input-group input-group-divider preset-filled-surface grid-cols-[auto_1fr] overflow-hidden rounded-lg">
|
||||
<div class="input-group-shim"><Linkedin size={16} /></div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
class="placeholder-surface-400 border-0 bg-transparent p-2 ring-0 focus:ring-0"
|
||||
id="contact-linkedin"
|
||||
type="url"
|
||||
bind:value={formData.linkedin_url}
|
||||
@@ -290,12 +290,12 @@ async function handleSubmit(event: Event) {
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-facebook">Facebook URL</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
class="input-group input-group-divider preset-filled-surface grid-cols-[auto_1fr] overflow-hidden rounded-lg">
|
||||
<div class="input-group-shim">
|
||||
<Facebook size={16} />
|
||||
</div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
class="placeholder-surface-400 border-0 bg-transparent p-2 ring-0 focus:ring-0"
|
||||
id="contact-facebook"
|
||||
type="url"
|
||||
bind:value={formData.facebook_url}
|
||||
@@ -307,12 +307,12 @@ async function handleSubmit(event: Event) {
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-instagram">Instagram URL</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
|
||||
class="input-group input-group-divider preset-filled-surface grid-cols-[auto_1fr] overflow-hidden rounded-lg">
|
||||
<div class="input-group-shim">
|
||||
<Instagram size={16} />
|
||||
</div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
|
||||
class="placeholder-surface-400 border-0 bg-transparent p-2 ring-0 focus:ring-0"
|
||||
id="contact-instagram"
|
||||
type="url"
|
||||
bind:value={formData.instagram_url}
|
||||
@@ -325,25 +325,25 @@ async function handleSubmit(event: Event) {
|
||||
<!-- Status Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend
|
||||
class="text-sm font-bold uppercase tracking-widest opacity-60"
|
||||
class="text-sm font-bold tracking-widest uppercase opacity-60"
|
||||
>Status</legend>
|
||||
|
||||
<div class="flex flex-wrap gap-4 pt-2">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<label class="flex cursor-pointer items-center space-x-2">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={formData.enable} />
|
||||
<span class="text-sm font-medium">Enabled</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<label class="flex cursor-pointer items-center space-x-2">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={formData.hide} />
|
||||
<span class="text-sm font-medium">Hidden</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<label class="flex cursor-pointer items-center space-x-2">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
@@ -357,7 +357,7 @@ async function handleSubmit(event: Event) {
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="contact-notes">Internal Notes</label>
|
||||
<textarea
|
||||
class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2"
|
||||
class="textarea preset-filled-surface placeholder-surface-400 rounded-lg p-2"
|
||||
id="contact-notes"
|
||||
rows="2"
|
||||
bind:value={formData.notes}
|
||||
@@ -366,13 +366,13 @@ async function handleSubmit(event: Event) {
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
|
||||
<footer class="border-surface-500/30 flex justify-end gap-2 border-t pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn preset-filled-primary font-bold shadow-lg w-full md:w-auto"
|
||||
class="btn preset-filled-primary w-full font-bold shadow-lg md:w-auto"
|
||||
disabled={is_loading}>
|
||||
{#if is_loading}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
<span class="mr-2 animate-spin">⏳</span>
|
||||
{/if}
|
||||
{contact ? 'Update Contact Record' : 'Create Contact Record'}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user