Fix Date Filter layout to be compact/horizontal
This commit is contained in:
Flatlogic Bot
parent
e5357909b3
commit
b01c5f2dce
@ -209,10 +209,41 @@ body.model-platformprofile label[for="id_admin_panel_logo"] {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
/* Fix for Date Range Inputs if they appear */
|
||||
.admindatefilter .controls {
|
||||
/* --- Date Range Filter Styling (Compact & Horizontal) --- */
|
||||
|
||||
/* The dropdown we injected */
|
||||
.admin-date-dropdown {
|
||||
width: auto !important;
|
||||
min-width: 120px;
|
||||
display: inline-block !important;
|
||||
margin-bottom: 5px; /* Spacing if it wraps */
|
||||
margin-left: 5px; /* Spacing for RTL (since we use float/flex) */
|
||||
}
|
||||
|
||||
/* The container of inputs (From/To) */
|
||||
.admindatefilter .controls.date-filter-controls {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
flex-wrap: nowrap !important;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* The actual date inputs */
|
||||
.admindatefilter .date-input {
|
||||
width: 90px !important; /* Force small width */
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Ensure the whole filter block flows nicely if possible */
|
||||
.admindatefilter {
|
||||
display: block; /* Default block in sidebar */
|
||||
}
|
||||
|
||||
/* If filters are in a horizontal top bar (Jazzmin tweaks), ensure they flow */
|
||||
.filter-wrapper .admindatefilter {
|
||||
display: inline-block !important;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* --- Search Box RTL/LTR Border Radius Handling --- */
|
||||
|
||||
@ -32,9 +32,10 @@
|
||||
if ($controls.length === 0) {
|
||||
$controls = $gte.parent();
|
||||
}
|
||||
$controls.addClass('date-filter-controls'); // Hook for CSS
|
||||
|
||||
// --- 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;">' +
|
||||
// --- Dropdown ---
|
||||
var $select = $('<select class="form-control custom-select admin-date-dropdown">' +
|
||||
'<option value="any">Any Date</option>' +
|
||||
'<option value="today">Today</option>' +
|
||||
'<option value="7days">Last 7 Days</option>' +
|
||||
@ -43,41 +44,36 @@
|
||||
'<option value="custom">Custom Range...</option>' +
|
||||
'</select>');
|
||||
|
||||
// --- 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');
|
||||
// --- Inputs Styling ---
|
||||
$gte.addClass('form-control form-control-sm date-input');
|
||||
$lte.addClass('form-control form-control-sm date-input');
|
||||
|
||||
// Insert Dropdown
|
||||
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.css('display', 'inline-flex'); // Show as flex
|
||||
$controls.css('display', 'inline-flex'); // Ensure flex
|
||||
} else {
|
||||
$select.val('any');
|
||||
$controls.hide();
|
||||
}
|
||||
|
||||
// Event Listener
|
||||
$select.on('change', function() {
|
||||
var val = $(this).val();
|
||||
var today = new Date();
|
||||
|
||||
if (val === 'custom') {
|
||||
$controls.css('display', 'inline-flex').hide().fadeIn(); // Animate in
|
||||
$controls.css('display', 'inline-flex').hide().fadeIn();
|
||||
} else {
|
||||
if (val === 'any') {
|
||||
$gte.val('');
|
||||
@ -104,6 +100,7 @@
|
||||
$lte.val(endStr);
|
||||
}
|
||||
|
||||
// Auto-submit
|
||||
var $form = $gte.closest('form');
|
||||
if ($form.length) {
|
||||
$form.submit();
|
||||
@ -119,4 +116,4 @@
|
||||
initDateRangeDropdown();
|
||||
setTimeout(initDateRangeDropdown, 500);
|
||||
});
|
||||
})(django.jQuery);
|
||||
})(django.jQuery);
|
||||
@ -209,10 +209,41 @@ body.model-platformprofile label[for="id_admin_panel_logo"] {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
/* Fix for Date Range Inputs if they appear */
|
||||
.admindatefilter .controls {
|
||||
/* --- Date Range Filter Styling (Compact & Horizontal) --- */
|
||||
|
||||
/* The dropdown we injected */
|
||||
.admin-date-dropdown {
|
||||
width: auto !important;
|
||||
min-width: 120px;
|
||||
display: inline-block !important;
|
||||
margin-bottom: 5px; /* Spacing if it wraps */
|
||||
margin-left: 5px; /* Spacing for RTL (since we use float/flex) */
|
||||
}
|
||||
|
||||
/* The container of inputs (From/To) */
|
||||
.admindatefilter .controls.date-filter-controls {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
flex-wrap: nowrap !important;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* The actual date inputs */
|
||||
.admindatefilter .date-input {
|
||||
width: 90px !important; /* Force small width */
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Ensure the whole filter block flows nicely if possible */
|
||||
.admindatefilter {
|
||||
display: block; /* Default block in sidebar */
|
||||
}
|
||||
|
||||
/* If filters are in a horizontal top bar (Jazzmin tweaks), ensure they flow */
|
||||
.filter-wrapper .admindatefilter {
|
||||
display: inline-block !important;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* --- Search Box RTL/LTR Border Radius Handling --- */
|
||||
|
||||
@ -32,9 +32,10 @@
|
||||
if ($controls.length === 0) {
|
||||
$controls = $gte.parent();
|
||||
}
|
||||
$controls.addClass('date-filter-controls'); // Hook for CSS
|
||||
|
||||
// --- 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;">' +
|
||||
// --- Dropdown ---
|
||||
var $select = $('<select class="form-control custom-select admin-date-dropdown">' +
|
||||
'<option value="any">Any Date</option>' +
|
||||
'<option value="today">Today</option>' +
|
||||
'<option value="7days">Last 7 Days</option>' +
|
||||
@ -43,41 +44,36 @@
|
||||
'<option value="custom">Custom Range...</option>' +
|
||||
'</select>');
|
||||
|
||||
// --- 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');
|
||||
// --- Inputs Styling ---
|
||||
$gte.addClass('form-control form-control-sm date-input');
|
||||
$lte.addClass('form-control form-control-sm date-input');
|
||||
|
||||
// Insert Dropdown
|
||||
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.css('display', 'inline-flex'); // Show as flex
|
||||
$controls.css('display', 'inline-flex'); // Ensure flex
|
||||
} else {
|
||||
$select.val('any');
|
||||
$controls.hide();
|
||||
}
|
||||
|
||||
// Event Listener
|
||||
$select.on('change', function() {
|
||||
var val = $(this).val();
|
||||
var today = new Date();
|
||||
|
||||
if (val === 'custom') {
|
||||
$controls.css('display', 'inline-flex').hide().fadeIn(); // Animate in
|
||||
$controls.css('display', 'inline-flex').hide().fadeIn();
|
||||
} else {
|
||||
if (val === 'any') {
|
||||
$gte.val('');
|
||||
@ -104,6 +100,7 @@
|
||||
$lte.val(endStr);
|
||||
}
|
||||
|
||||
// Auto-submit
|
||||
var $form = $gte.closest('form');
|
||||
if ($form.length) {
|
||||
$form.submit();
|
||||
@ -119,4 +116,4 @@
|
||||
initDateRangeDropdown();
|
||||
setTimeout(initDateRangeDropdown, 500);
|
||||
});
|
||||
})(django.jQuery);
|
||||
})(django.jQuery);
|
||||
Loading…
x
Reference in New Issue
Block a user