admin/37794-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Admin Date Filter Alignment

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-01 07:52:14 +00:00
parent b01c5f2dce
commit a3ff664ed9
2 changed files with 65 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
static/css/custom_v2.css
View File

@ -211,39 +211,58 @@ body.model-platformprofile label[for="id_admin_panel_logo"] {
/* --- 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) */
}
/*
We want the [Select] [Start] [End] to all appear on ONE line in the sidebar.
This requires aggressive flex styling and width control.
*/
/* The container of inputs (From/To) */
/* 1. Flex Container */
.admindatefilter .controls.date-filter-controls {
display: inline-flex !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 5px;
gap: 2px !important;
width: 100% !important;
padding: 0 !important;
border: none !important;
font-size: 0 !important; /* Hide text nodes (dashes/spaces) between inputs */
}
/* 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 {
/* 2. Dropdown (Quick Select) */
.admindatefilter select.admin-date-dropdown {
width: 32% !important;
min-width: 0 !important;
height: 30px !important;
padding: 0px 4px !important;
font-size: 11px !important;
margin: 0 !important;
display: inline-block !important;
vertical-align: top;
flex-shrink: 0 !important;
}
/* 3. Inputs (From / To) */
.admindatefilter .date-input {
width: 33% !important;
min-width: 0 !important;
height: 30px !important;
padding: 4px !important;
font-size: 11px !important;
margin: 0 !important;
display: inline-block !important;
flex-shrink: 1 !important;
}
/* Hide any <br> tags injected by admin templates */
.admindatefilter br {
display: none !important;
}
/* Ensure the wrapper allows full width */
.admindatefilter {
width: 100% !important;
display: block !important;
box-sizing: border-box !important;
}
/* --- Search Box RTL/LTR Border Radius Handling --- */
@ -274,8 +293,6 @@ body.model-platformprofile label[for="id_admin_panel_logo"] {
/* --- Admin Panel RTL Sidebar Override (Agresive) --- */
/* We use [dir="rtl"] selector which should be on html tag */
@media (min-width: 992px) {
/* Main Sidebar */
[dir="rtl"] .main-sidebar {
@ -297,7 +314,7 @@ body.model-platformprofile label[for="id_admin_panel_logo"] {
/* Collapsed Sidebar State */
[dir="rtl"].sidebar-collapse .main-sidebar {
margin-left: 0 !important;
margin-right: 0 !important; /* AdminLTE collapses by width, not margin usually, but ensure position matches */
margin-right: 0 !important;
width: 4.6rem !important;
}
@ -322,22 +339,12 @@ body.model-platformprofile label[for="id_admin_panel_logo"] {
/* Navbar alignment */
[dir="rtl"] .navbar-nav {
flex-direction: row; /* bootstrap default, but ensure items flow right to left visually */
flex-direction: row;
}
[dir="rtl"] .navbar-nav .nav-item {
float: right;
}
/* Right side navbar items (user menu etc) should be on left now?
In RTL, "ml-auto" (margin-left: auto) pushes items to the LEFT.
Jazzmin uses ml-auto for the user menu.
In RTL, we want them on the LEFT.
Bootstrap 4 RTL support usually flips ml-auto to mr-auto,
but if we are running LTR bootstrap in RTL mode, ml-auto pushes to Right.
Wait, ml-auto = margin-left: auto. In LTR, this pushes to Right.
In RTL, we want these items on the LEFT. So we need margin-right: auto.
*/
[dir="rtl"] .ml-auto {
margin-left: 0 !important;
margin-right: auto !important;
@ -352,7 +359,7 @@ body.model-platformprofile label[for="id_admin_panel_logo"] {
/* Sidebar Navigation Items RTL */
[dir="rtl"] .nav-sidebar .nav-item > .nav-link {
display: flex !important;
flex-direction: row !important; /* Standard flow: RTL = Start(Right) to End(Left) */
flex-direction: row !important;
align-items: center !important;
}
@ -368,11 +375,11 @@ body.model-platformprofile label[for="id_admin_panel_logo"] {
width: 100% !important;
}
/* Fix sidebar angle icon (arrow) */
/* Fix sidebar angle icon */
[dir="rtl"] .nav-sidebar .nav-icon.fa-angle-left {
transform: rotate(180deg);
margin-left: 0 !important;
margin-right: auto !important; /* Push to the far left */
margin-right: auto !important;
}
/* General Utils */

28
static/js/admin_date_range_dropdown.js
View File

@ -13,6 +13,10 @@
$gteInputs.each(function() {
var $gte = $(this);
// Prevent double init
if ($gte.data('dropdown-processed')) return;
$gte.data('dropdown-processed', true);
var name = $gte.attr('name');
var prefix = name.substring(0, name.lastIndexOf('__gte'));
var $lte = $('input[name="' + prefix + '__lte"]');
@ -25,9 +29,7 @@
}
if ($container.length === 0) $container = $gte.parent();
if ($container.data('dropdown-init')) return;
$container.data('dropdown-init', true);
// Find the direct wrapper of the inputs (usually .controls)
var $controls = $gte.closest('.controls');
if ($controls.length === 0) {
$controls = $gte.parent();
@ -36,21 +38,22 @@
// --- Dropdown ---
var $select = $('<select class="form-control custom-select admin-date-dropdown">' +
'<option value="any">Any Date</option>' +
'<option value="any">Any</option>' + // Shortened text
'<option value="today">Today</option>' +
'<option value="7days">Last 7 Days</option>' +
'<option value="month">This Month</option>' +
'<option value="year">This Year</option>' +
'<option value="custom">Custom Range...</option>' +
'<option value="7days">7 Days</option>' +
'<option value="month">Month</option>' +
'<option value="custom">Custom</option>' +
'</select>');
// --- Inputs Styling ---
$gte.addClass('form-control form-control-sm date-input');
$lte.addClass('form-control form-control-sm date-input');
$gte.attr('placeholder', 'Start'); // Short placeholder
$lte.attr('placeholder', 'End');
// Insert Dropdown
// Insert Dropdown INSIDE the flex container (at start)
if ($controls.length) {
$controls.before($select);
$controls.prepend($select);
} else {
$gte.before($select);
}
@ -61,10 +64,8 @@
if (gteVal || lteVal) {
$select.val('custom');
$controls.css('display', 'inline-flex'); // Ensure flex
} else {
$select.val('any');
$controls.hide();
}
// Event Listener
@ -73,7 +74,7 @@
var today = new Date();
if (val === 'custom') {
$controls.css('display', 'inline-flex').hide().fadeIn();
// Inputs are always visible in our new layout, just ensure they are enabled/cleared if needed
} else {
if (val === 'any') {
$gte.val('');
@ -114,6 +115,7 @@
}
initDateRangeDropdown();
// Re-run safely for dynamic content
setTimeout(initDateRangeDropdown, 500);
});
})(django.jQuery);