feat: Улучшен календарный фильтр заказов - расширен до 19 дней и обновлён дизайн
- Расширен календарь с 9 до 19 дней (±9 от центра) - Календарь теперь занимает всю ширину страницы - Исправлены метки "Вчера/Сегодня/Завтра" - теперь привязаны к реальным датам, а не к позициям в ленте - Добавлена автоматическая отправка формы при выборе даты - Обновлён дизайн: * Сегодняшний день выделен светло-голубым цветом (более мягкий оттенок) * Выбранная дата обведена красной рамкой (как на настенном календаре) - Добавлен блок extra_css в base.html для подключения дополнительных стилей 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
/* Адаптивность для мобильных устройств */
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user