diff --git a/web/src/components/LeadModal.css b/web/src/components/LeadModal.css index 152843b..c4b3fdd 100644 --- a/web/src/components/LeadModal.css +++ b/web/src/components/LeadModal.css @@ -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; + } +} diff --git a/web/src/components/LeadModal.jsx b/web/src/components/LeadModal.jsx index da5740a..a7fa981 100644 --- a/web/src/components/LeadModal.jsx +++ b/web/src/components/LeadModal.jsx @@ -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 (
e.target === e.currentTarget && onClose()}> -
+

@@ -231,8 +241,8 @@ export default function LeadModal({ form = 'appointment', doctor, slot, service,

) : ( -
-
+ +