shaamilahmed/Htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: resolve linter warnings, optimize tables scroll behavior with top scroll sync, and extract reusable table macros

Browse Source
This commit is contained in:
Enciphered
2026-05-31 06:03:54 +05:00
parent 478d5f3c17
commit 58c929dd38
15 changed files with 718 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/audit/mod.rs
+1
View File
@@ -23,6 +23,7 @@ where
}
/// Lower-level helper function to write audit log entries directly to the database.
#[allow(clippy::too_many_arguments)]
pub async fn log_action(
db: &mongodb::Database,
user_opt: Option<&AuthenticatedUser>,
src/audit/repository.rs
+8 -12
View File
@@ -57,39 +57,35 @@ impl MongoAuditRepository {
if let Some(ent_id_str) = entity_id {
let trimmed = ent_id_str.trim();
if !trimmed.is_empty() {
if let Ok(oid) = ObjectId::parse_str(trimmed) {
filter.insert("entity_id", oid);
}
}
}
// Date filters range
let mut date_query = doc! {};
if let Some(start) = start_date {
let trimmed = start.trim();
if !trimmed.is_empty() {
if let Ok(naive_date) = chrono::NaiveDate::parse_from_str(trimmed, "%Y-%m-%d") {
if let Some(naive_datetime) = naive_date.and_hms_opt(0, 0, 0) {
if let Some(naive_datetime) = chrono::NaiveDate::parse_from_str(trimmed, "%Y-%m-%d")
.ok()
.and_then(|d| d.and_hms_opt(0, 0, 0))
{
let dt = chrono::DateTime::<chrono::Utc>::from_naive_utc_and_offset(naive_datetime, chrono::Utc);
date_query.insert("$gte", mongodb::bson::DateTime::from_chrono(dt));
}
}
}
}
if let Some(end) = end_date {
let trimmed = end.trim();
if !trimmed.is_empty() {
if let Ok(naive_date) = chrono::NaiveDate::parse_from_str(trimmed, "%Y-%m-%d") {
if let Some(naive_datetime) = naive_date.and_hms_opt(23, 59, 59) {
if let Some(naive_datetime) = chrono::NaiveDate::parse_from_str(trimmed, "%Y-%m-%d")
.ok()
.and_then(|d| d.and_hms_opt(23, 59, 59))
{
let dt = chrono::DateTime::<chrono::Utc>::from_naive_utc_and_offset(naive_datetime, chrono::Utc);
date_query.insert("$lte", mongodb::bson::DateTime::from_chrono(dt));
}
}
}
}
if !date_query.is_empty() {
filter.insert("timestamp", date_query);
src/docs/handlers.rs
+14
View File
@@ -121,6 +121,13 @@ pub struct LoggingTemplate {
pub authenticated: bool,
}
#[derive(Template)]
#[template(path = "docs/tables.html")]
pub struct TablesTemplate {
pub username: String,
pub authenticated: bool,
}
// Define individual handlers
pub async fn index_handler(
user_opt: Option<AuthenticatedUser>,
@@ -221,3 +228,10 @@ pub async fn logging_handler(
let (authenticated, username) = get_session_info(user_opt);
Ok(HtmlTemplate(LoggingTemplate { username, authenticated }))
}
pub async fn tables_handler(
user_opt: Option<AuthenticatedUser>,
) -> Result<impl IntoResponse, AppError> {
let (authenticated, username) = get_session_info(user_opt);
Ok(HtmlTemplate(TablesTemplate { username, authenticated }))
}
src/docs/mod.rs
+2 -1
View File
@@ -5,7 +5,7 @@ use self::handlers::{
index_handler, buttons_handler, inputs_handler, date_time_handler,
combobox_handler, toggles_handler, modals_handler, sheets_handler,
tabs_accordion_handler, visuals_handler, scrollbars_handler, feedback_handler,
logging_handler,
logging_handler, tables_handler,
};
pub fn router<S>() -> Router<S>
@@ -29,4 +29,5 @@ where
.route("/docs/scrollbars", get(scrollbars_handler))
.route("/docs/feedback", get(feedback_handler))
.route("/docs/logging", get(logging_handler))
.route("/docs/tables", get(tables_handler))
}
src/input.css
+7 -7
View File
@@ -76,12 +76,12 @@ html, body {
/* Custom Scrollbars */
* {
scrollbar-width: thin;
scrollbar-color: hsl(var(--border)) transparent;
scrollbar-color: rgba(100, 116, 139, 0.5) rgba(15, 23, 42, 0.4);
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
width: 8px;
height: 8px;
}
::-webkit-scrollbar-button {
@@ -89,19 +89,19 @@ html, body {
}
::-webkit-scrollbar-track {
background: transparent;
background: rgba(15, 23, 42, 0.4);
border-radius: 9999px;
}
::-webkit-scrollbar-thumb {
background: hsl(var(--border));
background: rgba(100, 116, 139, 0.5);
border-radius: 9999px;
border: 1px solid transparent;
background-clip: padding-box;
transition: background-color 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
background: hsl(var(--muted-foreground));
background: rgba(148, 163, 184, 0.8);
}
/* Custom Date/Time Inputs */
static/js/components.js
+2
View File
@@ -5,6 +5,7 @@ document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById(modalId);
if (!modal) return;
modal.classList.remove('hidden');
modal.classList.add('flex');
setTimeout(() => {
const content = modal.querySelector('.modal-content');
if (content) {
@@ -24,6 +25,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
setTimeout(() => {
modal.classList.add('hidden');
modal.classList.remove('flex');
}, 300); // Wait for transition animation
};
static/tailwind.css
+433 -264
View File
File diff suppressed because it is too large Load Diff
templates/audit/list.html
+12 -14
View File
@@ -107,17 +107,16 @@
</div>
<!-- Logs Table -->
<div class="bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl shadow-2xl overflow-hidden mb-8">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-slate-800 text-left text-sm text-slate-300">
<thead>
<tr class="text-xs font-bold text-slate-400 uppercase tracking-wider bg-slate-900/30">
<th class="px-6 py-4">Timestamp</th>
<th class="px-6 py-4">User</th>
<th class="px-6 py-4">Event</th>
<th class="px-6 py-4">Target Entity</th>
<th class="px-6 py-4">IP / Details</th>
<th class="px-6 py-4 text-right">Replay Payload</th>
{{ ui::table_container_open(id="audit-table", has_top_scroll=true, 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]">Timestamp</th>
<th class="sticky top-0 z-10 px-6 py-4 bg-[#162031]">User</th>
<th class="sticky top-0 z-10 px-6 py-4 bg-[#162031]">Event</th>
<th class="sticky top-0 z-10 px-6 py-4 bg-[#162031]">Target Entity</th>
<th class="sticky top-0 z-10 px-6 py-4 bg-[#162031]">IP / Details</th>
<th class="sticky top-0 z-10 px-6 py-4 bg-[#162031] text-right">Replay Payload</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-800">
@@ -215,8 +214,7 @@
{% endif %}
</tbody>
</table>
</div>
</div>
{{ ui::table_container_close(id="audit-table", has_top_scroll=true) }}
<!-- Footer Navigation -->
<div class="mt-6 text-center text-sm text-slate-400">
@@ -225,7 +223,7 @@
</div>
<!-- Purge Modal Dialog -->
<div id="purge-modal" class="modal-dialog fixed inset-0 z-50 flex items-center justify-center hidden" role="dialog" aria-modal="true">
<div id="purge-modal" class="modal-dialog fixed inset-0 z-50 items-center justify-center hidden" role="dialog" aria-modal="true">
<div class="modal-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm transition-opacity duration-300"></div>
<div class="modal-content relative z-10 w-full max-w-md scale-95 opacity-0 transition-all duration-300 border border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl rounded-3xl">
<div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-rose-500/10 border border-rose-500/20 text-rose-400 mb-3">
templates/auth/edit_user.html
+2 -2
View File
@@ -15,7 +15,7 @@
{% if let Some(err) = error %}
<div class="mb-6 p-4 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-sm flex items-start gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 flex-shrink-0 mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 shrink-0 mt-0.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
</svg>
<span>{{ err }}</span>
@@ -24,7 +24,7 @@
{% if let Some(msg) = success %}
<div class="mb-6 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm flex items-start gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 flex-shrink-0 mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 shrink-0 mt-0.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
</svg>
<span>{{ msg }}</span>
templates/auth/users.html
+8 -10
View File
@@ -26,15 +26,14 @@
</div>
<!-- User List -->
<div class="bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl p-6 shadow-xl overflow-hidden">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-slate-800 text-left text-sm text-slate-300">
<thead>
{{ ui::table_container_open(id="users-table", has_top_scroll=false, max_height="auto") }}
<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 scope="col" class="px-6 py-4">Username</th>
<th scope="col" class="px-6 py-4">Role</th>
<th scope="col" class="px-6 py-4">Created At</th>
<th scope="col" class="px-6 py-4 text-right">Actions</th>
<th scope="col" class="sticky top-0 z-10 px-6 py-4 bg-[#162031]">Username</th>
<th scope="col" class="sticky top-0 z-10 px-6 py-4 bg-[#162031]">Role</th>
<th scope="col" class="sticky top-0 z-10 px-6 py-4 bg-[#162031]">Created At</th>
<th scope="col" 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">
@@ -97,8 +96,7 @@
{% endif %}
</tbody>
</table>
</div>
</div>
{{ ui::table_container_close(id="users-table", has_top_scroll=false) }}
<div class="mt-6 text-center text-sm text-slate-400">
<a href="/auth/password" class="font-medium text-sky-400 hover:underline">← Back to Account Settings</a>
templates/components/macros.html
+57 -6
View File
@@ -64,7 +64,7 @@
{% endmacro %}
{% macro modal(id, title, content, close_label="Close") %}
<div id="{{ id }}" class="modal-dialog fixed inset-0 z-50 flex items-center justify-center hidden" role="dialog" aria-modal="true">
<div id="{{ id }}" class="modal-dialog fixed inset-0 z-50 items-center justify-center hidden" role="dialog" aria-modal="true">
<div class="modal-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm transition-opacity duration-300"></div>
<div class="modal-content relative z-10 w-full max-w-sm scale-95 opacity-0 transition-all duration-300 border border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl rounded-3xl text-center">
<div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 mb-3">
@@ -80,7 +80,7 @@
{% endmacro %}
{% macro modal_open(id, title) %}
<div id="{{ id }}" class="modal-dialog fixed inset-0 z-50 flex items-center justify-center hidden" role="dialog" aria-modal="true">
<div id="{{ id }}" class="modal-dialog fixed inset-0 z-50 items-center justify-center hidden" role="dialog" aria-modal="true">
<div class="modal-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm transition-opacity duration-300"></div>
<div class="modal-content relative z-10 w-full max-w-sm scale-95 opacity-0 transition-all duration-300 border border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl rounded-3xl text-center">
<div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 mb-3">
@@ -234,7 +234,7 @@
{% endif %}
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" name="{{ name }}" class="sr-only peer" {% if checked %}checked{% endif %}>
<div class="w-9 h-5 bg-secondary rounded-full border border-border peer-checked:bg-indigo-600 peer-checked:border-indigo-500 transition-all duration-300 relative after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-slate-400 after:rounded-full after:h-[14px] after:w-[14px] after:transition-all peer-checked:after:translate-x-4 peer-checked:after:bg-white"></div>
<div class="w-9 h-5 bg-secondary rounded-full border border-border peer-checked:bg-indigo-600 peer-checked:border-indigo-500 transition-all duration-300 relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-slate-400 after:rounded-full after:h-3.5 after:w-3.5 after:transition-all peer-checked:after:translate-x-4 peer-checked:after:bg-white"></div>
</label>
</div>
{% endmacro %}
@@ -279,7 +279,7 @@
</span>
<svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
</button>
<div class="datepicker-popover absolute left-0 z-20 mt-2 w-[270px] p-3 rounded-2xl border border-border bg-popover shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200 hidden">
<div class="datepicker-popover absolute left-0 z-20 mt-2 w-67.5 p-3 rounded-2xl border border-border bg-popover shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200 hidden">
<div class="flex items-center justify-between mb-3.5">
<button type="button" class="datepicker-prev p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white transition">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
@@ -315,7 +315,7 @@
</span>
<svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
</button>
<div class="timepicker-popover absolute right-0 sm:left-0 z-20 mt-2 w-[230px] p-3 rounded-2xl border border-border bg-popover shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200 hidden">
<div class="timepicker-popover absolute right-0 sm:left-0 z-20 mt-2 w-57.5 p-3 rounded-2xl border border-border bg-popover shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200 hidden">
<div class="flex gap-2 justify-center items-center">
<div class="flex flex-col items-center">
<span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Hr</span>
@@ -360,7 +360,7 @@
{% endmacro %}
{% macro tabs_content_open() %}
<div class="p-4 bg-card/50 rounded-xl border border-border text-xs text-muted-foreground min-h-[5rem]">
<div class="p-4 bg-card/50 rounded-xl border border-border text-xs text-muted-foreground min-h-20">
{% endmacro %}
{% macro tab_pane_open(group, id, is_active=true) %}
@@ -388,3 +388,54 @@
</div>
</div>
{% endmacro %}
{% macro table_container_open(id, has_top_scroll=true, max_height="68vh") %}
{% if has_top_scroll %}
<!-- Top Horizontal Scrollbar (Synced) -->
<div id="{{ id }}-scrollbar-top" class="overflow-x-auto w-full scrollbar-thin mb-3 bg-[#1e293b]/20 border border-slate-900/50 rounded-xl py-1 px-2">
<div id="{{ id }}-scrollbar-top-inner" style="height: 1px;"></div>
</div>
{% endif %}
<!-- Table Container -->
<div class="bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl shadow-2xl mb-8 overflow-hidden">
<div id="{{ id }}-container" class="overflow-auto scrollbar-thin rounded-[22px]" style="max-height: {{ max_height }};">
{% endmacro %}
{% macro table_container_close(id, has_top_scroll=true) %}
</div>
</div>
{% if has_top_scroll %}
<script>
document.addEventListener('DOMContentLoaded', () => {
const topScroll = document.getElementById('{{ id }}-scrollbar-top');
const tableContainer = document.getElementById('{{ id }}-container');
const topScrollInner = document.getElementById('{{ id }}-scrollbar-top-inner');
const table = tableContainer ? tableContainer.querySelector('table') : null;
if (topScroll && tableContainer && topScrollInner && table) {
const updateWidth = () => {
topScrollInner.style.width = table.scrollWidth + 'px';
};
// Initialize width mapping
updateWidth();
// Observe both resizing of the table and changes to table layout
const resizeObserver = new ResizeObserver(() => updateWidth());
resizeObserver.observe(table);
// Sync scroll positions
topScroll.addEventListener('scroll', () => {
tableContainer.scrollLeft = topScroll.scrollLeft;
});
tableContainer.addEventListener('scroll', () => {
topScroll.scrollLeft = tableContainer.scrollLeft;
});
}
});
</script>
{% endif %}
{% endmacro %}
templates/developers/list.html
+1 -1
View File
@@ -77,7 +77,7 @@
</div>
<!-- Action Buttons -->
<div class="flex items-center gap-2 flex-shrink-0 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<div class="flex items-center gap-2 shrink-0 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<a href="/developers/{{ dev.id.unwrap().to_hex() }}/edit" class="p-2 rounded-lg bg-sky-500/10 hover:bg-sky-500/20 border border-sky-500/20 text-sky-400 transition" title="Edit Developer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.83 20.013a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
templates/docs/sidebar.html
+2
View File
@@ -38,6 +38,7 @@
<span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Layout & Navigation</span>
<a href="/docs/tabs-accordion" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/tabs-accordion">Tabs & Accordions</a>
<a href="/docs/scrollbars" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/scrollbars">Custom Scrollbars</a>
<a href="/docs/tables" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/tables">Tables & Scroll Sync</a>
<span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Visuals & Feedback</span>
<a href="/docs/visuals" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/visuals">Avatars & Badges</a>
@@ -83,6 +84,7 @@
<span class="px-3 text-[9px] font-bold text-slate-650 uppercase tracking-wider block mt-2 mb-1">Layout & Navigation</span>
<a href="/docs/tabs-accordion" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/tabs-accordion">Tabs & Accordions</a>
<a href="/docs/scrollbars" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/scrollbars">Custom Scrollbars</a>
<a href="/docs/tables" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/tables">Tables & Scroll Sync</a>
<span class="px-3 text-[9px] font-bold text-slate-650 uppercase tracking-wider block mt-2 mb-1">Visuals & Feedback</span>
<a href="/docs/visuals" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/visuals">Avatars & Badges</a>
templates/docs/tables.html
+161
View File
@@ -0,0 +1,161 @@
{% extends "base.html" %}
{% import "components/macros.html" as ui %}
{% block title %}Tables & Scroll Sync - 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 & Scroll Sync</h1>
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
A standardized container macro for horizontal scroll synchronization and scrollbar-fitting layout. It resolves the common usability issue of unreachable scrollbars on wide tables.
</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, sticky headers, and outputs a synced scrollbar clone that rests at the top of the table.
</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", has_top_scroll=true, 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", has_top_scroll=true) }}
</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", has_top_scroll=true, max_height="68vh") }}
&lt;table class="min-w-full divide-y divide-slate-800 text-left text-sm text-slate-300 relative"&gt;
&lt;thead class="shadow-[0_1px_0_0_rgba(255,255,255,0.05)]"&gt;
&lt;tr class="text-xs font-bold text-slate-400 uppercase tracking-wider"&gt;
&lt;th class="sticky top-0 z-10 px-6 py-4 bg-[#162031]"&gt;Column 1&lt;/th&gt;
&lt;th class="sticky top-0 z-10 px-6 py-4 bg-[#162031]"&gt;Column 2&lt;/th&gt;
&lt;th class="sticky top-0 z-10 px-6 py-4 bg-[#162031] text-right"&gt;Actions&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody class="divide-y divide-slate-800"&gt;
&lt;tr class="hover:bg-[#1e293b]/20 transition"&gt;
&lt;td class="px-6 py-4"&gt;Cell Data A1&lt;/td&gt;
&lt;td class="px-6 py-4"&gt;Cell Data A2&lt;/td&gt;
&lt;td class="px-6 py-4 text-right"&gt;Edit&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
{{ ui::table_container_close(id="my-custom-table", has_top_scroll=true) }}</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">Top Scroll Sync Logic</h4>
<p class="text-xs text-muted-foreground leading-relaxed">
Since HTML natively positions horizontal scrollbars only at the bottom of overflow elements, the component generates a custom dummy scroll container at the top of the table. A Javascript listener observes layout resizing and syncs the horizontal offsets of both the top scroll track and the main table scroll track dynamically.
</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 %}
templates/tasks/dashboard.html
+2 -2
View File
@@ -63,7 +63,7 @@
<div class="bg-[#1e293b]/30 hover:bg-[#1e293b]/40 border border-slate-900 rounded-2xl p-5 flex items-start gap-4 transition duration-300 {% if item.task.is_completed %} opacity-60 {% endif %} relative overflow-hidden group">
<!-- Checkmark Indicator -->
<div class="flex-shrink-0 mt-0.5">
<div class="shrink-0 mt-0.5">
{% if item.task.is_completed %}
<div class="w-5 h-5 rounded-full bg-emerald-500/20 border border-emerald-500/50 flex items-center justify-center text-emerald-400">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3.5 h-3.5">
@@ -103,7 +103,7 @@
</div>
<!-- Action Buttons -->
<div class="flex items-center gap-2 flex-shrink-0 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<div class="flex items-center gap-2 shrink-0 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
{% if !item.task.is_completed %}
<form action="/tasks/{{ item.task.id.unwrap().to_hex() }}/complete" method="post" class="inline">
<button type="submit" class="p-2 rounded-lg bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/20 text-emerald-400 transition" title="Mark Completed">