diff --git a/static/css/custom_v2.css b/static/css/custom_v2.css index 3c70ab4..cf2c6d7 100644 --- a/static/css/custom_v2.css +++ b/static/css/custom_v2.css @@ -25,25 +25,53 @@ h1, h2, h3, h4, h5, h6 { display: flex !important; flex-direction: row !important; align-items: center !important; - gap: 3px !important; + justify-content: space-between !important; + gap: 2px !important; width: 100% !important; + box-sizing: border-box !important; + overflow: hidden !important; /* Prevent wrapping overflow */ +} + +/* Hide any stray shortcuts that might have survived JS cleanup */ +.masar-date-filter-row .datetimeshortcuts { + display: none !important; } .masar-date-filter-row select { width: 32% !important; - min-width: 50px !important; + min-width: 0 !important; font-size: 11px !important; - padding: 2px !important; - height: 30px !important; + padding: 0 2px !important; + height: 28px !important; + line-height: 1 !important; + box-sizing: border-box !important; + margin: 0 !important; } .masar-date-filter-row input { width: 33% !important; - min-width: 50px !important; + min-width: 0 !important; font-size: 11px !important; - padding: 2px !important; - height: 30px !important; + padding: 0 2px !important; + height: 28px !important; margin: 0 !important; + box-sizing: border-box !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; } @@ -200,4 +228,4 @@ h1, h2, h3, h4, h5, h6 { } [dir="rtl"] .text-left { text-align: right !important; -} +} \ No newline at end of file diff --git a/static/js/admin_date_range_dropdown.js b/static/js/admin_date_range_dropdown.js index d8ff9fb..210290d 100644 --- a/static/js/admin_date_range_dropdown.js +++ b/static/js/admin_date_range_dropdown.js @@ -1,9 +1,9 @@ (function($) { - // Masar Date Range Filter Layout Fix v3 + // Masar Date Range Filter Layout Fix v4 // 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. function initDateRangeDropdown() { - console.log("Masar Date Filter: Initializing v3..."); // Find all "Greater Than or Equal" inputs (the start date of the range) var $gteInputs = $('input[name$="__gte"]'); @@ -23,22 +23,12 @@ if ($lte.length === 0) return; - // Locate the container in the sidebar. - // Usually it's inside a
  • or similar. - // We want to find the direct parent that holds these inputs. + // Locate the container var $parent = $gte.parent(); - // Create our custom flex wrapper + // Create custom flex wrapper var $wrapper = $('
    '); - $wrapper.css({ - 'display': 'flex', - 'flex-direction': 'row', - 'align-items': 'center', - 'gap': '3px', - 'width': '100%', - 'margin-bottom': '10px' - }); - + // Create the Quick Select Dropdown var $select = $(''); - $select.css({ - 'width': '34%', - 'min-width': '60px', - 'height': '30px', - 'padding': '0 4px', - 'font-size': '11px' - }); - - // Style inputs - var inputStyle = { - 'width': '33%', - 'min-width': '0', - 'height': '30px', - 'padding': '4px', - 'font-size': '11px' - }; - $gte.css(inputStyle).attr('placeholder', 'Start'); - $lte.css(inputStyle).attr('placeholder', 'End'); + // 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'); // --- RESTRUCTURING DOM --- // 1. Insert wrapper before the start input @@ -76,13 +52,21 @@ $wrapper.append($gte); $wrapper.append($lte); - // 3. Cleanup: Hide any left-over text nodes (like "-", "From", "To") or
    in the parent + // 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()) !== '') || this.tagName === 'BR'; + return ( + (this.nodeType === 3 && $.trim($(this).text()) !== '') || // Text + this.tagName === 'BR' || // Line breaks + $(this).hasClass('datetimeshortcuts') // Django Calendar Icons + ); }).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 - // Helper to format date as YYYY-MM-DD function formatDate(d) { var year = d.getFullYear(); var month = ('0' + (d.getMonth() + 1)).slice(-2); @@ -125,20 +109,10 @@ $gte.val(startStr); $lte.val(endStr); } - // Trigger Form Submit (Changes URL) - // Try to find the filter form - var $form = $gte.closest('form'); // Usually #changelist-search + // Trigger Form Submit + var $form = $gte.closest('form'); if ($form.length) { $form.submit(); - } else { - // Sometimes filters are links, but date range usually has a button or relies on form - // If there is an "Apply" button nearby? - var $applyBtn = $parent.closest('.admindatefilter').find('input[type="submit"], button'); - if ($applyBtn.length) { - $applyBtn.click(); - } else { - // Fallback: reload page with query params (complex, skip for now, rely on standard form) - } } } }); @@ -146,13 +120,11 @@ } $(document).ready(function() { - // Run immediately initDateRangeDropdown(); - - // And retry a few times to catch slow rendering + // Retry logic for stubborn renderers setTimeout(initDateRangeDropdown, 200); setTimeout(initDateRangeDropdown, 500); setTimeout(initDateRangeDropdown, 1000); }); -})(django.jQuery); +})(django.jQuery); \ No newline at end of file