fix a few things

This commit is contained in:
Ross
2026-06-08 10:57:01 +01:00
parent 9919af2b20
commit 161da980cf
12 changed files with 436 additions and 36 deletions
+57 -17
View File
@@ -26,6 +26,21 @@
border-radius: 0.375rem;
padding: 0.75rem;
}
.logs-filter-group {
border: 1px solid var(--bs-border-color);
border-radius: 0.5rem;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.02);
}
.logs-filter-group legend {
width: auto;
padding: 0 0.35rem;
margin: 0;
font-size: 0.8rem;
color: var(--bs-secondary-color);
text-transform: uppercase;
letter-spacing: 0.04em;
}
</style>
{% endblock %}
@@ -58,35 +73,59 @@
<div class="card border-0 shadow-sm mb-4">
<div class="card-body">
<form method="get" class="row g-2">
<div class="col-12 col-md-5">
<form method="get" class="row g-3">
<div class="col-12 col-lg-5">
<label for="id_logs_query" class="form-label small text-muted mb-1">Keyword</label>
<input type="search"
id="id_logs_query"
name="q"
class="form-control"
placeholder="Search logs by keyword (error, warning, etc)…"
value="{{ search_query }}">
</div>
<div class="col-12 col-md-3">
<select name="level" class="form-select">
<div class="col-12 col-lg-3">
<label for="id_logs_level" class="form-label small text-muted mb-1">Level</label>
<select id="id_logs_level" name="level" class="form-select">
<option value="">All levels</option>
{% for level in available_levels %}
<option value="{{ level }}" {% if level_filter == level %}selected{% endif %}>{{ level }}</option>
{% endfor %}
</select>
</div>
<div class="col-12 col-md-2">
<input type="date" name="date_from" class="form-control" value="{{ date_from }}" aria-label="Date from">
<div class="col-12 col-lg-4">
<fieldset class="logs-filter-group">
<legend>Date Range</legend>
<div class="row g-2">
<div class="col-12 col-sm-6">
<label for="id_logs_date_from" class="form-label small mb-1">From date</label>
<input id="id_logs_date_from" type="date" name="date_from" class="form-control" value="{{ date_from }}" aria-label="Date from">
</div>
<div class="col-12 col-sm-6">
<label for="id_logs_date_to" class="form-label small mb-1">To date</label>
<input id="id_logs_date_to" type="date" name="date_to" class="form-control" value="{{ date_to }}" aria-label="Date to">
</div>
</div>
</fieldset>
</div>
<div class="col-12 col-md-2">
<input type="date" name="date_to" class="form-control" value="{{ date_to }}" aria-label="Date to">
<div class="col-12 col-lg-4">
<fieldset class="logs-filter-group">
<legend>Time Range</legend>
<div class="row g-2">
<div class="col-12 col-sm-6">
<label for="id_logs_time_from" class="form-label small mb-1">From time</label>
<input id="id_logs_time_from" type="time" name="time_from" class="form-control" value="{{ time_from }}" aria-label="Time from">
</div>
<div class="col-12 col-sm-6">
<label for="id_logs_time_to" class="form-label small mb-1">To time</label>
<input id="id_logs_time_to" type="time" name="time_to" class="form-control" value="{{ time_to }}" aria-label="Time to">
</div>
</div>
</fieldset>
</div>
<div class="col-12 col-md-1">
<input type="time" name="time_from" class="form-control" value="{{ time_from }}" aria-label="Time from">
</div>
<div class="col-12 col-md-1">
<input type="time" name="time_to" class="form-control" value="{{ time_to }}" aria-label="Time to">
</div>
<div class="col-12 col-md-2 d-flex align-items-center">
<div class="col-12 col-lg-4 d-flex align-items-center">
<div class="form-check mt-1">
<input class="form-check-input" type="checkbox" value="1" id="include_noise" name="include_noise" {% if include_noise %}checked{% endif %}>
<label class="form-check-label small" for="include_noise">
@@ -94,10 +133,11 @@
</label>
</div>
</div>
<div class="col-12 col-md-auto">
<div class="col-12 col-md-auto d-flex flex-wrap gap-2">
<button type="submit" class="btn btn-primary">Search</button>
{% if search_query or level_filter %}
<a href="{% url 'logs_view' %}" class="btn btn-outline-secondary ms-1">Clear</a>
<a href="{% url 'logs_view' %}" class="btn btn-outline-secondary">Clear</a>
{% endif %}
</div>
<div class="col-12 col-md-auto">
+66
View File
@@ -15,6 +15,10 @@
pointer-events: none;
opacity: 0.7;
}
.media-cleanup-modal-spinner {
width: 2.5rem;
height: 2.5rem;
}
</style>
{% endblock %}
@@ -92,6 +96,8 @@
name="action"
value="preview"
class="btn btn-primary"
data-loading-title="Previewing unused files"
data-loading-message="Scanning media storage for orphaned files."
>
<i class="bi bi-search me-1"></i> Preview unused files
</button>
@@ -101,6 +107,8 @@
value="cleanup"
class="btn btn-danger"
hx-confirm="Delete unused media files now? This cannot be undone."
data-loading-title="Deleting unused files"
data-loading-message="Removing orphaned media and recalculating disk usage."
>
<i class="bi bi-trash me-1"></i> Delete unused files
</button>
@@ -118,4 +126,62 @@
{% include 'rad/partials/_media_cleanup_result.html' %}
</div>
</div>
<div class="modal fade" id="media-cleanup-loading-modal" tabindex="-1" aria-labelledby="media-cleanup-loading-title" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content border-0 shadow">
<div class="modal-body text-center py-4">
<div class="spinner-border text-info media-cleanup-modal-spinner mb-3" role="status" aria-hidden="true"></div>
<h5 id="media-cleanup-loading-title" class="mb-1">Working...</h5>
<p id="media-cleanup-loading-message" class="text-muted mb-0 small">Please wait while this operation completes.</p>
</div>
</div>
</div>
</div>
<script>
(function () {
var form = document.getElementById('media-cleanup-form');
var modalEl = document.getElementById('media-cleanup-loading-modal');
if (!form || !modalEl || typeof bootstrap === 'undefined') {
return;
}
var titleEl = document.getElementById('media-cleanup-loading-title');
var messageEl = document.getElementById('media-cleanup-loading-message');
var loadingModal = bootstrap.Modal.getOrCreateInstance(modalEl);
var activeButton = null;
form.addEventListener('click', function (event) {
var btn = event.target.closest('button[type="submit"]');
if (!btn || !form.contains(btn)) {
return;
}
activeButton = btn;
});
document.body.addEventListener('htmx:beforeRequest', function (event) {
if (event.target !== form) {
return;
}
var title = activeButton ? activeButton.getAttribute('data-loading-title') : null;
var message = activeButton ? activeButton.getAttribute('data-loading-message') : null;
titleEl.textContent = title || 'Working...';
messageEl.textContent = message || 'Please wait while this operation completes.';
loadingModal.show();
});
function hideLoadingModal(event) {
if (event.target !== form) {
return;
}
loadingModal.hide();
activeButton = null;
}
document.body.addEventListener('htmx:afterRequest', hideLoadingModal);
document.body.addEventListener('htmx:responseError', hideLoadingModal);
document.body.addEventListener('htmx:sendError', hideLoadingModal);
})();
</script>
{% endblock %}