Now even prettier with the new Tailwind CSS plugin. Probably should have done this long ago...
This commit is contained in:
Scott Idem
@@ -73,17 +73,17 @@ async function handle_add_site() {
|
||||
}
|
||||
</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-3">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<div class="bg-primary-500/10 rounded-lg p-2">
|
||||
<Globe size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="h2 font-black tracking-tight">Site Management</h1>
|
||||
<p
|
||||
class="text-xs font-bold opacity-50 uppercase tracking-widest">
|
||||
class="text-xs font-bold tracking-widest uppercase opacity-50">
|
||||
Digital Properties & Domains
|
||||
</p>
|
||||
</div>
|
||||
@@ -96,44 +96,44 @@ async function handle_add_site() {
|
||||
</header>
|
||||
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
|
||||
<div class="flex flex-wrap gap-6 items-end">
|
||||
<div class="flex-1 min-w-[280px] space-y-1">
|
||||
class="card preset-tonal-surface border-surface-500/10 space-y-4 border p-6 shadow-xl">
|
||||
<div class="flex flex-wrap items-end gap-6">
|
||||
<div class="min-w-[280px] flex-1 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 Sites</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 or code..." />
|
||||
<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_sites}
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div class="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"
|
||||
>Status</span>
|
||||
<select
|
||||
class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
|
||||
class="select preset-filled-surface border-surface-500/20 rounded-lg border p-2 text-sm"
|
||||
bind:value={qry_enabled}
|
||||
onchange={load_sites}>
|
||||
<option value="all">All Statuses</option>
|
||||
@@ -144,10 +144,10 @@ async function handle_add_site() {
|
||||
|
||||
<div class="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"
|
||||
>Visibility</span>
|
||||
<select
|
||||
class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
|
||||
class="select preset-filled-surface border-surface-500/20 rounded-lg border p-2 text-sm"
|
||||
bind:value={qry_hidden}
|
||||
onchange={load_sites}>
|
||||
<option value="all">All Visibility</option>
|
||||
@@ -160,60 +160,60 @@ async function handle_add_site() {
|
||||
</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">
|
||||
<Globe size={48} class="mx-auto mb-4 opacity-20" />
|
||||
<h3 class="h3 font-bold opacity-50">No Sites Found</h3>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">
|
||||
<p class="mx-auto mt-2 max-w-xs opacity-60">
|
||||
Sites for this account will appear here. Add your first site to
|
||||
get started.
|
||||
</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" />
|
||||
Linked Properties
|
||||
<span class="badge preset-tonal-secondary ml-auto"
|
||||
>{filtered_li.length} found</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 site (site.site_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 flex gap-1">
|
||||
{#if site.hide}
|
||||
<span
|
||||
class="badge preset-filled-warning text-[8px] uppercase font-bold shadow-sm"
|
||||
class="badge preset-filled-warning text-[8px] font-bold uppercase shadow-sm"
|
||||
>Hidden</span>
|
||||
{/if}
|
||||
<span
|
||||
class="badge {site.enable
|
||||
? 'preset-filled-success'
|
||||
: 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
: 'preset-filled-error'} text-[8px] font-bold uppercase shadow-sm">
|
||||
{site.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-lg shadow-inner group-hover:scale-110 transition-transform">
|
||||
class="avatar preset-filled-primary flex h-12 w-12 items-center justify-center rounded-lg shadow-inner transition-transform group-hover:scale-110">
|
||||
<Globe size={24} />
|
||||
</div>
|
||||
<div class="pr-12">
|
||||
<p class="font-black tracking-tight truncate">
|
||||
<p class="truncate font-black tracking-tight">
|
||||
{site.name}
|
||||
</p>
|
||||
<p
|
||||
class="text-[10px] uppercase font-bold opacity-50 font-mono tracking-tighter">
|
||||
class="font-mono text-[10px] font-bold tracking-tighter uppercase opacity-50">
|
||||
Code: {site.code || '--'}
|
||||
</p>
|
||||
</div>
|
||||
@@ -221,7 +221,7 @@ async function handle_add_site() {
|
||||
|
||||
<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">
|
||||
<Calendar
|
||||
size={14}
|
||||
class="text-primary-500 shrink-0" />
|
||||
@@ -231,17 +231,17 @@ async function handle_add_site() {
|
||||
).toLocaleDateString()}</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">
|
||||
<ShieldCheck
|
||||
size={14}
|
||||
class="text-secondary-500 shrink-0" />
|
||||
<span class="font-mono truncate"
|
||||
<span class="truncate font-mono"
|
||||
>{site.site_id_random}</span>
|
||||
</div>
|
||||
</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/sites/{site.site_id_random}">
|
||||
Manage Site
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user