162 lines
11 KiB
HTML
162 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
{% import "components/macros.html" as ui %}
|
|
|
|
{% block title %}Tables - Design System Wiki{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
|
|
|
|
<!-- Left Navigation Sidebar -->
|
|
{% include "docs/sidebar.html" %}
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex-1 space-y-8">
|
|
|
|
<!-- Header -->
|
|
<div class="pb-6 border-b border-border">
|
|
<span class="text-xs font-semibold text-indigo-400">Layout & Navigation</span>
|
|
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Tables</h1>
|
|
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
|
A standardized container macro for table styling and scrollbar-fitting layout. It resolves common styling issues like corner clipping and header bleed-through.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Section Usage -->
|
|
<section class="space-y-4">
|
|
<h2 class="text-lg font-bold text-slate-200">Container Showcase</h2>
|
|
<p class="text-xs text-muted-foreground">
|
|
The macro standardizes the background styling, shadows, rounded borders, vertical height bounds, and sticky headers.
|
|
</p>
|
|
|
|
<div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
|
|
<!-- Tab Headers -->
|
|
<div class="flex border-b border-border/60 pb-1.5">
|
|
<button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400 cursor-pointer" onclick="toggleWikiTabs(this, 'table-sandbox')">Interactive Demo</button>
|
|
<button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-slate-250 cursor-pointer" onclick="toggleWikiTabs(this, 'table-code')">Askama Usage</button>
|
|
</div>
|
|
|
|
<!-- Demo Viewport -->
|
|
<div id="table-sandbox" class="wiki-pane">
|
|
{{ ui::table_container_open(id="docs-demo-table", max_height="250px") }}
|
|
<table class="min-w-full divide-y divide-slate-800 text-left text-xs text-slate-300 relative">
|
|
<thead class="shadow-[0_1px_0_0_rgba(255,255,255,0.05)]">
|
|
<tr class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">
|
|
<th class="sticky top-0 z-10 px-5 py-3 bg-[#162031] whitespace-nowrap">ID Code</th>
|
|
<th class="sticky top-0 z-10 px-5 py-3 bg-[#162031] whitespace-nowrap">Full Name</th>
|
|
<th class="sticky top-0 z-10 px-5 py-3 bg-[#162031] whitespace-nowrap">Position Title</th>
|
|
<th class="sticky top-0 z-10 px-5 py-3 bg-[#162031] whitespace-nowrap">Base Office</th>
|
|
<th class="sticky top-0 z-10 px-5 py-3 bg-[#162031] whitespace-nowrap">Current Shift Status</th>
|
|
<th class="sticky top-0 z-10 px-5 py-3 bg-[#162031] text-right whitespace-nowrap">Actions & Config</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-800 bg-[#151f30]/20">
|
|
<tr class="hover:bg-[#1e293b]/20 transition">
|
|
<td class="px-5 py-3 font-mono text-sky-400">#001_a9f</td>
|
|
<td class="px-5 py-3 font-semibold text-slate-200">Arthur Dent</td>
|
|
<td class="px-5 py-3">Sandwich Maker</td>
|
|
<td class="px-5 py-3">Space Station 4</td>
|
|
<td class="px-5 py-3"><span class="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-[9px] font-bold">ACTIVE</span></td>
|
|
<td class="px-5 py-3 text-right"><button class="text-sky-400 hover:underline font-semibold cursor-pointer">View Detail</button></td>
|
|
</tr>
|
|
<tr class="hover:bg-[#1e293b]/20 transition">
|
|
<td class="px-5 py-3 font-mono text-sky-400">#002_c3d</td>
|
|
<td class="px-5 py-3 font-semibold text-slate-200">Tricia McMillan</td>
|
|
<td class="px-5 py-3">Reporter / Anchor</td>
|
|
<td class="px-5 py-3">Sector 12 Office</td>
|
|
<td class="px-5 py-3"><span class="px-2 py-0.5 rounded-full bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 text-[9px] font-bold">ON DUTY</span></td>
|
|
<td class="px-5 py-3 text-right"><button class="text-sky-400 hover:underline font-semibold cursor-pointer">View Detail</button></td>
|
|
</tr>
|
|
<tr class="hover:bg-[#1e293b]/20 transition">
|
|
<td class="px-5 py-3 font-mono text-sky-400">#003_e5f</td>
|
|
<td class="px-5 py-3 font-semibold text-slate-200">Ford Prefect</td>
|
|
<td class="px-5 py-3">Researcher</td>
|
|
<td class="px-5 py-3">Betelgeuse V</td>
|
|
<td class="px-5 py-3"><span class="px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-400 border border-amber-500/20 text-[9px] font-bold">TRAVELING</span></td>
|
|
<td class="px-5 py-3 text-right"><button class="text-sky-400 hover:underline font-semibold cursor-pointer">View Detail</button></td>
|
|
</tr>
|
|
<tr class="hover:bg-[#1e293b]/20 transition">
|
|
<td class="px-5 py-3 font-mono text-sky-400">#004_g7h</td>
|
|
<td class="px-5 py-3 font-semibold text-slate-200">Zaphod Beeblebrox</td>
|
|
<td class="px-5 py-3">Ex-President</td>
|
|
<td class="px-5 py-3">Heart of Gold</td>
|
|
<td class="px-5 py-3"><span class="px-2 py-0.5 rounded-full bg-rose-500/10 text-rose-400 border border-rose-500/20 text-[9px] font-bold">SUSPENDED</span></td>
|
|
<td class="px-5 py-3 text-right"><button class="text-sky-400 hover:underline font-semibold cursor-pointer">View Detail</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
{{ ui::table_container_close(id="docs-demo-table") }}
|
|
</div>
|
|
|
|
<!-- Code Snippet Area -->
|
|
<div id="table-code" class="wiki-pane hidden space-y-4">
|
|
<div class="relative group">
|
|
<button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-400 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5 cursor-pointer" onclick="copyCodeSnippet(this)">
|
|
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
|
|
Copy Markup
|
|
</button>
|
|
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}
|
|
|
|
{{ ui::table_container_open(id="my-custom-table", max_height="68vh") }}
|
|
<table class="min-w-full divide-y divide-slate-800 text-left text-sm text-slate-300 relative">
|
|
<thead class="shadow-[0_1px_0_0_rgba(255,255,255,0.05)]">
|
|
<tr class="text-xs font-bold text-slate-400 uppercase tracking-wider">
|
|
<th class="sticky top-0 z-10 px-6 py-4 bg-[#162031]">Column 1</th>
|
|
<th class="sticky top-0 z-10 px-6 py-4 bg-[#162031]">Column 2</th>
|
|
<th class="sticky top-0 z-10 px-6 py-4 bg-[#162031] text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-800">
|
|
<tr class="hover:bg-[#1e293b]/20 transition">
|
|
<td class="px-6 py-4">Cell Data A1</td>
|
|
<td class="px-6 py-4">Cell Data A2</td>
|
|
<td class="px-6 py-4 text-right">Edit</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
{{ ui::table_container_close(id="my-custom-table") }}</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Technical Specification Section -->
|
|
<section class="space-y-4">
|
|
<h2 class="text-lg font-bold text-slate-200">How It Works</h2>
|
|
<div class="border border-border rounded-3xl p-6 bg-secondary/10 space-y-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-2">
|
|
<h4 class="text-xs font-bold text-indigo-400 uppercase tracking-wider">Stylized Container Wrapper</h4>
|
|
<p class="text-xs text-muted-foreground leading-relaxed">
|
|
Tables are automatically styled with rounded-3xl corners and background styling. The table container is scrollable, displaying a native horizontal or vertical scrollbar as needed.
|
|
</p>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<h4 class="text-xs font-bold text-indigo-400 uppercase tracking-wider">Rounded Corner Clipping Fix</h4>
|
|
<p class="text-xs text-muted-foreground leading-relaxed">
|
|
To prevent scrollbars from clipping at the corners of high-radius panels (like Shadcn's <code>rounded-3xl</code> panels), the border and shadow styling are kept on the outer wrapper, while the overflow scroll boundary is restricted to an inner container with slightly smaller radius adjustments (<code>rounded-[22px]</code>).
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleWikiTabs(btn, paneId) {
|
|
const card = btn.closest('.border-border');
|
|
if (!card) return;
|
|
card.querySelectorAll('button').forEach(b => {
|
|
b.classList.remove('border-sky-500', 'text-sky-400');
|
|
b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-slate-250');
|
|
});
|
|
btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-slate-250');
|
|
btn.classList.add('border-sky-500', 'text-sky-400');
|
|
card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
|
|
const target = card.querySelector('#' + paneId);
|
|
if (target) target.classList.remove('hidden');
|
|
}
|
|
</script>
|
|
{% endblock %}
|