smaa/octopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

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

Browse Source 
- Уменьшены все отступы и 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:
Andrey Smakotin
2025-11-12 16:08:39 +03:00
parent 24c379a9e3
commit a42145a8ad
2 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
myproject/orders/static/orders/css/date_filter.css
View File

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

6
myproject/orders/static/orders/js/date_filter.js
View File

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