Fix Admin Search Layout: Add Reset button, force inline filters, fix date range dropdown style
This commit is contained in:
Flatlogic Bot
parent
e20e167414
commit
5189171048
@ -2,26 +2,37 @@
|
||||
{% get_jazzmin_ui_tweaks as jazzmin_ui %}
|
||||
|
||||
<div id="toolbar" class="clearfix mb-3">
|
||||
<form id="changelist-search" method="get" class="form-inline">
|
||||
<form id="changelist-search" method="get" class="form-inline" style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px;">
|
||||
|
||||
{# --- RESTORED FILTERS (Sorting Panel) --- #}
|
||||
{% if cl.has_filters %}
|
||||
<div class="mr-2 mb-2" style="display: flex; flex-wrap: wrap; gap: 5px;">
|
||||
<div id="filters-container" style="display: flex; flex-wrap: wrap; gap: 5px; align-items: center;">
|
||||
{% for spec in cl.filter_specs %}
|
||||
{% jazzmin_list_filter cl spec %}
|
||||
<div class="filter-wrapper" style="display: inline-flex; align-items: center;">
|
||||
{% jazzmin_list_filter cl spec %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{# ---------------------------------------- #}
|
||||
|
||||
{% if cl.search_fields %}
|
||||
<div class="input-group mb-2" style="width: auto; max-width: 300px; display: flex; flex-wrap: nowrap;">
|
||||
<input type="text" size="40" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" class="form-control" placeholder="{% trans 'Search' %}" autofocus style="border-top-right-radius: 0; border-bottom-right-radius: 0; flex: 1;">
|
||||
<div class="input-group-append">
|
||||
<button type="submit" class="btn {{ jazzmin_ui.button_classes.primary|default:'btn-primary' }}" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">
|
||||
<i class="fas fa-search"></i> {% trans 'Search' %}
|
||||
</button>
|
||||
<div class="search-container" style="display: flex; gap: 5px; align-items: center;">
|
||||
<div class="input-group" style="width: auto; max-width: 300px; display: flex; flex-wrap: nowrap;">
|
||||
<input type="text" size="40" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" class="form-control" placeholder="{% trans 'Search' %}" autofocus style="border-top-right-radius: 0; border-bottom-right-radius: 0; flex: 1;">
|
||||
<div class="input-group-append">
|
||||
<button type="submit" class="btn {{ jazzmin_ui.button_classes.primary|default:'btn-primary' }}" style="border-top-left-radius: 0; border-bottom-left-radius: 0; white-space: nowrap;">
|
||||
<i class="fas fa-search"></i> {% trans 'Search' %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# --- RESET BUTTON --- #}
|
||||
{% if cl.query or cl.has_filters %}
|
||||
<a href="." class="btn {{ jazzmin_ui.button_classes.secondary|default:'btn-secondary' }}" style="white-space: nowrap;">
|
||||
<i class="fas fa-undo"></i> {% trans 'Reset' %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@ -31,4 +42,4 @@
|
||||
{% endfor %}
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -179,7 +179,7 @@ body.model-platformprofile label[for="id_admin_panel_logo"] {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* --- Fix Admin Search Box Layout (Backup for overridden template) --- */
|
||||
/* --- Fix Admin Search Box & Filter Layout --- */
|
||||
|
||||
/* Target the search form container in Jazzmin/AdminLTE */
|
||||
#changelist-search .input-group {
|
||||
@ -199,3 +199,18 @@ body.model-platformprofile label[for="id_admin_panel_logo"] {
|
||||
#changelist-search .btn {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
/* Force filters to sit nicely in a row */
|
||||
.filter-wrapper .form-group,
|
||||
.filter-wrapper select,
|
||||
.filter-wrapper .select2-container {
|
||||
margin-bottom: 0 !important;
|
||||
display: inline-block !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
/* Fix for Date Range Inputs if they appear */
|
||||
.admindatefilter .controls {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
@ -9,8 +9,6 @@
|
||||
}
|
||||
|
||||
function initDateRangeDropdown() {
|
||||
// Find start date inputs for 'created_at' (or generic generic approach for any range filter)
|
||||
// rangefilter inputs typically have names ending in __gte and __lte
|
||||
var $gteInputs = $('input[name$="__gte"]');
|
||||
|
||||
$gteInputs.each(function() {
|
||||
@ -19,37 +17,24 @@
|
||||
var prefix = name.substring(0, name.lastIndexOf('__gte'));
|
||||
var $lte = $('input[name="' + prefix + '__lte"]');
|
||||
|
||||
if ($lte.length === 0) return; // Not a pair
|
||||
if ($lte.length === 0) return;
|
||||
|
||||
// Find a container to inject the dropdown.
|
||||
// In Jazzmin/Standard, this might be inside a .admindatefilter div,
|
||||
// or just a li, or a div.controls.
|
||||
// We'll look for the closest container that seems to wrap the filter.
|
||||
|
||||
// Try to find .admindatefilter first
|
||||
var $container = $gte.closest('.admindatefilter');
|
||||
if ($container.length === 0) {
|
||||
// Fallback for Jazzmin or other themes: closest .card-body or similar?
|
||||
// Or just the parent form/div
|
||||
$container = $gte.closest('div[data-filter-name], li, .form-row, .card-body');
|
||||
$container = $gte.closest('div[data-filter-name], li, .form-row, .card-body, .filter-wrapper');
|
||||
}
|
||||
|
||||
if ($container.length === 0) $container = $gte.parent();
|
||||
|
||||
if ($container.data('dropdown-init')) return;
|
||||
$container.data('dropdown-init', true);
|
||||
|
||||
// Hide the original inputs/controls container
|
||||
// We need to be careful not to hide the form itself if it's the main filter form
|
||||
// Usually rangefilter puts inputs in a 'controls' div or paragraphs.
|
||||
var $controls = $gte.closest('.controls');
|
||||
if ($controls.length === 0) {
|
||||
// Try to find the immediate parent if it contains both inputs
|
||||
$controls = $gte.parent();
|
||||
}
|
||||
|
||||
// Create Select
|
||||
var $select = $('<select class="form-control admin-date-dropdown" style="width: 100%; margin-bottom: 10px; margin-top: 5px;">' +
|
||||
// --- CHANGED: Use 'custom-select' and remove fixed width ---
|
||||
var $select = $('<select class="form-control custom-select admin-date-dropdown" style="width: auto; min-width: 120px; display: inline-block; margin-right: 5px;">' +
|
||||
'<option value="any">Any Date</option>' +
|
||||
'<option value="today">Today</option>' +
|
||||
'<option value="7days">Last 7 Days</option>' +
|
||||
@ -58,20 +43,30 @@
|
||||
'<option value="custom">Custom Range...</option>' +
|
||||
'</select>');
|
||||
|
||||
// Inject before the controls (inputs)
|
||||
// --- CHANGED: Ensure controls are flex-friendly if we want "one row" ---
|
||||
// We'll wrap the inputs in a flex span if they aren't already
|
||||
$controls.css({
|
||||
'display': 'inline-flex',
|
||||
'align-items': 'center',
|
||||
'gap': '5px'
|
||||
});
|
||||
|
||||
// Style inputs to be small
|
||||
$gte.addClass('form-control form-control-sm').css('width', '110px');
|
||||
$lte.addClass('form-control form-control-sm').css('width', '110px');
|
||||
|
||||
if ($controls.length) {
|
||||
$controls.before($select);
|
||||
} else {
|
||||
$gte.before($select);
|
||||
}
|
||||
|
||||
// Initial State
|
||||
var gteVal = $gte.val();
|
||||
var lteVal = $lte.val();
|
||||
|
||||
if (gteVal || lteVal) {
|
||||
$select.val('custom');
|
||||
$controls.show();
|
||||
$controls.css('display', 'inline-flex'); // Show as flex
|
||||
} else {
|
||||
$select.val('any');
|
||||
$controls.hide();
|
||||
@ -82,7 +77,7 @@
|
||||
var today = new Date();
|
||||
|
||||
if (val === 'custom') {
|
||||
$controls.slideDown();
|
||||
$controls.css('display', 'inline-flex').hide().fadeIn(); // Animate in
|
||||
} else {
|
||||
if (val === 'any') {
|
||||
$gte.val('');
|
||||
@ -109,15 +104,10 @@
|
||||
$lte.val(endStr);
|
||||
}
|
||||
|
||||
// Submit form
|
||||
// In Jazzmin, the filter form might be #changelist-search or similiar
|
||||
var $form = $gte.closest('form');
|
||||
if ($form.length) {
|
||||
$form.submit();
|
||||
} else {
|
||||
// Try to find a global apply button or trigger change?
|
||||
// Some admin themes auto-submit on change.
|
||||
// rangefilter usually has a submit button.
|
||||
var $btn = $container.find('input[type="submit"], button[type="submit"]');
|
||||
if ($btn.length) $btn.click();
|
||||
}
|
||||
@ -126,10 +116,7 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Run init
|
||||
initDateRangeDropdown();
|
||||
|
||||
// Safety: Run again after a slight delay in case of dynamic loading (unlikely in admin but possible)
|
||||
setTimeout(initDateRangeDropdown, 500);
|
||||
});
|
||||
})(django.jQuery);
|
||||
})(django.jQuery);
|
||||
|
||||
@ -179,7 +179,7 @@ body.model-platformprofile label[for="id_admin_panel_logo"] {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* --- Fix Admin Search Box Layout (Backup for overridden template) --- */
|
||||
/* --- Fix Admin Search Box & Filter Layout --- */
|
||||
|
||||
/* Target the search form container in Jazzmin/AdminLTE */
|
||||
#changelist-search .input-group {
|
||||
@ -199,3 +199,18 @@ body.model-platformprofile label[for="id_admin_panel_logo"] {
|
||||
#changelist-search .btn {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
/* Force filters to sit nicely in a row */
|
||||
.filter-wrapper .form-group,
|
||||
.filter-wrapper select,
|
||||
.filter-wrapper .select2-container {
|
||||
margin-bottom: 0 !important;
|
||||
display: inline-block !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
/* Fix for Date Range Inputs if they appear */
|
||||
.admindatefilter .controls {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
@ -9,8 +9,6 @@
|
||||
}
|
||||
|
||||
function initDateRangeDropdown() {
|
||||
// Find start date inputs for 'created_at' (or generic generic approach for any range filter)
|
||||
// rangefilter inputs typically have names ending in __gte and __lte
|
||||
var $gteInputs = $('input[name$="__gte"]');
|
||||
|
||||
$gteInputs.each(function() {
|
||||
@ -19,37 +17,24 @@
|
||||
var prefix = name.substring(0, name.lastIndexOf('__gte'));
|
||||
var $lte = $('input[name="' + prefix + '__lte"]');
|
||||
|
||||
if ($lte.length === 0) return; // Not a pair
|
||||
if ($lte.length === 0) return;
|
||||
|
||||
// Find a container to inject the dropdown.
|
||||
// In Jazzmin/Standard, this might be inside a .admindatefilter div,
|
||||
// or just a li, or a div.controls.
|
||||
// We'll look for the closest container that seems to wrap the filter.
|
||||
|
||||
// Try to find .admindatefilter first
|
||||
var $container = $gte.closest('.admindatefilter');
|
||||
if ($container.length === 0) {
|
||||
// Fallback for Jazzmin or other themes: closest .card-body or similar?
|
||||
// Or just the parent form/div
|
||||
$container = $gte.closest('div[data-filter-name], li, .form-row, .card-body');
|
||||
$container = $gte.closest('div[data-filter-name], li, .form-row, .card-body, .filter-wrapper');
|
||||
}
|
||||
|
||||
if ($container.length === 0) $container = $gte.parent();
|
||||
|
||||
if ($container.data('dropdown-init')) return;
|
||||
$container.data('dropdown-init', true);
|
||||
|
||||
// Hide the original inputs/controls container
|
||||
// We need to be careful not to hide the form itself if it's the main filter form
|
||||
// Usually rangefilter puts inputs in a 'controls' div or paragraphs.
|
||||
var $controls = $gte.closest('.controls');
|
||||
if ($controls.length === 0) {
|
||||
// Try to find the immediate parent if it contains both inputs
|
||||
$controls = $gte.parent();
|
||||
}
|
||||
|
||||
// Create Select
|
||||
var $select = $('<select class="form-control admin-date-dropdown" style="width: 100%; margin-bottom: 10px; margin-top: 5px;">' +
|
||||
// --- CHANGED: Use 'custom-select' and remove fixed width ---
|
||||
var $select = $('<select class="form-control custom-select admin-date-dropdown" style="width: auto; min-width: 120px; display: inline-block; margin-right: 5px;">' +
|
||||
'<option value="any">Any Date</option>' +
|
||||
'<option value="today">Today</option>' +
|
||||
'<option value="7days">Last 7 Days</option>' +
|
||||
@ -58,20 +43,30 @@
|
||||
'<option value="custom">Custom Range...</option>' +
|
||||
'</select>');
|
||||
|
||||
// Inject before the controls (inputs)
|
||||
// --- CHANGED: Ensure controls are flex-friendly if we want "one row" ---
|
||||
// We'll wrap the inputs in a flex span if they aren't already
|
||||
$controls.css({
|
||||
'display': 'inline-flex',
|
||||
'align-items': 'center',
|
||||
'gap': '5px'
|
||||
});
|
||||
|
||||
// Style inputs to be small
|
||||
$gte.addClass('form-control form-control-sm').css('width', '110px');
|
||||
$lte.addClass('form-control form-control-sm').css('width', '110px');
|
||||
|
||||
if ($controls.length) {
|
||||
$controls.before($select);
|
||||
} else {
|
||||
$gte.before($select);
|
||||
}
|
||||
|
||||
// Initial State
|
||||
var gteVal = $gte.val();
|
||||
var lteVal = $lte.val();
|
||||
|
||||
if (gteVal || lteVal) {
|
||||
$select.val('custom');
|
||||
$controls.show();
|
||||
$controls.css('display', 'inline-flex'); // Show as flex
|
||||
} else {
|
||||
$select.val('any');
|
||||
$controls.hide();
|
||||
@ -82,7 +77,7 @@
|
||||
var today = new Date();
|
||||
|
||||
if (val === 'custom') {
|
||||
$controls.slideDown();
|
||||
$controls.css('display', 'inline-flex').hide().fadeIn(); // Animate in
|
||||
} else {
|
||||
if (val === 'any') {
|
||||
$gte.val('');
|
||||
@ -109,15 +104,10 @@
|
||||
$lte.val(endStr);
|
||||
}
|
||||
|
||||
// Submit form
|
||||
// In Jazzmin, the filter form might be #changelist-search or similiar
|
||||
var $form = $gte.closest('form');
|
||||
if ($form.length) {
|
||||
$form.submit();
|
||||
} else {
|
||||
// Try to find a global apply button or trigger change?
|
||||
// Some admin themes auto-submit on change.
|
||||
// rangefilter usually has a submit button.
|
||||
var $btn = $container.find('input[type="submit"], button[type="submit"]');
|
||||
if ($btn.length) $btn.click();
|
||||
}
|
||||
@ -126,10 +116,7 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Run init
|
||||
initDateRangeDropdown();
|
||||
|
||||
// Safety: Run again after a slight delay in case of dynamic loading (unlikely in admin but possible)
|
||||
setTimeout(initDateRangeDropdown, 500);
|
||||
});
|
||||
})(django.jQuery);
|
||||
})(django.jQuery);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user