feat(auth): добавить вкладку «Зайти как гость» на экраны входа/регистрации
Незалогиненный пользователь может сразу перейти на /join, не выбирая между входом и регистрацией. На узких экранах (375/360px) подпись сокращается до «Гость», чтобы вкладка осталась в одну строку.
This commit is contained in:
@@ -70,6 +70,10 @@ export function LoginPage() {
|
||||
<Link to="/register" className="tab" role="tab" aria-selected="false">
|
||||
Регистрация
|
||||
</Link>
|
||||
<Link to="/join" className="tab" role="tab" aria-selected="false">
|
||||
<span className="label-full">Зайти как гость</span>
|
||||
<span className="label-short">Гость</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<form
|
||||
|
||||
@@ -133,6 +133,10 @@ export function RegisterPage() {
|
||||
<span className="tab is-active" role="tab" aria-selected="true">
|
||||
Регистрация
|
||||
</span>
|
||||
<Link to="/join" className="tab" role="tab" aria-selected="false">
|
||||
<span className="label-full">Зайти как гость</span>
|
||||
<span className="label-short">Гость</span>
|
||||
</Link>
|
||||
</div>
|
||||
<h2 className="screen-title">Создать аккаунт</h2>
|
||||
<form onSubmit={handleSubmit} noValidate>
|
||||
|
||||
@@ -104,6 +104,11 @@
|
||||
}
|
||||
.tab.is-active { background: var(--color-surface); color: var(--color-ink-700); font-weight: 600; box-shadow: var(--shadow-sm); }
|
||||
|
||||
/* Короткая подпись вкладки «Зайти как гость» — на узком экране (см. @media
|
||||
ниже) длинный вариант переносится на 2 строки и делает вкладку выше
|
||||
соседних; та же схема, что у «Мини-окно»/«Мини» в RoomToolbar.tsx/room.css. */
|
||||
.tab .label-short { display: none; }
|
||||
|
||||
.field { margin-bottom: var(--space-5); }
|
||||
.field label { display: block; font: var(--text-body); font-weight: 600; color: var(--color-ink-900); margin-bottom: var(--space-2); }
|
||||
.input-wrap { position: relative; display: flex; align-items: center; }
|
||||
@@ -289,4 +294,13 @@
|
||||
.stat-glass { flex-basis: 100%; }
|
||||
|
||||
.form-panel { padding: var(--space-6) var(--space-4) var(--space-10); }
|
||||
|
||||
/* Три вкладки (Вход/Регистрация/Зайти как гость) на ширину 375/360px в
|
||||
исходный `width: fit-content` не помещаются — растягиваем группу на
|
||||
всю ширину блока и даём каждой вкладке одинаковую долю вместо
|
||||
ужимания по контенту, иначе текст «Регистрация» переносится. */
|
||||
.tabs { width: 100%; }
|
||||
.tab { flex: 1; justify-content: center; padding: 8px 6px; font-size: 13px; }
|
||||
.tab .label-full { display: none; }
|
||||
.tab .label-short { display: inline; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user