Fix(Admin): Force Date Filter to be horizontal using JS DOM restructuring
This commit is contained in:
Flatlogic Bot
parent
a3ff664ed9
commit
608119b06c
@ -20,6 +20,34 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- Masar Date Filter Row (Dynamic Wrapper) --- */
|
||||||
|
.masar-date-filter-row {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: row !important;
|
||||||
|
align-items: center !important;
|
||||||
|
gap: 3px !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.masar-date-filter-row select {
|
||||||
|
width: 32% !important;
|
||||||
|
min-width: 50px !important;
|
||||||
|
font-size: 11px !important;
|
||||||
|
padding: 2px !important;
|
||||||
|
height: 30px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.masar-date-filter-row input {
|
||||||
|
width: 33% !important;
|
||||||
|
min-width: 50px !important;
|
||||||
|
font-size: 11px !important;
|
||||||
|
padding: 2px !important;
|
||||||
|
height: 30px !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* --- Other Admin Tweaks --- */
|
||||||
.hero-section {
|
.hero-section {
|
||||||
background: linear-gradient(135deg, var(--primary-dark) 0%, #2D2D30 100%);
|
background: linear-gradient(135deg, var(--primary-dark) 0%, #2D2D30 100%);
|
||||||
padding: 100px 0;
|
padding: 100px 0;
|
||||||
@ -28,18 +56,6 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-section::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -50px;
|
|
||||||
right: -50px;
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
background: var(--accent-orange);
|
|
||||||
filter: blur(80px);
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-card {
|
.glass-card {
|
||||||
background: rgba(255, 255, 255, 0.05);
|
background: rgba(255, 255, 255, 0.05);
|
||||||
backdrop-filter: blur(15px);
|
backdrop-filter: blur(15px);
|
||||||
@ -65,46 +81,6 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tracking-input {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
color: white;
|
|
||||||
border-radius: 12px 0 0 12px;
|
|
||||||
padding: 15px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tracking-input:focus {
|
|
||||||
background: rgba(255, 255, 255, 0.15);
|
|
||||||
border-color: var(--accent-orange);
|
|
||||||
box-shadow: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-icon {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
background: var(--accent-orange);
|
|
||||||
border-radius: 15px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
color: white;
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.parcel-status-badge {
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 50px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-pending { background: #FFE8CC; color: #D9480F; }
|
|
||||||
.status-picked_up { background: #E3FAFC; color: #0B7285; }
|
|
||||||
.status-in_transit { background: #E7F5FF; color: #1864AB; }
|
|
||||||
.status-delivered { background: #EBFBEE; color: #2B8A3E; }
|
|
||||||
|
|
||||||
/* Chat Widget */
|
/* Chat Widget */
|
||||||
#masar-chat-widget {
|
#masar-chat-widget {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -132,10 +108,6 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
transition: transform 0.2s;
|
transition: transform 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#masar-chat-toggle:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* RTL Support for Chat */
|
/* RTL Support for Chat */
|
||||||
[dir="rtl"] #masar-chat-widget {
|
[dir="rtl"] #masar-chat-widget {
|
||||||
right: auto;
|
right: auto;
|
||||||
@ -146,163 +118,14 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
left: 20px;
|
left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.typing-dots span {
|
|
||||||
display: inline-block;
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
background-color: #adb5bd;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin: 0 2px;
|
|
||||||
animation: typing 1s infinite;
|
|
||||||
}
|
|
||||||
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
|
|
||||||
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
|
|
||||||
|
|
||||||
@keyframes typing {
|
|
||||||
0%, 100% { transform: translateY(0); }
|
|
||||||
50% { transform: translateY(-5px); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Admin Panel Customizations --- */
|
|
||||||
|
|
||||||
/* Fix: Prevent accidental file dialog open when clicking labels for logos/favicons */
|
|
||||||
body.model-platformprofile label[for="id_logo"],
|
|
||||||
body.model-platformprofile label[for="id_favicon"],
|
|
||||||
body.model-platformprofile label[for="id_admin_panel_logo"] {
|
|
||||||
pointer-events: none;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Improve Admin Form Spacing */
|
|
||||||
.form-row {
|
|
||||||
padding: 15px 10px;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Fix Admin Search Box & Filter Layout --- */
|
|
||||||
|
|
||||||
/* Target the search form container in Jazzmin/AdminLTE */
|
|
||||||
#changelist-search .input-group {
|
|
||||||
display: flex !important;
|
|
||||||
flex-wrap: nowrap !important;
|
|
||||||
max-width: 300px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Make the input field take available space */
|
|
||||||
#changelist-search input[type="text"] {
|
|
||||||
flex-grow: 1 !important;
|
|
||||||
width: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure the button stays inline */
|
|
||||||
#changelist-search button[type="submit"],
|
|
||||||
#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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Date Range Filter Styling (Compact & Horizontal) --- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
We want the [Select] [Start] [End] to all appear on ONE line in the sidebar.
|
|
||||||
This requires aggressive flex styling and width control.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* 1. Flex Container */
|
|
||||||
.admindatefilter .controls.date-filter-controls {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: row !important;
|
|
||||||
align-items: center !important;
|
|
||||||
flex-wrap: nowrap !important;
|
|
||||||
gap: 2px !important;
|
|
||||||
width: 100% !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
border: none !important;
|
|
||||||
font-size: 0 !important; /* Hide text nodes (dashes/spaces) between inputs */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
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 --- */
|
|
||||||
|
|
||||||
/* LTR (Default) */
|
|
||||||
.masar-search-input {
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
.masar-search-btn {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* RTL Override for Search Box */
|
|
||||||
[dir="rtl"] .masar-search-input {
|
|
||||||
border-top-right-radius: 0.25rem !important;
|
|
||||||
border-bottom-right-radius: 0.25rem !important;
|
|
||||||
border-top-left-radius: 0 !important;
|
|
||||||
border-bottom-left-radius: 0 !important;
|
|
||||||
}
|
|
||||||
[dir="rtl"] .masar-search-btn {
|
|
||||||
border-top-left-radius: 0.25rem !important;
|
|
||||||
border-bottom-left-radius: 0.25rem !important;
|
|
||||||
border-top-right-radius: 0 !important;
|
|
||||||
border-bottom-right-radius: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Admin Panel RTL Sidebar Override (Agresive) --- */
|
/* --- Admin Panel RTL Sidebar Override (Agresive) --- */
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
/* Main Sidebar */
|
|
||||||
[dir="rtl"] .main-sidebar {
|
[dir="rtl"] .main-sidebar {
|
||||||
left: auto !important;
|
left: auto !important;
|
||||||
right: 0 !important;
|
right: 0 !important;
|
||||||
border-right: none !important;
|
border-right: none !important;
|
||||||
border-left: 1px solid rgba(0,0,0,0.1) !important;
|
border-left: 1px solid rgba(0,0,0,0.1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Content Wrapper & Headers */
|
|
||||||
[dir="rtl"] .content-wrapper,
|
[dir="rtl"] .content-wrapper,
|
||||||
[dir="rtl"] .main-header,
|
[dir="rtl"] .main-header,
|
||||||
[dir="rtl"] .main-footer {
|
[dir="rtl"] .main-footer {
|
||||||
@ -310,22 +133,17 @@ body.model-platformprofile label[for="id_admin_panel_logo"] {
|
|||||||
margin-right: 250px !important;
|
margin-right: 250px !important;
|
||||||
transition: margin-right .3s ease-in-out !important;
|
transition: margin-right .3s ease-in-out !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Collapsed Sidebar State */
|
|
||||||
[dir="rtl"].sidebar-collapse .main-sidebar {
|
[dir="rtl"].sidebar-collapse .main-sidebar {
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
width: 4.6rem !important;
|
width: 4.6rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir="rtl"].sidebar-collapse .content-wrapper,
|
[dir="rtl"].sidebar-collapse .content-wrapper,
|
||||||
[dir="rtl"].sidebar-collapse .main-header,
|
[dir="rtl"].sidebar-collapse .main-header,
|
||||||
[dir="rtl"].sidebar-collapse .main-footer {
|
[dir="rtl"].sidebar-collapse .main-footer {
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
margin-right: 4.6rem !important;
|
margin-right: 4.6rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fix Brand Logo Area */
|
|
||||||
[dir="rtl"] .brand-link {
|
[dir="rtl"] .brand-link {
|
||||||
float: right !important;
|
float: right !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
@ -336,53 +154,41 @@ body.model-platformprofile label[for="id_admin_panel_logo"] {
|
|||||||
margin-right: 0.8rem !important;
|
margin-right: 0.8rem !important;
|
||||||
margin-left: 0.5rem !important;
|
margin-left: 0.5rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navbar alignment */
|
|
||||||
[dir="rtl"] .navbar-nav {
|
[dir="rtl"] .navbar-nav {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
[dir="rtl"] .navbar-nav .nav-item {
|
[dir="rtl"] .navbar-nav .nav-item {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir="rtl"] .ml-auto {
|
[dir="rtl"] .ml-auto {
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
margin-right: auto !important;
|
margin-right: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir="rtl"] .mr-auto {
|
[dir="rtl"] .mr-auto {
|
||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
margin-left: auto !important;
|
margin-left: auto !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sidebar Navigation Items RTL */
|
|
||||||
[dir="rtl"] .nav-sidebar .nav-item > .nav-link {
|
[dir="rtl"] .nav-sidebar .nav-item > .nav-link {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
flex-direction: row !important;
|
flex-direction: row !important;
|
||||||
align-items: center !important;
|
align-items: center !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir="rtl"] .nav-sidebar .nav-icon {
|
[dir="rtl"] .nav-sidebar .nav-icon {
|
||||||
margin-left: 0.5rem !important;
|
margin-left: 0.5rem !important;
|
||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir="rtl"] .nav-sidebar .nav-link p {
|
[dir="rtl"] .nav-sidebar .nav-link p {
|
||||||
display: inline-block !important;
|
display: inline-block !important;
|
||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
text-align: right !important;
|
text-align: right !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fix sidebar angle icon */
|
|
||||||
[dir="rtl"] .nav-sidebar .nav-icon.fa-angle-left {
|
[dir="rtl"] .nav-sidebar .nav-icon.fa-angle-left {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
margin-right: auto !important;
|
margin-right: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* General Utils */
|
|
||||||
[dir="rtl"] .float-right {
|
[dir="rtl"] .float-right {
|
||||||
float: left !important;
|
float: left !important;
|
||||||
}
|
}
|
||||||
@ -394,4 +200,4 @@ body.model-platformprofile label[for="id_admin_panel_logo"] {
|
|||||||
}
|
}
|
||||||
[dir="rtl"] .text-left {
|
[dir="rtl"] .text-left {
|
||||||
text-align: right !important;
|
text-align: right !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,121 +1,158 @@
|
|||||||
(function($) {
|
(function($) {
|
||||||
$(document).ready(function() {
|
// Masar Date Range Filter Layout Fix v3
|
||||||
// Helper to format date as YYYY-MM-DD
|
// Forces a horizontal layout for the Date Range Filter in Django Admin Sidebar
|
||||||
function formatDate(d) {
|
|
||||||
var year = d.getFullYear();
|
function initDateRangeDropdown() {
|
||||||
var month = ('0' + (d.getMonth() + 1)).slice(-2);
|
console.log("Masar Date Filter: Initializing v3...");
|
||||||
var day = ('0' + d.getDate()).slice(-2);
|
|
||||||
return year + '-' + month + '-' + day;
|
// Find all "Greater Than or Equal" inputs (the start date of the range)
|
||||||
|
var $gteInputs = $('input[name$="__gte"]');
|
||||||
|
|
||||||
|
if ($gteInputs.length === 0) {
|
||||||
|
return; // Not found yet
|
||||||
}
|
}
|
||||||
|
|
||||||
function initDateRangeDropdown() {
|
$gteInputs.each(function() {
|
||||||
var $gteInputs = $('input[name$="__gte"]');
|
var $gte = $(this);
|
||||||
|
if ($gte.data('masar-processed')) return;
|
||||||
|
$gte.data('masar-processed', true);
|
||||||
|
|
||||||
$gteInputs.each(function() {
|
var name = $gte.attr('name');
|
||||||
var $gte = $(this);
|
var prefix = name.substring(0, name.lastIndexOf('__gte'));
|
||||||
// Prevent double init
|
var $lte = $('input[name="' + prefix + '__lte"]');
|
||||||
if ($gte.data('dropdown-processed')) return;
|
|
||||||
$gte.data('dropdown-processed', true);
|
|
||||||
|
|
||||||
var name = $gte.attr('name');
|
if ($lte.length === 0) return;
|
||||||
var prefix = name.substring(0, name.lastIndexOf('__gte'));
|
|
||||||
var $lte = $('input[name="' + prefix + '__lte"]');
|
|
||||||
|
|
||||||
if ($lte.length === 0) return;
|
// Locate the container in the sidebar.
|
||||||
|
// Usually it's inside a <li class="... field-created_at ..."> or similar.
|
||||||
|
// We want to find the direct parent that holds these inputs.
|
||||||
|
var $parent = $gte.parent();
|
||||||
|
|
||||||
var $container = $gte.closest('.admindatefilter');
|
// Create our custom flex wrapper
|
||||||
if ($container.length === 0) {
|
var $wrapper = $('<div class="masar-date-filter-row"></div>');
|
||||||
$container = $gte.closest('div[data-filter-name], li, .form-row, .card-body, .filter-wrapper');
|
$wrapper.css({
|
||||||
}
|
'display': 'flex',
|
||||||
if ($container.length === 0) $container = $gte.parent();
|
'flex-direction': 'row',
|
||||||
|
'align-items': 'center',
|
||||||
|
'gap': '3px',
|
||||||
|
'width': '100%',
|
||||||
|
'margin-bottom': '10px'
|
||||||
|
});
|
||||||
|
|
||||||
// Find the direct wrapper of the inputs (usually .controls)
|
// Create the Quick Select Dropdown
|
||||||
var $controls = $gte.closest('.controls');
|
var $select = $('<select class="form-control custom-select admin-date-dropdown">' +
|
||||||
if ($controls.length === 0) {
|
'<option value="any">Any</option>' +
|
||||||
$controls = $gte.parent();
|
'<option value="today">Today</option>' +
|
||||||
}
|
'<option value="7days">7 Days</option>' +
|
||||||
$controls.addClass('date-filter-controls'); // Hook for CSS
|
'<option value="month">Month</option>' +
|
||||||
|
'<option value="custom">Custom</option>' +
|
||||||
// --- Dropdown ---
|
'</select>');
|
||||||
var $select = $('<select class="form-control custom-select admin-date-dropdown">' +
|
|
||||||
'<option value="any">Any</option>' + // Shortened text
|
$select.css({
|
||||||
'<option value="today">Today</option>' +
|
'width': '34%',
|
||||||
'<option value="7days">7 Days</option>' +
|
'min-width': '60px',
|
||||||
'<option value="month">Month</option>' +
|
'height': '30px',
|
||||||
'<option value="custom">Custom</option>' +
|
'padding': '0 4px',
|
||||||
'</select>');
|
'font-size': '11px'
|
||||||
|
});
|
||||||
|
|
||||||
// --- Inputs Styling ---
|
// Style inputs
|
||||||
$gte.addClass('form-control form-control-sm date-input');
|
var inputStyle = {
|
||||||
$lte.addClass('form-control form-control-sm date-input');
|
'width': '33%',
|
||||||
$gte.attr('placeholder', 'Start'); // Short placeholder
|
'min-width': '0',
|
||||||
$lte.attr('placeholder', 'End');
|
'height': '30px',
|
||||||
|
'padding': '4px',
|
||||||
|
'font-size': '11px'
|
||||||
|
};
|
||||||
|
$gte.css(inputStyle).attr('placeholder', 'Start');
|
||||||
|
$lte.css(inputStyle).attr('placeholder', 'End');
|
||||||
|
|
||||||
// Insert Dropdown INSIDE the flex container (at start)
|
// --- RESTRUCTURING DOM ---
|
||||||
if ($controls.length) {
|
// 1. Insert wrapper before the start input
|
||||||
$controls.prepend($select);
|
$gte.before($wrapper);
|
||||||
|
|
||||||
|
// 2. Move elements into wrapper
|
||||||
|
$wrapper.append($select);
|
||||||
|
$wrapper.append($gte);
|
||||||
|
$wrapper.append($lte);
|
||||||
|
|
||||||
|
// 3. Cleanup: Hide any left-over text nodes (like "-", "From", "To") or <br> in the parent
|
||||||
|
$parent.contents().filter(function() {
|
||||||
|
return (this.nodeType === 3 && $.trim($(this).text()) !== '') || this.tagName === 'BR';
|
||||||
|
}).remove();
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
var day = ('0' + d.getDate()).slice(-2);
|
||||||
|
return year + '-' + month + '-' + day;
|
||||||
|
}
|
||||||
|
|
||||||
|
var gteVal = $gte.val();
|
||||||
|
var lteVal = $lte.val();
|
||||||
|
if (gteVal || lteVal) {
|
||||||
|
$select.val('custom');
|
||||||
|
} else {
|
||||||
|
$select.val('any');
|
||||||
|
}
|
||||||
|
|
||||||
|
$select.on('change', function() {
|
||||||
|
var val = $(this).val();
|
||||||
|
var today = new Date();
|
||||||
|
|
||||||
|
if (val === 'custom') {
|
||||||
|
// Do nothing, let user edit
|
||||||
} else {
|
} else {
|
||||||
$gte.before($select);
|
if (val === 'any') {
|
||||||
}
|
$gte.val('');
|
||||||
|
$lte.val('');
|
||||||
// Initial State
|
|
||||||
var gteVal = $gte.val();
|
|
||||||
var lteVal = $lte.val();
|
|
||||||
|
|
||||||
if (gteVal || lteVal) {
|
|
||||||
$select.val('custom');
|
|
||||||
} else {
|
|
||||||
$select.val('any');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Event Listener
|
|
||||||
$select.on('change', function() {
|
|
||||||
var val = $(this).val();
|
|
||||||
var today = new Date();
|
|
||||||
|
|
||||||
if (val === 'custom') {
|
|
||||||
// Inputs are always visible in our new layout, just ensure they are enabled/cleared if needed
|
|
||||||
} else {
|
} else {
|
||||||
if (val === 'any') {
|
var startStr = '';
|
||||||
$gte.val('');
|
var endStr = formatDate(today);
|
||||||
$lte.val('');
|
|
||||||
} else {
|
|
||||||
var startStr = '';
|
|
||||||
var endStr = formatDate(today);
|
|
||||||
|
|
||||||
if (val === 'today') {
|
if (val === 'today') {
|
||||||
startStr = formatDate(today);
|
startStr = formatDate(today);
|
||||||
} else if (val === '7days') {
|
} else if (val === '7days') {
|
||||||
var past = new Date();
|
var past = new Date();
|
||||||
past.setDate(today.getDate() - 7);
|
past.setDate(today.getDate() - 7);
|
||||||
startStr = formatDate(past);
|
startStr = formatDate(past);
|
||||||
} else if (val === 'month') {
|
} else if (val === 'month') {
|
||||||
var firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
|
var firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||||
startStr = formatDate(firstDay);
|
startStr = formatDate(firstDay);
|
||||||
} else if (val === 'year') {
|
|
||||||
var firstDay = new Date(today.getFullYear(), 0, 1);
|
|
||||||
startStr = formatDate(firstDay);
|
|
||||||
}
|
|
||||||
|
|
||||||
$gte.val(startStr);
|
|
||||||
$lte.val(endStr);
|
|
||||||
}
|
}
|
||||||
|
$gte.val(startStr);
|
||||||
// Auto-submit
|
$lte.val(endStr);
|
||||||
var $form = $gte.closest('form');
|
}
|
||||||
if ($form.length) {
|
// Trigger Form Submit (Changes URL)
|
||||||
$form.submit();
|
// Try to find the filter form
|
||||||
|
var $form = $gte.closest('form'); // Usually #changelist-search
|
||||||
|
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 {
|
} else {
|
||||||
var $btn = $container.find('input[type="submit"], button[type="submit"]');
|
// Fallback: reload page with query params (complex, skip for now, rely on standard form)
|
||||||
if ($btn.length) $btn.click();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
});
|
});
|
||||||
}
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
// Run immediately
|
||||||
initDateRangeDropdown();
|
initDateRangeDropdown();
|
||||||
// Re-run safely for dynamic content
|
|
||||||
|
// And retry a few times to catch slow rendering
|
||||||
|
setTimeout(initDateRangeDropdown, 200);
|
||||||
setTimeout(initDateRangeDropdown, 500);
|
setTimeout(initDateRangeDropdown, 500);
|
||||||
|
setTimeout(initDateRangeDropdown, 1000);
|
||||||
});
|
});
|
||||||
})(django.jQuery);
|
|
||||||
|
})(django.jQuery);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user