fix(booking): responsive two-column modal layout and wrap days/times without scroll
This commit is contained in:
Dana Medical Developer
parent
ff95ff9138
commit
2d803fcd28
@ -349,3 +349,76 @@
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- запись на приём: широкое окно в две колонки ----------
|
||||
24 слота по 30 минут в одну колонку не помещались на экран ноутбука — окно приходилось прокручивать. */
|
||||
.lead-modal--wide {
|
||||
width: 920px;
|
||||
}
|
||||
|
||||
.lead-modal__form--split {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
'contacts date'
|
||||
'doctor time'
|
||||
'comment time';
|
||||
align-items: start;
|
||||
column-gap: 32px;
|
||||
row-gap: 18px;
|
||||
}
|
||||
|
||||
/* всё остальное (согласие, кнопка, подсказки) — на всю ширину под колонками */
|
||||
.lead-modal__form--split > * {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.lead-modal__form--split > .lead-modal__contacts {
|
||||
grid-area: contacts;
|
||||
/* в половине окна имя и телефон рядом не помещаются — друг под другом */
|
||||
grid-template-columns: 1fr;
|
||||
row-gap: 18px;
|
||||
}
|
||||
|
||||
.lead-modal__form--split > .lead-field--doctor {
|
||||
grid-area: doctor;
|
||||
}
|
||||
|
||||
.lead-modal__form--split > .lead-field--comment {
|
||||
grid-area: comment;
|
||||
}
|
||||
|
||||
.lead-modal__form--split > .lead-field--date {
|
||||
grid-area: date;
|
||||
}
|
||||
|
||||
.lead-modal__form--split > .lead-field--time {
|
||||
grid-area: time;
|
||||
}
|
||||
|
||||
.lead-modal__form--split .lead-slot {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
/* узкий экран: снова одна колонка */
|
||||
@media (max-width: 960px) {
|
||||
.lead-modal--wide {
|
||||
width: 650px;
|
||||
}
|
||||
.lead-modal__form--split {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* телефон: слоты по 6 в ряд — 4 ряда вместо 6 */
|
||||
@media (max-width: 600px) {
|
||||
.lead-modal__form--split .lead-slots {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
.lead-modal__form--split .lead-slot {
|
||||
height: 36px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -203,10 +203,20 @@ export default function LeadModal({ form = 'appointment', doctor, slot, service,
|
||||
};
|
||||
|
||||
const titleId = `${uid}-title`;
|
||||
// запись на приём: окно шире, чтобы дни и время помещались без прокрутки; форма заявки — в две колонки
|
||||
// (контакты слева, дата и время справа)
|
||||
const wide = form === 'appointment' && status.state !== 'done';
|
||||
const split = wide && !native;
|
||||
|
||||
return (
|
||||
<div className="lead-modal__backdrop" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
|
||||
<div className="lead-modal" role="dialog" aria-modal="true" aria-labelledby={titleId} ref={dialogRef}>
|
||||
<div
|
||||
className={`lead-modal${wide ? ' lead-modal--wide' : ''}`}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby={titleId}
|
||||
ref={dialogRef}
|
||||
>
|
||||
<div className="lead-modal__head">
|
||||
<div className="lead-modal__titles">
|
||||
<h2 id={titleId} className="lead-modal__title">
|
||||
@ -231,8 +241,8 @@ export default function LeadModal({ form = 'appointment', doctor, slot, service,
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<form className="lead-modal__form" onSubmit={submit} noValidate>
|
||||
<div className="lead-modal__row">
|
||||
<form className={`lead-modal__form${split ? ' lead-modal__form--split' : ''}`} onSubmit={submit} noValidate>
|
||||
<div className="lead-modal__row lead-modal__contacts">
|
||||
<label className="lead-field">
|
||||
<span className="lead-field__label">Ваше имя</span>
|
||||
<input
|
||||
@ -260,7 +270,7 @@ export default function LeadModal({ form = 'appointment', doctor, slot, service,
|
||||
</div>
|
||||
|
||||
{needsDoctor && !(scoped && doctorsLoaded && doctorOptions.length === 0) && (
|
||||
<label className="lead-field">
|
||||
<label className="lead-field lead-field--doctor">
|
||||
<span className="lead-field__label">Специалист</span>
|
||||
<span className="lead-field__select">
|
||||
<select className="lead-field__control" value={values.doctorId} onChange={set('doctorId')}>
|
||||
@ -284,7 +294,7 @@ export default function LeadModal({ form = 'appointment', doctor, slot, service,
|
||||
|
||||
{form === 'appointment' && (
|
||||
<>
|
||||
<label className="lead-field">
|
||||
<label className="lead-field lead-field--date">
|
||||
<span className="lead-field__label">Дата</span>
|
||||
<span className="lead-field__select lead-field__select--date">
|
||||
<input
|
||||
@ -297,7 +307,7 @@ export default function LeadModal({ form = 'appointment', doctor, slot, service,
|
||||
<img src={calendarIcon} alt="" width="18" height="18" />
|
||||
</span>
|
||||
</label>
|
||||
<div className="lead-field">
|
||||
<div className="lead-field lead-field--time">
|
||||
<span className="lead-field__label" id={`${uid}-time`}>
|
||||
Удобное время
|
||||
</span>
|
||||
@ -353,7 +363,7 @@ export default function LeadModal({ form = 'appointment', doctor, slot, service,
|
||||
)}
|
||||
|
||||
{form !== 'callback' && (
|
||||
<label className="lead-field">
|
||||
<label className="lead-field lead-field--comment">
|
||||
<span className="lead-field__label">{form === 'review' ? 'Текст отзыва' : 'Комментарий'}</span>
|
||||
<textarea
|
||||
className="lead-field__control lead-field__textarea"
|
||||
|
||||
@ -256,3 +256,16 @@
|
||||
.waitcall-step__back:hover {
|
||||
color: var(--coral, #f05336);
|
||||
}
|
||||
|
||||
/* Развёрнутый вид окна записи: все дни видны сразу (переносятся на следующую строку, а не уезжают
|
||||
вправо), и всё свободное время дня — без прокрутки внутри списка. */
|
||||
.native-booking__branches,
|
||||
.native-booking__days {
|
||||
flex-wrap: wrap;
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
.native-booking__times {
|
||||
max-height: none;
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user