style(core): enhance UI consistency, support dark mode, and reorder navigation
- 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
@@ -39,43 +39,66 @@ onMount(() => {
|
||||
</svelte:head>
|
||||
|
||||
<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}
|
||||
<nav
|
||||
class="border-surface-500/30 mb-6 flex flex-wrap gap-2 border-b pb-4">
|
||||
<header
|
||||
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">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-primary-500/10 rounded-lg p-2">
|
||||
<Database size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="h3 font-black tracking-tight">Æ Core</h1>
|
||||
<p
|
||||
class="text-[10px] font-bold tracking-widest uppercase opacity-50">
|
||||
System Management
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="flex flex-wrap gap-1">
|
||||
<a href="/core" class="btn btn-sm preset-tonal-surface">
|
||||
<LayoutDashboard size={14} class="mr-1" /> Dashboard
|
||||
</a>
|
||||
<a href="/core/accounts" class="btn btn-sm preset-tonal-primary">
|
||||
<Building size={14} class="mr-1" /> Accounts
|
||||
</a>
|
||||
<a href="/core/sites" class="btn btn-sm preset-tonal-secondary">
|
||||
<a href="/core/sites" class="btn btn-sm preset-tonal-primary">
|
||||
<Globe size={14} class="mr-1" /> Sites
|
||||
</a>
|
||||
<a href="/core/users" class="btn btn-sm preset-tonal-error">
|
||||
<a href="/core/users" class="btn btn-sm preset-tonal-tertiary">
|
||||
<ShieldCheck size={14} class="mr-1" /> Users
|
||||
</a>
|
||||
<a href="/core/people" class="btn btn-sm preset-tonal-warning">
|
||||
<a href="/core/people" class="btn btn-sm preset-tonal-tertiary">
|
||||
<Users size={14} class="mr-1" /> People
|
||||
</a>
|
||||
<a
|
||||
href="/core/activity_logs"
|
||||
class="btn btn-sm preset-tonal-success">
|
||||
<History size={14} class="mr-1" /> Logs
|
||||
</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/lookups" class="btn btn-sm preset-tonal-surface">
|
||||
<List size={14} class="mr-1" /> Lookups
|
||||
</a>
|
||||
<a href="/core/data_stores" class="btn btn-sm preset-tonal-surface">
|
||||
href="/core/data_stores"
|
||||
class="btn btn-sm preset-tonal-secondary">
|
||||
<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">
|
||||
{@render children?.()}
|
||||
|
||||
@@ -26,9 +26,9 @@ $effect(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto space-y-8 p-4">
|
||||
<div class="space-y-8">
|
||||
<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="bg-primary-500/10 rounded-xl p-3">
|
||||
<LayoutDashboard size={32} class="text-primary-500" />
|
||||
@@ -44,7 +44,7 @@ $effect(() => {
|
||||
</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
|
||||
class="mb-1 flex items-center gap-1 text-[10px] font-black tracking-widest uppercase opacity-60">
|
||||
<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">
|
||||
<!-- Account Management Card -->
|
||||
<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="flex items-center gap-3">
|
||||
<div
|
||||
@@ -81,7 +81,7 @@ $effect(() => {
|
||||
|
||||
<!-- Site Management Card -->
|
||||
<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="flex items-center gap-3">
|
||||
<div
|
||||
@@ -104,7 +104,7 @@ $effect(() => {
|
||||
|
||||
<!-- User Management Card -->
|
||||
<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="flex items-center gap-3">
|
||||
<div
|
||||
@@ -126,7 +126,7 @@ $effect(() => {
|
||||
|
||||
<!-- Person Management Card -->
|
||||
<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="flex items-center gap-3">
|
||||
<div
|
||||
@@ -146,9 +146,53 @@ $effect(() => {
|
||||
</a>
|
||||
</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 -->
|
||||
<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="flex items-center gap-3">
|
||||
<div
|
||||
@@ -170,7 +214,7 @@ $effect(() => {
|
||||
|
||||
<!-- Contact Management 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">
|
||||
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
|
||||
@@ -193,11 +237,11 @@ $effect(() => {
|
||||
|
||||
<!-- Activity Log Card -->
|
||||
<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="flex items-center gap-3">
|
||||
<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} />
|
||||
</div>
|
||||
<h3 class="h4 font-black">Activity Logs</h3>
|
||||
@@ -208,54 +252,10 @@ $effect(() => {
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
View Logs
|
||||
</a>
|
||||
</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>
|
||||
|
||||
@@ -561,6 +561,7 @@ function content_preview(ds: ae_DataStore): string {
|
||||
current_value={ds.name ?? ''}
|
||||
placeholder="Display name"
|
||||
display_modal={true}
|
||||
modal_blocking={false}
|
||||
on_success={() => do_search(false)} />
|
||||
</td>
|
||||
<td class="px-3 py-2">
|
||||
@@ -573,6 +574,7 @@ function content_preview(ds: ae_DataStore): string {
|
||||
field_type="select"
|
||||
select_options={ds_type_options}
|
||||
display_modal={true}
|
||||
modal_blocking={false}
|
||||
on_success={() => do_search(false)}>
|
||||
<span class="badge {type_badge(ds.type)} font-mono text-[9px] uppercase">{ds.type ?? '?'}</span>
|
||||
</AE_Field_Editor>
|
||||
|
||||
Reference in New Issue
Block a user