diff --git a/static/css/custom_v2.css b/static/css/custom_v2.css index 440a5f1..8587f17 100644 --- a/static/css/custom_v2.css +++ b/static/css/custom_v2.css @@ -26,11 +26,12 @@ h1, h2, h3, h4, h5, h6 { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; - flex-wrap: nowrap !important; /* Ensure they stay on one line */ + flex-wrap: nowrap !important; gap: 2px !important; width: 100% !important; box-sizing: border-box !important; - /* overflow: hidden; Removed to allow dropdown list to show */ + position: relative !important; + z-index: 100 !important; } /* Hide any stray shortcuts that might have survived JS cleanup */ @@ -39,14 +40,21 @@ h1, h2, h3, h4, h5, h6 { } .masar-date-filter-row select { + appearance: auto !important; /* Force native dropdown appearance */ + -webkit-appearance: auto !important; + -moz-appearance: auto !important; + width: 32% !important; min-width: 0 !important; font-size: 11px !important; - padding: 0 2px !important; + padding: 2px !important; /* Relaxed padding */ height: 28px !important; - line-height: 1 !important; box-sizing: border-box !important; margin: 0 !important; + background-color: white !important; + border: 1px solid #ced4da !important; + border-radius: 4px !important; + color: #495057 !important; } .masar-date-filter-row input { @@ -57,22 +65,23 @@ h1, h2, h3, h4, h5, h6 { height: 28px !important; margin: 0 !important; box-sizing: border-box !important; + background-color: white !important; + border: 1px solid #ced4da !important; + border-radius: 4px !important; } /* Specific fix for date inputs to ensure they look clean */ .masar-date-filter-row input[type="date"] { - -webkit-appearance: none; /* Remove some browser defaults */ - appearance: none; line-height: 28px; } .masar-date-filter-row input[type="date"]::-webkit-inner-spin-button, .masar-date-filter-row input[type="date"]::-webkit-calendar-picker-indicator { - /* Make the calendar icon smaller and fit */ width: 12px; height: 12px; margin: 0; padding: 0; opacity: 0.6; + cursor: pointer; } diff --git a/static/js/admin_date_range_dropdown.js b/static/js/admin_date_range_dropdown.js index 210290d..320bcb3 100644 --- a/static/js/admin_date_range_dropdown.js +++ b/static/js/admin_date_range_dropdown.js @@ -1,7 +1,7 @@ (function($) { - // Masar Date Range Filter Layout Fix v4 + // Masar Date Range Filter Layout Fix v5 // Forces a horizontal layout for the Date Range Filter in Django Admin Sidebar - // v4: Switches to type="date", removes Django's calendar shortcuts to prevent layout breakage. + // v5: Removes Bootstrap classes from Select to ensure native popup works reliably. function initDateRangeDropdown() { @@ -30,7 +30,8 @@ var $wrapper = $('
'); // Create the Quick Select Dropdown - var $select = $('' + '' + '' + '' + @@ -39,7 +40,6 @@ ''); // CONVERT INPUTS TO HTML5 DATE - // This gives us a native picker and removes the need for Django's clunky JS shortcuts $gte.attr('type', 'date').removeClass('vDateField'); $lte.attr('type', 'date').removeClass('vDateField'); @@ -53,8 +53,6 @@ $wrapper.append($lte); // 3. AGGRESSIVE CLEANUP - // Remove text nodes, BRs, AND Django's calendar shortcuts (.datetimeshortcuts) - // We search the *original parent* for these leftovers. $parent.contents().filter(function() { return ( (this.nodeType === 3 && $.trim($(this).text()) !== '') || // Text @@ -63,9 +61,6 @@ ); }).remove(); - // Also hide any shortcuts that might be dynamically appended later (via CSS rule or observer) - // But removing the 'vDateField' class above usually prevents Django from initializing them. - // Logic for Dropdown Changes function formatDate(d) { var year = d.getFullYear(); @@ -87,7 +82,7 @@ var today = new Date(); if (val === 'custom') { - // Do nothing, let user edit + // Do nothing } else { if (val === 'any') { $gte.val('');