Andrey Smakotin
61ce3f550d
- Исправлены имена полей времени (time_from/time_to вместо delivery_time_start/end) - Поля времени сделаны необязательными (дата остается обязательной) - Добавлен улучшенный UI с быстрыми кнопками для даты и времени - Поля ввода расположены в один ряд, кнопки быстрого выбора ниже - Добавлены CSS и JS файлы для улучшенного интерфейса - Обновлена валидация: время необязательно, но если указано одно - должно быть и другое
162 lines
3.3 KiB
CSS
162 lines
3.3 KiB
CSS
/* Стили для улучшенного интерфейса даты и времени доставки */
|
|
|
|
.delivery-datetime-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
/* Контейнер для всех кнопок быстрого выбора */
|
|
#delivery-datetime-quick-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* Быстрые кнопки для даты */
|
|
.delivery-date-quick-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.delivery-date-quick-btn {
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
border: 1px solid #dee2e6;
|
|
background-color: #fff;
|
|
color: #495057;
|
|
border-radius: 0.375rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.delivery-date-quick-btn:hover {
|
|
background-color: #f8f9fa;
|
|
border-color: #0d6efd;
|
|
color: #0d6efd;
|
|
}
|
|
|
|
.delivery-date-quick-btn.active {
|
|
background-color: #0d6efd;
|
|
border-color: #0d6efd;
|
|
color: #fff;
|
|
}
|
|
|
|
.delivery-date-quick-btn i {
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
/* Предустановленные интервалы времени */
|
|
.delivery-time-presets {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Дополнительный отступ для группы времени */
|
|
.delivery-time-presets {
|
|
margin-left: 0.5rem;
|
|
padding-left: 0.5rem;
|
|
border-left: 1px solid #dee2e6;
|
|
}
|
|
|
|
.delivery-time-preset-btn {
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
border: 1px solid #dee2e6;
|
|
background-color: #fff;
|
|
color: #495057;
|
|
border-radius: 0.375rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.delivery-time-preset-btn:hover {
|
|
background-color: #f8f9fa;
|
|
border-color: #0d6efd;
|
|
color: #0d6efd;
|
|
}
|
|
|
|
.delivery-time-preset-btn.active {
|
|
background-color: #0d6efd;
|
|
border-color: #0d6efd;
|
|
color: #fff;
|
|
}
|
|
|
|
.delivery-time-preset-btn i {
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
/* Группа полей времени */
|
|
.delivery-time-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.delivery-time-group .form-control {
|
|
flex: 1;
|
|
}
|
|
|
|
.delivery-time-separator {
|
|
color: #6c757d;
|
|
font-weight: 500;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Улучшенные поля ввода */
|
|
.delivery-datetime-wrapper .form-control {
|
|
position: relative;
|
|
}
|
|
|
|
.delivery-datetime-wrapper .form-control:focus {
|
|
border-color: #0d6efd;
|
|
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
|
|
}
|
|
|
|
/* Подсказки под полями */
|
|
.delivery-datetime-hint {
|
|
font-size: 0.875rem;
|
|
color: #6c757d;
|
|
margin-top: 0.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.delivery-datetime-hint i {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* Адаптивность */
|
|
@media (max-width: 768px) {
|
|
.delivery-date-quick-buttons {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.delivery-date-quick-btn {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.delivery-time-presets {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.delivery-time-group {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.delivery-time-separator {
|
|
display: none;
|
|
}
|
|
}
|
|
|