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

style(core): enhance UI consistency, support dark mode, and reorder navigation

Browse Source 
- Refactored core layout and dashboard to follow AE Firefly guidelines
- Added proper theme-aware backgrounds and transitioned to Skeleton v4 tokens
- Grouped navigation and cards by functional color (Teal: Infra, Indigo: Identity, Amber: Config)
- Reordered items to: Accounts, Sites, Users, People, Data Stores, Lookups, Addresses, Contacts
- Fixed color inconsistency for Activity Logs in dashboard vs navigation
- Enabled non-blocking modal mode for inline field editors in Data Stores table
This commit is contained in:
Scott Idem
2026-06-17 17:27:39 -04:00
parent 04205e4a63
commit ea413bbb9b
3 changed files with 117 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/routes/core/+layout.svelte
View File

@@ -39,43 +39,66 @@ onMount(() => {
</svelte:head> </svelte:head>
<div <div
class="ae_core m-auto flex h-full max-h-full max-w-6xl flex-col gap-1 overflow-auto p-4"> class="ae_core bg-surface-50-950 text-surface-900-100 m-auto flex h-full max-h-full max-w-7xl flex-col gap-4 overflow-auto p-4 transition-colors duration-200">
{#if $ae_loc.manager_access} {#if $ae_loc.manager_access}
<nav <header
class="border-surface-500/30 mb-6 flex flex-wrap gap-2 border-b pb-4"> class="bg-surface-100-900 border-surface-500/10 flex flex-wrap items-center justify-between gap-4 rounded-xl border p-4 shadow-md">
<a href="/core" class="btn btn-sm preset-tonal-surface"> <div class="flex items-center gap-3">
<LayoutDashboard size={14} class="mr-1" /> Dashboard <div class="bg-primary-500/10 rounded-lg p-2">
</a> <Database size={24} class="text-primary-500" />
<a href="/core/accounts" class="btn btn-sm preset-tonal-primary"> </div>
<Building size={14} class="mr-1" /> Accounts <div>
</a> <h1 class="h3 font-black tracking-tight">Æ Core</h1>
<a href="/core/sites" class="btn btn-sm preset-tonal-secondary"> <p
<Globe size={14} class="mr-1" /> Sites class="text-[10px] font-bold tracking-widest uppercase opacity-50">
</a> System Management
<a href="/core/users" class="btn btn-sm preset-tonal-error"> </p>
<ShieldCheck size={14} class="mr-1" /> Users </div>
</a> </div>
<a href="/core/people" class="btn btn-sm preset-tonal-warning">
<Users size={14} class="mr-1" /> People <nav class="flex flex-wrap gap-1">
</a> <a href="/core" class="btn btn-sm preset-tonal-surface">
<a <LayoutDashboard size={14} class="mr-1" /> Dashboard
href="/core/activity_logs" </a>
class="btn btn-sm preset-tonal-success"> <a href="/core/accounts" class="btn btn-sm preset-tonal-primary">
<History size={14} class="mr-1" /> Logs <Building size={14} class="mr-1" /> Accounts
</a> </a>
<a href="/core/addresses" class="btn btn-sm preset-tonal-surface"> <a href="/core/sites" class="btn btn-sm preset-tonal-primary">
<MapPin size={14} class="mr-1" /> Addresses <Globe size={14} class="mr-1" /> Sites
</a> </a>
<a href="/core/contacts" class="btn btn-sm preset-tonal-surface"> <a href="/core/users" class="btn btn-sm preset-tonal-tertiary">
<Phone size={14} class="mr-1" /> Contacts <ShieldCheck size={14} class="mr-1" /> Users
</a> </a>
<a href="/core/lookups" class="btn btn-sm preset-tonal-surface"> <a href="/core/people" class="btn btn-sm preset-tonal-tertiary">
<List size={14} class="mr-1" /> Lookups <Users size={14} class="mr-1" /> People
</a> </a>
<a href="/core/data_stores" class="btn btn-sm preset-tonal-surface"> <a
<Database size={14} class="mr-1" /> Data Stores href="/core/data_stores"
</a> class="btn btn-sm preset-tonal-secondary">
</nav> <Database size={14} class="mr-1" /> Data Stores
</a>
<a
href="/core/lookups"
class="btn btn-sm preset-tonal-secondary">
<List size={14} class="mr-1" /> Lookups
</a>
<a
href="/core/addresses"
class="btn btn-sm preset-tonal-surface">
<MapPin size={14} class="mr-1" /> Addresses
</a>
<a
href="/core/contacts"
class="btn btn-sm preset-tonal-surface">
<Phone size={14} class="mr-1" /> Contacts
</a>
<a
href="/core/activity_logs"
class="btn btn-sm preset-tonal-surface">
<History size={14} class="mr-1" /> Logs
</a>
</nav>
</header>
<section class="main_content grow px-1 pb-28 md:px-2"> <section class="main_content grow px-1 pb-28 md:px-2">
{@render children?.()} {@render children?.()}

112
src/routes/core/+page.svelte
View File

@@ -26,9 +26,9 @@ $effect(() => {
}); });
</script> </script>
<div class="container mx-auto space-y-8 p-4"> <div class="space-y-8">
<header <header
class="bg-surface-50-900-token border-surface-500/10 flex flex-wrap items-center justify-between gap-4 rounded-2xl border p-6 shadow-xl"> class="bg-surface-100-900 border-surface-500/10 flex flex-wrap items-center justify-between gap-4 rounded-2xl border p-6 shadow-xl">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div class="bg-primary-500/10 rounded-xl p-3"> <div class="bg-primary-500/10 rounded-xl p-3">
<LayoutDashboard size={32} class="text-primary-500" /> <LayoutDashboard size={32} class="text-primary-500" />
@@ -44,7 +44,7 @@ $effect(() => {
</div> </div>
</div> </div>
<div <div
class="border-surface-500/10 min-w-50 rounded-xl border bg-black/5 p-3"> class="border-surface-500/10 min-w-50 rounded-xl border bg-surface-200-800 p-3">
<p <p
class="mb-1 flex items-center gap-1 text-[10px] font-black tracking-widest uppercase opacity-60"> class="mb-1 flex items-center gap-1 text-[10px] font-black tracking-widest uppercase opacity-60">
<Landmark size={10} /> Active Account <Landmark size={10} /> Active Account
@@ -59,7 +59,7 @@ $effect(() => {
class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- Account Management Card --> <!-- Account Management Card -->
<div <div
class="card preset-tonal-primary group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-all hover:brightness-110"> class="card preset-tonal-primary group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div <div
@@ -81,7 +81,7 @@ $effect(() => {
<!-- Site Management Card --> <!-- Site Management Card -->
<div <div
class="card preset-tonal-secondary group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-all hover:brightness-110"> class="card preset-tonal-secondary group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div <div
@@ -104,7 +104,7 @@ $effect(() => {
<!-- User Management Card --> <!-- User Management Card -->
<div <div
class="card preset-tonal-error group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-all hover:brightness-110"> class="card preset-tonal-error group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div <div
@@ -126,7 +126,7 @@ $effect(() => {
<!-- Person Management Card --> <!-- Person Management Card -->
<div <div
class="card preset-tonal-warning group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-all hover:brightness-110"> class="card preset-tonal-warning group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div <div
@@ -146,9 +146,53 @@ $effect(() => {
</a> </a>
</div> </div>
<!-- Data Stores Card -->
<div
class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
<div class="space-y-4">
<div class="flex items-center gap-3">
<div
class="bg-surface-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
<Database size={24} />
</div>
<h3 class="h4 font-black">Data Stores</h3>
</div>
<p class="text-sm leading-relaxed opacity-80">
Manage all content and configuration data stores across accounts.
</p>
</div>
<a
class="btn preset-filled-surface mt-4 w-full font-bold shadow-md"
href="/core/data_stores">
Manage
</a>
</div>
<!-- Lookups Card -->
<div
class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
<div class="space-y-4">
<div class="flex items-center gap-3">
<div
class="bg-surface-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
<List size={24} />
</div>
<h3 class="h4 font-black">Lookups</h3>
</div>
<p class="text-sm leading-relaxed opacity-80">
View system lookup tables (countries, time zones, etc).
</p>
</div>
<a
class="btn preset-filled-surface mt-4 w-full font-bold shadow-md"
href="/core/lookups">
View
</a>
</div>
<!-- Address Management Card --> <!-- Address Management Card -->
<div <div
class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-all hover:brightness-110"> class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div <div
@@ -170,7 +214,7 @@ $effect(() => {
<!-- Contact Management Card --> <!-- Contact Management Card -->
<div <div
class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-all hover:brightness-110"> class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div <div
@@ -193,11 +237,11 @@ $effect(() => {
<!-- Activity Log Card --> <!-- Activity Log Card -->
<div <div
class="card preset-tonal-success group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-all hover:brightness-110"> class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div <div
class="bg-success-500/20 rounded-lg p-2 transition-transform group-hover:scale-110"> class="bg-surface-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
<History size={24} /> <History size={24} />
</div> </div>
<h3 class="h4 font-black">Activity Logs</h3> <h3 class="h4 font-black">Activity Logs</h3>
@@ -208,54 +252,10 @@ $effect(() => {
</p> </p>
</div> </div>
<a <a
class="btn preset-filled-success mt-4 w-full font-bold shadow-md" class="btn preset-filled-surface mt-4 w-full font-bold shadow-md"
href="/core/activity_logs"> href="/core/activity_logs">
View Logs View Logs
</a> </a>
</div> </div>
<!-- Data Stores Card -->
<div
class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-all hover:brightness-110">
<div class="space-y-4">
<div class="flex items-center gap-3">
<div
class="bg-surface-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
<Database size={24} />
</div>
<h3 class="h4 font-black">Data Stores</h3>
</div>
<p class="text-sm leading-relaxed opacity-80">
Manage all content and configuration data stores across accounts.
</p>
</div>
<a
class="btn preset-filled-surface mt-4 w-full font-bold shadow-md"
href="/core/data_stores">
Manage
</a>
</div>
<!-- Lookups Card -->
<div
class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-all hover:brightness-110">
<div class="space-y-4">
<div class="flex items-center gap-3">
<div
class="bg-surface-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
<List size={24} />
</div>
<h3 class="h4 font-black">Lookups</h3>
</div>
<p class="text-sm leading-relaxed opacity-80">
View system lookup tables (countries, time zones, etc).
</p>
</div>
<a
class="btn preset-filled-surface mt-4 w-full font-bold shadow-md"
href="/core/lookups">
View
</a>
</div>
</div> </div>
</div> </div>

2
src/routes/core/data_stores/+page.svelte
View File

@@ -561,6 +561,7 @@ function content_preview(ds: ae_DataStore): string {
current_value={ds.name ?? ''} current_value={ds.name ?? ''}
placeholder="Display name" placeholder="Display name"
display_modal={true} display_modal={true}
modal_blocking={false}
on_success={() => do_search(false)} /> on_success={() => do_search(false)} />
</td> </td>
<td class="px-3 py-2"> <td class="px-3 py-2">
@@ -573,6 +574,7 @@ function content_preview(ds: ae_DataStore): string {
field_type="select" field_type="select"
select_options={ds_type_options} select_options={ds_type_options}
display_modal={true} display_modal={true}
modal_blocking={false}
on_success={() => do_search(false)}> on_success={() => do_search(false)}>
<span class="badge {type_badge(ds.type)} font-mono text-[9px] uppercase">{ds.type ?? '?'}</span> <span class="badge {type_badge(ds.type)} font-mono text-[9px] uppercase">{ds.type ?? '?'}</span>
</AE_Field_Editor> </AE_Field_Editor>