diff --git a/myproject/orders/static/orders/css/date_filter.css b/myproject/orders/static/orders/css/date_filter.css index 289ff1b..9943734 100644 --- a/myproject/orders/static/orders/css/date_filter.css +++ b/myproject/orders/static/orders/css/date_filter.css @@ -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; diff --git a/myproject/orders/static/orders/js/date_filter.js b/myproject/orders/static/orders/js/date_filter.js index d8ad0be..96958bb 100644 --- a/myproject/orders/static/orders/js/date_filter.js +++ b/myproject/orders/static/orders/js/date_filter.js @@ -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)`); }