CollapseSection превращал заголовки "Кто обращается" / "Суть обращения" в кнопки — по клику секция пряталась целиком, вместе с обязательными полями. Легко было свернуть случайно и не заметить, что часть формы больше не видна (и не отправляется). Заменены на обычные div с отступом: контент всегда на экране, сворачивать нечего. Один из двух известных факторов, из-за которых форма на мобильном "теряла" часть контента (второй — фикс на 100dvh, отдельным коммитом): свёрнутая секция резко уменьшала высоту страницы, из-за чего казалось, что скролл пропал и форма "не двигается вниз". Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -3,3 +3,14 @@
|
|||||||
.notice {
|
.notice {
|
||||||
margin-bottom: $sp-5;
|
margin-bottom: $sp-5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.group {
|
||||||
|
margin-bottom: $sp-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Разделитель между группами полей — только между ними: работает через
|
||||||
|
// соседний селектор, поэтому перед первой группой и после последней его нет.
|
||||||
|
.group + .group {
|
||||||
|
padding-top: $sp-6;
|
||||||
|
border-top: 1px solid $gray-200;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,12 +1,4 @@
|
|||||||
import {
|
import { Alert, Button, FormActions, FormCard, FormGrid, Toggle } from '@tnsu/ui-kit';
|
||||||
Alert,
|
|
||||||
Button,
|
|
||||||
CollapseSection,
|
|
||||||
FormActions,
|
|
||||||
FormCard,
|
|
||||||
FormGrid,
|
|
||||||
Toggle
|
|
||||||
} from '@tnsu/ui-kit';
|
|
||||||
import { Field } from '../../components/Field/Field';
|
import { Field } from '../../components/Field/Field';
|
||||||
import { AppealSection } from './sections/AppealSection';
|
import { AppealSection } from './sections/AppealSection';
|
||||||
import { AuthorSection } from './sections/AuthorSection';
|
import { AuthorSection } from './sections/AuthorSection';
|
||||||
@@ -34,13 +26,16 @@ export const FeedbackForm: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
<CollapseSection title="Кто обращается" icon="people">
|
{/* Раньше секции лежали в CollapseSection и сворачивались по клику на
|
||||||
|
заголовок — можно было случайно спрятать обязательные поля и не
|
||||||
|
заметить это. Группа теперь просто div с отступом: поля всегда видны. */}
|
||||||
|
<div className={styles.group}>
|
||||||
<AuthorSection data={data} errors={errors} set={set} />
|
<AuthorSection data={data} errors={errors} set={set} />
|
||||||
</CollapseSection>
|
</div>
|
||||||
|
|
||||||
<CollapseSection title="Суть обращения" icon="chat">
|
<div className={styles.group}>
|
||||||
<AppealSection data={data} errors={errors} set={set} />
|
<AppealSection data={data} errors={errors} set={set} />
|
||||||
</CollapseSection>
|
</div>
|
||||||
|
|
||||||
{/* Спрашиваем в самом конце и только у именных обращений: у анонимного
|
{/* Спрашиваем в самом конце и только у именных обращений: у анонимного
|
||||||
ответа всё равно не будет, вопрос был бы бессмысленным. */}
|
ответа всё равно не будет, вопрос был бы бессмысленным. */}
|
||||||
|
|||||||
Reference in New Issue
Block a user