From 5189171048e2af98da92007548b3cb36739aafee Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Sun, 1 Feb 2026 04:49:02 +0000
Subject: [PATCH] Fix Admin Search Layout: Add Reset button, force inline
 filters, fix date range dropdown style

---
 core/templates/admin/search_form.html       | 31 +++++++++----
 static/css/custom.css                       | 17 ++++++-
 static/js/admin_date_range_dropdown.js      | 51 ++++++++-------------
 staticfiles/css/custom.css                  | 17 ++++++-
 staticfiles/js/admin_date_range_dropdown.js | 51 ++++++++-------------
 5 files changed, 91 insertions(+), 76 deletions(-)

diff --git a/core/templates/admin/search_form.html b/core/templates/admin/search_form.html
index e79dc5d..c479289 100644
--- a/core/templates/admin/search_form.html
+++ b/core/templates/admin/search_form.html
@@ -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>
\ No newline at end of file
+</div>
diff --git a/static/css/custom.css b/static/css/custom.css
index 263cf93..4350e87 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -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;
+}
\ 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 80b92ae..5c66a2b 100644
--- a/static/js/admin_date_range_dropdown.js
+++ b/static/js/admin_date_range_dropdown.js
@@ -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);
\ No newline at end of file
+})(django.jQuery);
diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css
index 263cf93..4350e87 100644
--- a/staticfiles/css/custom.css
+++ b/staticfiles/css/custom.css
@@ -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;
+}
\ No newline at end of file
diff --git a/staticfiles/js/admin_date_range_dropdown.js b/staticfiles/js/admin_date_range_dropdown.js
index 80b92ae..5c66a2b 100644
--- a/staticfiles/js/admin_date_range_dropdown.js
+++ b/staticfiles/js/admin_date_range_dropdown.js
@@ -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);
\ No newline at end of file
+})(django.jQuery);