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

a11y + CSS cleanup: fix label associations, remove orphaned style blocks, suppress autofocus

Browse Source 
- Add for/id to all form label+input pairs: person, address, contact, users pages
- Convert decorative section-header <label> elements to <p> in launcher cfg files
- Add for/id to dynamic labels in leads custom questions, badges review form
- Change non-form <label> wrappers for custom editors to <div>/<p>
- Remove orphaned <style> blocks (ae_quick_modal_container/ae_quick_popover) from
  people/[person_id]/+page.svelte and location_view.svelte

Result: 95 warnings -> 26 warnings (remaining are lu_* false positives + 1 legacy CSS)
This commit is contained in:
Scott Idem
2026-03-05 21:28:16 -05:00
parent b766942373
commit 609818c361
21 changed files with 154 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/routes/core/addresses/ae_comp__address_form.svelte
View File

@@ -148,28 +148,28 @@
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Location Details</legend>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Attention To / Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.attention_to} placeholder="John Doe" />
<label class="label text-xs font-bold opacity-75" for="addr-attention-to">Attention To / Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-attention-to" type="text" bind:value={formData.attention_to} placeholder="John Doe" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Organization Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.organization_name} placeholder="Acme Corp" />
<label class="label text-xs font-bold opacity-75" for="addr-org-name">Organization Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-org-name" type="text" bind:value={formData.organization_name} placeholder="Acme Corp" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Address Line 1</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.line_1} required placeholder="123 Main St" />
<label class="label text-xs font-bold opacity-75" for="addr-line-1">Address Line 1</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-1" type="text" bind:value={formData.line_1} required placeholder="123 Main St" />
</div>
<div class="grid grid-cols-2 gap-2">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Line 2</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.line_2} placeholder="Suite 100" />
<label class="label text-xs font-bold opacity-75" for="addr-line-2">Line 2</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-2" type="text" bind:value={formData.line_2} placeholder="Suite 100" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Line 3</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
<label class="label text-xs font-bold opacity-75" for="addr-line-3">Line 3</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-3" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
</div>
</div>
</fieldset>
@@ -180,25 +180,25 @@
<div class="grid grid-cols-2 gap-2">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">City</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.city} required placeholder="Metropolis" />
<label class="label text-xs font-bold opacity-75" for="addr-city">City</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-city" type="text" bind:value={formData.city} required placeholder="Metropolis" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">State / Province</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.state_province} placeholder="NY" />
<label class="label text-xs font-bold opacity-75" for="addr-state">State / Province</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-state" type="text" bind:value={formData.state_province} placeholder="NY" />
</div>
</div>
<div class="grid grid-cols-2 gap-2">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Postal Code</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.postal_code} placeholder="12345" />
<label class="label text-xs font-bold opacity-75" for="addr-postal">Postal Code</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-postal" type="text" bind:value={formData.postal_code} placeholder="12345" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Country (Code)</label>
<label class="label text-xs font-bold opacity-75" for="addr-country">Country (Code)</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<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" type="text" bind:value={formData.country} placeholder="USA" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-country" type="text" bind:value={formData.country} placeholder="USA" />
</div>
</div>
</div>
@@ -209,26 +209,26 @@
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Technical & GIS</legend>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Timezone</label>
<label class="label text-xs font-bold opacity-75" for="addr-timezone">Timezone</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Clock size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.timezone} placeholder="America/New_York" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-timezone" type="text" bind:value={formData.timezone} placeholder="America/New_York" />
</div>
</div>
<div class="grid grid-cols-2 gap-2">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Latitude</label>
<label class="label text-xs font-bold opacity-75" for="addr-latitude">Latitude</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Navigation size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.latitude} placeholder="40.7128" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-latitude" type="text" bind:value={formData.latitude} placeholder="40.7128" />
</div>
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Longitude</label>
<label class="label text-xs font-bold opacity-75" for="addr-longitude">Longitude</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Navigation size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.longitude} placeholder="-74.0060" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-longitude" type="text" bind:value={formData.longitude} placeholder="-74.0060" />
</div>
</div>
</div>
@@ -254,8 +254,8 @@
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Internal Notes</label>
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" rows="2" bind:value={formData.notes} placeholder="Notes about this address..."></textarea>
<label class="label text-xs font-bold opacity-75" for="addr-notes">Internal Notes</label>
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-notes" rows="2" bind:value={formData.notes} placeholder="Notes about this address..."></textarea>
</div>
</fieldset>
</div>

48
src/routes/core/contacts/ae_comp__contact_form.svelte
View File

