Оптимизирована высота и компактность календарного фильтра

- Уменьшены все отступы и padding для экономии вертикального пространства
- Уменьшены размеры кнопок навигации (36px → 30px)
- Уменьшены размеры кнопок дней (70px → 60px)
- Уменьшены все шрифты внутри календаря
- Обновлен расчет количества отображаемых дней (минимум 7)
- Календарь теперь занимает всю доступную ширину и показывает больше дат

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-12 16:08:39 +03:00
parent 24c379a9e3
commit a42145a8ad
2 changed files with 16 additions and 16 deletions

View File

@@ -4,7 +4,7 @@
*/
.date-range-filter {
padding: 1rem;
padding: 0.5rem;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #dee2e6;
@@ -13,7 +13,7 @@
.date-range-filter .form-label {
font-weight: 500;
color: #495057;
margin-bottom: 0.75rem;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
@@ -34,8 +34,8 @@
background: #fff;
border: 1px solid #dee2e6;
border-radius: 50%;
width: 36px;
height: 36px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
@@ -56,7 +56,7 @@
}
.carousel-nav-btn i {
font-size: 1.2rem;
font-size: 1rem;
}
/* Контейнер с днями */
@@ -78,15 +78,15 @@
.date-btn {
background: #fff;
border: 2px solid #dee2e6;
border-radius: 8px;
padding: 0.5rem;
min-width: 70px;
border-radius: 6px;
padding: 0.3rem;
min-width: 60px;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
display: flex;
flex-direction: column;
gap: 0.25rem;
gap: 0.15rem;
flex-shrink: 0;
}
@@ -98,28 +98,28 @@
}
.date-btn-label {
font-size: 0.7rem;
font-size: 0.6rem;
font-weight: 600;
color: #6c757d;
text-transform: uppercase;
}
.date-btn-day {
font-size: 1.5rem;
font-size: 1.2rem;
font-weight: 700;
color: #212529;
line-height: 1;
}
.date-btn-weekday {
font-size: 0.75rem;
font-size: 0.65rem;
font-weight: 500;
color: #6c757d;
text-transform: uppercase;
}
.date-btn-month {
font-size: 0.65rem;
font-size: 0.55rem;
font-weight: 500;
color: #6c757d;
text-transform: lowercase;

View File

@@ -66,14 +66,14 @@ class DateCarousel {
*/
calculateDaysCount() {
const containerWidth = this.container.offsetWidth;
const dayButtonWidth = 78; // 70px min-width + 8px gap
const dayButtonWidth = 68; // 60px min-width + 8px gap
const maxDays = Math.floor(containerWidth / dayButtonWidth);
// Гарантируем нечётное количество дней для центрирования
this.daysCount = maxDays % 2 === 0 ? maxDays - 1 : maxDays;
// Минимум 5 дней, максимум 31 день
this.daysCount = Math.max(5, Math.min(31, this.daysCount));
// Минимум 7 дней, максимум 31 день
this.daysCount = Math.max(7, Math.min(31, this.daysCount));
console.log(`Calculated days count: ${this.daysCount} (container width: ${containerWidth}px)`);
}