ui: system logs style update

- Increase padding in admin log dropdown selects
- Move admin log filters above the Journaux tabs
This commit is contained in:
Pontoporeia
2026-08-24 11:34:34 +02:00
parent d2cef85966
commit 3e721b19f0
4 changed files with 31 additions and 28 deletions
+7 -4
View File
@@ -204,16 +204,16 @@
}
/* ── Tab panel loading state ───────────────────────────────────────────── */
#sys-tab-panel {
#sys-log-view {
min-height: 8rem;
position: relative;
}
#sys-tab-panel.htmx-request {
#sys-log-view.htmx-request {
opacity: 0.4;
pointer-events: none;
transition: opacity 0.1s;
}
#sys-tab-panel.htmx-request::after {
#sys-log-view.htmx-request::after {
content: "";
position: absolute;
inset: 0;
@@ -250,7 +250,10 @@
color: var(--text-secondary);
}
.log-toolbar select {
padding: var(--space-3xs) var(--space-xs);
padding: var(--space-xs) var(--space-s);
padding-right: 1.75rem;
line-height: 1.4;
min-height: 2.75rem;
}
.log-toolbar select:focus {
outline: 2px solid var(--accent-primary);
+3 -3
View File
@@ -3,7 +3,7 @@
*
* Provides:
* - copyLogContent(btn) — copy visible log lines to clipboard
* - HTMX afterSwap handler to update active tab class on #sys-tab-panel
* - HTMX afterSwap handler to update active tab class on #sys-log-view
*/
(() => {
window.copyLogContent = (btn) => {
@@ -44,9 +44,9 @@
document.body.removeChild(ta);
};
// Update active tab class after each HTMX swap on #sys-tab-panel
// Update active tab class after each HTMX swap on #sys-log-view
document.body.addEventListener("htmx:afterSwap", (evt) => {
if (!(evt.detail.target && evt.detail.target.id === "sys-tab-panel"))
if (!(evt.detail.target && evt.detail.target.id === "sys-log-view"))
return;
var rc = evt.detail.requestConfig;
var tab = null;
+1 -17
View File
@@ -458,23 +458,7 @@
<section aria-labelledby="settings-logs-title">
<h2 id="settings-logs-title">Journaux</h2>
<nav class="sys-tabs" aria-label="Journaux et configuration">
<?php foreach (SystemController::LOG_FILES as $key => $def): ?>
<a href="?tab=<?= htmlspecialchars($key) ?>&amp;date=<?= htmlspecialchars($selectedDate ?? '') ?>&amp;n=<?= $selectedN ?>"
class="sys-tab <?= $activeTab === $key ? 'active' : '' ?>"
hx-get="/admin/system-fragment.php?tab=<?= htmlspecialchars($key) ?>&amp;date=<?= htmlspecialchars($selectedDate ?? '') ?>&amp;n=<?= $selectedN ?>"
hx-target="#sys-tab-panel"
hx-push-url="?tab=<?= htmlspecialchars($key) ?>&amp;date=<?= htmlspecialchars($selectedDate ?? '') ?>&amp;n=<?= $selectedN ?>"
hx-swap="innerHTML"
hx-indicator="#sys-tab-panel"
data-tab="<?= htmlspecialchars($key) ?>"
<?= $activeTab === $key ? 'aria-current="page"' : '' ?>>
<?= htmlspecialchars($def['label']) ?>
</a>
<?php endforeach; ?>
</nav>
<div id="sys-tab-panel">
<div id="sys-log-view">
<?php include APP_ROOT . '/templates/admin/partials/system-log-panel.php'; ?>
</div>
</section>
@@ -1,8 +1,8 @@
<div class="log-toolbar">
<form id="lines-form" hx-get="/admin/system-fragment.php"
hx-target="#sys-tab-panel"
hx-target="#sys-log-view"
hx-swap="innerHTML"
hx-indicator="#sys-tab-panel"
hx-indicator="#sys-log-view"
hx-trigger="change"
hx-vals='{"tab":"<?= htmlspecialchars($activeTab) ?>","date":"<?= htmlspecialchars($selectedDate ?? '') ?>"}'>
<label for="lines-select">Afficher</label>
@@ -15,9 +15,9 @@
<?php if (!empty($logDates)): ?>
<form id="date-form" hx-get="/admin/system-fragment.php"
hx-target="#sys-tab-panel"
hx-target="#sys-log-view"
hx-swap="innerHTML"
hx-indicator="#sys-tab-panel"
hx-indicator="#sys-log-view"
hx-trigger="change"
hx-vals='{"tab":"<?= htmlspecialchars($activeTab) ?>","n":<?= $selectedN ?>}'>
<label for="date-select">Jour</label>
@@ -34,6 +34,22 @@
<?php endif; ?>
</div>
<nav class="sys-tabs" aria-label="Journaux et configuration">
<?php foreach (SystemController::LOG_FILES as $key => $def): ?>
<a href="?tab=<?= htmlspecialchars($key) ?>&amp;date=<?= htmlspecialchars($selectedDate ?? '') ?>&amp;n=<?= $selectedN ?>"
class="sys-tab <?= $activeTab === $key ? 'active' : '' ?>"
hx-get="/admin/system-fragment.php?tab=<?= htmlspecialchars($key) ?>&amp;date=<?= htmlspecialchars($selectedDate ?? '') ?>&amp;n=<?= $selectedN ?>"
hx-target="#sys-log-view"
hx-push-url="?tab=<?= htmlspecialchars($key) ?>&amp;date=<?= htmlspecialchars($selectedDate ?? '') ?>&amp;n=<?= $selectedN ?>"
hx-swap="innerHTML"
hx-indicator="#sys-log-view"
data-tab="<?= htmlspecialchars($key) ?>"
<?= $activeTab === $key ? 'aria-current="page"' : '' ?>>
<?= htmlspecialchars($def['label']) ?>
</a>
<?php endforeach; ?>
</nav>
<?php if ($logFileMeta): ?>
<div class="log-meta">
<span data-label="Fichier"><?= htmlspecialchars($logFileMeta['path']) ?></span>