@@ -140,22 +140,22 @@
<!-- Identity Section -->
<fieldset class="space-y-4">
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Identity & Branding</legend>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Title / Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.title} required placeholder="Business Office" />
<label class="label text-xs font-bold opacity-75" for="contact-title">Title / Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-title" type="text" bind:value={formData.title} required placeholder="Business Office" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Tagline</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
<label class="label text-xs font-bold opacity-75" for="contact-tagline">Tagline</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-tagline" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Email Address</label>
<label 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] variant-filled-surface rounded-lg overflow-hidden">
<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" type="email" bind:value={formData.email} placeholder="contact@example.com" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-email" type="email" bind:value={formData.email} placeholder="contact@example.com" />
</div>
</div>
</fieldset>
@@ -163,29 +163,29 @@
<!-- Communication Section -->
<fieldset class="space-y-4">
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Phone & Web</legend>
<div class="grid grid-cols-2 gap-2">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Mobile Phone</label>
<label 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] variant-filled-surface rounded-lg overflow-hidden">
<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" type="tel" bind:value={formData.phone_mobile} placeholder="+1..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-phone-mobile" type="tel" bind:value={formData.phone_mobile} placeholder="+1..." />
</div>
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Office Phone</label>
<label 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] variant-filled-surface rounded-lg overflow-hidden">
<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" type="tel" bind:value={formData.phone_office} placeholder="+1..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-phone-office" type="tel" bind:value={formData.phone_office} placeholder="+1..." />
</div>
</div>
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Website URL</label>
<label 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] variant-filled-surface rounded-lg overflow-hidden">
<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" type="url" bind:value={formData.website_url} placeholder="https://..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-website" type="url" bind:value={formData.website_url} placeholder="https://..." />
</div>
</div>
</fieldset>
@@ -193,28 +193,28 @@
<!-- Social Media Section -->
<fieldset class="space-y-4">
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Social Media</legend>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">LinkedIn URL</label>
<label 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] variant-filled-surface rounded-lg overflow-hidden">
<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" type="url" bind:value={formData.linkedin_url} placeholder="https://linkedin.com/in/..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-linkedin" type="url" bind:value={formData.linkedin_url} placeholder="https://linkedin.com/in/..." />
</div>
</div>
<div class="grid grid-cols-2 gap-2">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Facebook URL</label>
<label 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] variant-filled-surface rounded-lg overflow-hidden">
<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" type="url" bind:value={formData.facebook_url} placeholder="https://facebook.com/..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-facebook" type="url" bind:value={formData.facebook_url} placeholder="https://facebook.com/..." />
</div>
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Instagram URL</label>
<label 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] variant-filled-surface rounded-lg overflow-hidden">
<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" type="url" bind:value={formData.instagram_url} placeholder="https://instagram.com/..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-instagram" type="url" bind:value={formData.instagram_url} placeholder="https://instagram.com/..." />
</div>
</div>
</div>
@@ -223,7 +223,7 @@
<!-- Status Section -->
<fieldset class="space-y-4">
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Status</legend>
<div class="flex flex-wrap gap-4 pt-2">
<label class="flex items-center space-x-2 cursor-pointer">
<input class="checkbox" type="checkbox" bind:checked={formData.enable} />
@@ -240,8 +240,8 @@
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Internal Notes</label>
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" rows="2" bind:value={formData.notes} placeholder="Additional details..."></textarea>
<label class="label text-xs font-bold opacity-75" for="contact-notes">Internal Notes</label>
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-notes" rows="2" bind:value={formData.notes} placeholder="Additional details..."></textarea>
</div>
</fieldset>
</div>

39
src/routes/core/people/[person_id]/+page.svelte
View File

@@ -430,42 +430,3 @@
<!-- {$slct.person_id ?? 'Unknown ID'} -->
</section>
<style lang="postcss">
/* Use the div.ae_quick_modal_container to block background clicks when using the section.ae_quick_popover. */
div.ae_quick_modal_container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color: hsla(0, 0%, 50%, 0.75);
/* padding: 1rem; */
/* border: solid thick red; */
}
/* The section.ae_quick_popover should be above the rest of the content and centered on the page. */
section.ae_quick_popover {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
background-color: hsla(0, 0%, 97%, 0.97);
/* margin-top: 1rem;
margin-bottom: 2rem; */
/* padding: 1rem;
padding-top:4rem; */
/* padding-bottom: 4rem; */
border: solid thin hsla(0, 0%, 0%, 0.9);
border-radius: 0.5rem;
box-shadow: 0 0 1rem hsla(0, 0%, 0%, 0.5);
min-height: 30%;
/* max-height: 100vh; */
min-width: 80%;
/* overflow-y: auto; */
}
</style>

59
src/routes/core/people/ae_comp__person_form.svelte
View File

