From a271bfa80904fb2ec3010912aae16f4cd842cf1d Mon Sep 17 00:00:00 2001 From: Andrey Smakotin Date: Fri, 7 Nov 2025 18:55:50 +0300 Subject: [PATCH] =?UTF-8?q?feat:=20=D0=A3=D0=BB=D1=83=D1=87=D1=88=D0=B5?= =?UTF-8?q?=D0=BD=20=D0=BA=D0=B0=D0=BB=D0=B5=D0=BD=D0=B4=D0=B0=D1=80=D0=BD?= =?UTF-8?q?=D1=8B=D0=B9=20=D1=84=D0=B8=D0=BB=D1=8C=D1=82=D1=80=20=D0=B7?= =?UTF-8?q?=D0=B0=D0=BA=D0=B0=D0=B7=D0=BE=D0=B2=20-=20=D1=80=D0=B0=D1=81?= =?UTF-8?q?=D1=88=D0=B8=D1=80=D0=B5=D0=BD=20=D0=B4=D0=BE=2019=20=D0=B4?= =?UTF-8?q?=D0=BD=D0=B5=D0=B9=20=D0=B8=20=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2?= =?UTF-8?q?=D0=BB=D1=91=D0=BD=20=D0=B4=D0=B8=D0=B7=D0=B0=D0=B9=D0=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Расширен календарь с 9 до 19 дней (±9 от центра) - Календарь теперь занимает всю ширину страницы - Исправлены метки "Вчера/Сегодня/Завтра" - теперь привязаны к реальным датам, а не к позициям в ленте - Добавлена автоматическая отправка формы при выборе даты - Обновлён дизайн: * Сегодняшний день выделен светло-голубым цветом (более мягкий оттенок) * Выбранная дата обведена красной рамкой (как на настенном календаре) - Добавлен блок extra_css в base.html для подключения дополнительных стилей 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../orders/static/orders/css/date_filter.css | 39 ++++++++++++------- .../orders/static/orders/js/date_filter.js | 28 +++++++++---- .../orders/components/date_range_filter.html | 2 +- .../orders/templates/orders/order_list.html | 2 +- myproject/templates/base.html | 2 + 5 files changed, 49 insertions(+), 24 deletions(-) diff --git a/myproject/orders/static/orders/css/date_filter.css b/myproject/orders/static/orders/css/date_filter.css index 1198f87..6724c00 100644 --- a/myproject/orders/static/orders/css/date_filter.css +++ b/myproject/orders/static/orders/css/date_filter.css @@ -1,5 +1,5 @@ /** - * Стили для календарного фильтра с лентой из 9 дней + * Стили для календарного фильтра с лентой из 19 дней * Используется в компоненте date_range_filter.html */ @@ -118,35 +118,44 @@ text-transform: uppercase; } -/* Сегодняшний день (активный) */ +/* Сегодняшний день (более светлый оттенок) */ .date-btn.today { - background: #0d6efd; - border-color: #0d6efd; - color: white; + background: #cfe2ff; + border-color: #9ec5fe; + color: #084298; } .date-btn.today .date-btn-label, .date-btn.today .date-btn-day, .date-btn.today .date-btn-weekday { - color: white; + color: #084298; } .date-btn.today:hover { - background: #0b5ed7; - border-color: #0b5ed7; + background: #b6d4fe; + border-color: #6ea8fe; } -/* Выбранный день */ +/* Выбранный день (красная рамка как на настенном календаре) */ .date-btn.selected { - background: #198754; - border-color: #198754; - color: white; + background: #fff; + border-color: #dc3545; + border-width: 3px; + color: #212529; + box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2); +} + +.date-btn.selected .date-btn-label { + color: #dc3545; + font-weight: 700; +} + +.date-btn.selected .date-btn-day { + color: #dc3545; } -.date-btn.selected .date-btn-label, -.date-btn.selected .date-btn-day, .date-btn.selected .date-btn-weekday { - color: white; + color: #6c757d; } /* Адаптивность для мобильных устройств */ diff --git a/myproject/orders/static/orders/js/date_filter.js b/myproject/orders/static/orders/js/date_filter.js index 4055df8..07f4f67 100644 --- a/myproject/orders/static/orders/js/date_filter.js +++ b/myproject/orders/static/orders/js/date_filter.js @@ -1,5 +1,5 @@ /** - * Календарная лента с 9 днями для фильтрации заказов + * Календарная лента с 19 днями для фильтрации заказов * Сегодня в центре, навигация стрелками */ @@ -43,7 +43,7 @@ class DateCarousel { } /** - * Генерация и отображение 9 дней + * Генерация и отображение 19 дней */ render() { this.container.innerHTML = ''; @@ -56,12 +56,12 @@ class DateCarousel { } /** - * Генерация массива из 9 дней (±4 от центральной даты) + * Генерация массива из 19 дней (±9 от центральной даты) */ generateDays() { const days = []; - for (let i = -4; i <= 4; i++) { + for (let i = -9; i <= 9; i++) { const date = new Date(this.centerDate); date.setDate(date.getDate() + i); date.setHours(0, 0, 0, 0); @@ -81,9 +81,17 @@ class DateCarousel { * Определение текстовой метки для даты */ getDateLabel(date, offset) { - if (offset === -1) return 'Вчера'; - if (offset === 0 && date.getTime() === this.today.getTime()) return 'Сегодня'; - if (offset === 1 && date.getTime() === new Date(this.today.getTime() + 86400000).getTime()) return 'Завтра'; + const yesterday = new Date(this.today); + yesterday.setDate(yesterday.getDate() - 1); + yesterday.setHours(0, 0, 0, 0); + + const tomorrow = new Date(this.today); + tomorrow.setDate(tomorrow.getDate() + 1); + tomorrow.setHours(0, 0, 0, 0); + + if (date.getTime() === yesterday.getTime()) return 'Вчера'; + if (date.getTime() === this.today.getTime()) return 'Сегодня'; + if (date.getTime() === tomorrow.getTime()) return 'Завтра'; return ''; } @@ -170,6 +178,12 @@ class DateCarousel { this.render(); console.log(`Selected date: ${formattedDate}`); + + // Автоматическая отправка формы + const form = this.minInput.closest('form'); + if (form) { + form.submit(); + } } /** diff --git a/myproject/orders/templates/orders/components/date_range_filter.html b/myproject/orders/templates/orders/components/date_range_filter.html index 7e8af70..e00cecb 100644 --- a/myproject/orders/templates/orders/components/date_range_filter.html +++ b/myproject/orders/templates/orders/components/date_range_filter.html @@ -25,7 +25,7 @@ {{ field_before }} - +