sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add details modal and log modal patterns to component library

Browse Source 
- Add Details Modal (Table Layout) example to components page
  - Shows header with icon and status badge
  - Stats cards grid (imported, updated, errors, total)
  - Key-value table with icon-labeled rows
- Add Log Details Modal example with live demo
  - Level-based coloring (warning=yellow, error=red, critical=purple)
  - Message, exception, and stack trace sections
  - Copy-to-clipboard for stack traces
  - Both error and warning log demo buttons
- Update jinja-macros.md with Details Modal Pattern documentation
  - Document the pattern structure and key features
  - Link to components library for live examples
- Add Alpine.js state variables for new modal demos

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2025-12-11 17:52:36 +01:00
parent 2239522d79
commit a40c88dcea
4 changed files with 421 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
docs/frontend/shared/jinja-macros.md
View File

@@ -43,7 +43,7 @@ The Jinja macros library provides reusable UI components for building consistent
| [dropdowns.html](#dropdowns) | 8 | Dropdown menus, context menus |
| [forms.html](#forms) | 12 | Input fields, selects, checkboxes |
| [headers.html](#headers) | 6 | Page headers, breadcrumbs, tabs |
| [modals.html](#modals) | 5 | Modal dialogs, slide-overs |
| [modals.html](#modals) | 5 + patterns | Modal dialogs, slide-overs, detail patterns |
| [pagination.html](#pagination) | 2 | Table pagination controls |
| [tables.html](#tables) | 10 | Table wrappers, cells, empty states |
@@ -927,6 +927,93 @@ Side panel that slides in from the right.
|-----------|------|---------|-------------|
| `width` | string | `'md'` | `'sm'`, `'md'`, `'lg'`, `'xl'` |
### Details Modal Pattern (Inline)
For complex detail views (job details, log entries, etc.), use inline modals with this pattern structure:
**Structure:**
1. **Header** - Icon with status-based coloring, title, subtitle, status badge, close button
2. **Stats Cards** - Grid of colored stat cards (imported, updated, errors, total)
3. **Details Table** - Key-value pairs with icons in a bordered table
4. **Content Sections** - Message, exception, stack trace (conditional)
5. **Footer** - Close button with proper styling
**Example implementations:**
- Job Details Modal: `app/templates/shared/macros/modals.html` → `job_details_modal`
- Log Details Modal: `app/templates/admin/logs.html` (inline)
**Key Features:**
- Level-based icon and color theming (success=green, warning=yellow, error=red, critical=purple)
- Stats cards grid with color-coded backgrounds
- Table layout with icon-labeled rows
- Conditional sections (exception, stack trace) with `x-show`
- Copy-to-clipboard for stack traces
- Dark mode support throughout
```jinja
{# Example structure #}
<div x-show="selectedItem" class="fixed inset-0 z-50 ...">
<div class="bg-white dark:bg-gray-800 rounded-lg ...">
{# Header with Icon and Badge #}
<div class="px-6 py-4 border-b ...">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
<span class="text-green-600" x-html="$icon('check-circle', 'w-6 h-6')"></span>
</div>
<div>
<h3 class="text-lg font-semibold">Title</h3>
<p class="text-sm text-gray-500">Subtitle</p>
</div>
</div>
<div class="flex items-center gap-3">
<span class="px-3 py-1 text-sm font-semibold rounded-full bg-green-100 text-green-800">Status</span>
<button @click="selectedItem = null">×</button>
</div>
</div>
</div>
{# Body: Stats Cards + Details Table + Content Sections #}
<div class="p-6 overflow-y-auto ...">
{# Stats Cards Grid #}
<div class="grid grid-cols-4 gap-3">
<div class="p-3 bg-green-50 rounded-lg text-center">
<p class="text-2xl font-bold text-green-600">150</p>
<p class="text-xs text-green-700">Imported</p>
</div>
<!-- More cards... -->
</div>
{# Details Table #}
<div class="overflow-hidden border rounded-lg">
<table class="min-w-full">
<tbody>
<tr>
<td class="px-4 py-3 bg-gray-50 w-1/3">
<div class="flex items-center gap-2">
<span x-html="$icon('user', 'w-4 h-4')"></span>
Field Name
</div>
</td>
<td class="px-4 py-3">Value</td>
</tr>
</tbody>
</table>
</div>
</div>
{# Footer #}
<div class="px-6 py-4 border-t bg-gray-50">
<div class="flex justify-end">
<button @click="selectedItem = null">Close</button>
</div>
</div>
</div>
</div>
```
See the [Components Library](/admin/components#modals) for live examples.
---
## Pagination