@@ -168,30 +168,30 @@
<div class="grid grid-cols-4 gap-2">
<div class="space-y-1 col-span-1">
<label class="label text-xs font-bold opacity-75">Prefix</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.prefix} placeholder="Mr." />
<label class="label text-xs font-bold opacity-75" for="person-prefix">Prefix</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-prefix" type="text" bind:value={formData.prefix} placeholder="Mr." />
</div>
<div class="space-y-1 col-span-3">
<label class="label text-xs font-bold opacity-75">Given Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.given_name} required placeholder="Jane" />
<label class="label text-xs font-bold opacity-75" for="person-given-name">Given Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-given-name" type="text" bind:value={formData.given_name} required placeholder="Jane" />
</div>
</div>
<div class="grid grid-cols-4 gap-2">
<div class="space-y-1 col-span-3">
<label class="label text-xs font-bold opacity-75">Family Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.family_name} required placeholder="Doe" />
<label class="label text-xs font-bold opacity-75" for="person-family-name">Family Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-family-name" type="text" bind:value={formData.family_name} required placeholder="Doe" />
</div>
<div class="space-y-1 col-span-1">
<label class="label text-xs font-bold opacity-75">Suffix</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.suffix} placeholder="PhD" />
<label class="label text-xs font-bold opacity-75" for="person-suffix">Suffix</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-suffix" type="text" bind:value={formData.suffix} placeholder="PhD" />
</div>
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Middle Name / Informal Name (Nickname)</label>
<label class="label text-xs font-bold opacity-75" for="person-middle-name">Middle Name / Informal Name (Nickname)</label>
<div class="grid grid-cols-2 gap-2">
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.middle_name} placeholder="Middle" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-middle-name" type="text" bind:value={formData.middle_name} placeholder="Middle" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.nickname} placeholder="Nickname" />
</div>
</div>
@@ -202,27 +202,27 @@
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Contact Information</legend>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Primary Email</label>
<label class="label text-xs font-bold opacity-75" for="person-primary-email">Primary Email</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<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" type="email" bind:value={formData.primary_email} placeholder="jane.doe@example.com" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-primary-email" type="email" bind:value={formData.primary_email} placeholder="jane.doe@example.com" />
</div>
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Phone Number</label>
<label class="label text-xs font-bold opacity-75" for="person-phone">Phone Number</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<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" type="tel" bind:value={formData.phone} placeholder="+1 (555) 000-0000" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-phone" type="tel" bind:value={formData.phone} placeholder="+1 (555) 000-0000" />
</div>
<small class="opacity-60 text-xs px-1">(Saved only locally until Contact created)</small>
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Tagline</label>
<label class="label text-xs font-bold opacity-75" for="person-tagline">Tagline</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Tag size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.tagline} placeholder="Software Architect & Visionary" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-tagline" type="text" bind:value={formData.tagline} placeholder="Software Architect & Visionary" />
</div>
</div>
</fieldset>
@@ -232,18 +232,18 @@
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Professional</legend>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Professional Title</label>
<label class="label text-xs font-bold opacity-75" for="person-professional-title">Professional Title</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Briefcase size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.professional_title} placeholder="Senior Engineer" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-professional-title" type="text" bind:value={formData.professional_title} placeholder="Senior Engineer" />
</div>
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Affiliations</label>
<label class="label text-xs font-bold opacity-75" for="person-affiliations">Affiliations</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Building size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.affiliations} placeholder="One Sky IT, LLC" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-affiliations" type="text" bind:value={formData.affiliations} placeholder="One Sky IT, LLC" />
</div>
</div>
</fieldset>
@@ -268,8 +268,8 @@
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Notes (Internal)</label>
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" rows="3" bind:value={formData.notes} placeholder="Additional details..."></textarea>
<label class="label text-xs font-bold opacity-75" for="person-notes">Notes (Internal)</label>
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-notes" rows="3" bind:value={formData.notes} placeholder="Additional details..."></textarea>
</div>
</fieldset>
@@ -277,16 +277,17 @@
<!-- Admin/Linking Section -->
<fieldset class="space-y-4 md:col-span-2 border-t border-surface-500/30 pt-4">
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">System Linking (Managers Only)</legend>
<div class="space-y-1 max-w-md">
<label class="label text-xs font-bold opacity-75">Linked User ID (Random)</label>
<label class="label text-xs font-bold opacity-75" for="person-user-id-random">Linked User ID (Random)</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Link size={16} /></div>
<input
class="bg-transparent border-0 ring-0 focus:ring-0 font-mono placeholder-surface-400 p-2"
type="text"
bind:value={formData.user_id_random}
placeholder="e.g. AB12CD34"
<input
class="bg-transparent border-0 ring-0 focus:ring-0 font-mono placeholder-surface-400 p-2"
id="person-user-id-random"
type="text"
bind:value={formData.user_id_random}
placeholder="e.g. AB12CD34"
/>
</div>
<small class="opacity-60 text-[10px] uppercase px-1 tracking-tighter">Enter the unique random ID of the user account to link to this person.</small>

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

@@ -117,18 +117,18 @@
</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">Display Name</label>
<input class="input variant-filled-surface rounded-lg p-2" type="text" bind:value={user.name} placeholder="Full Name" />
<label class="label text-xs font-bold opacity-75" for="user-display-name">Display Name</label>
<input class="input variant-filled-surface rounded-lg p-2" id="user-display-name" 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 p-2" type="email" bind:value={user.email} />
<label class="label text-xs font-bold opacity-75" for="user-email">Email Address</label>
<input class="input variant-filled-surface rounded-lg p-2" id="user-email" 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>
<label class="label text-xs font-bold opacity-75" for="user-username">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 !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 />
<input class="bg-transparent border-0 ring-0 focus:ring-0 font-mono opacity-60 p-2" id="user-username" 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>