Объединенная кнопка входа

[Lilly (Lillian)]

	Краткое описание	Заменяет стандартные кнопки авторизации на одну кнопку, открывающую выпадающее меню или модальное окно со ссылками
	Репозиторий	https://github.com/Lillinator/combined-auth-button
	Руководство по установке	Как установить тему или компонент темы

Установить этот компонент темы

Обзор

Этот компонент темы объединяет кнопки «Регистрация» и «Вход» в одну кнопку с выпадающим списком, что делает шапку сайта чище и улучшает пользовательский опыт (особенно для мобильных пользователей).

В частности, в стандартном мобильном представлении форума Discourse кнопка «Регистрация» скрыта, и отображается только существующая кнопка «Вход»; это может сбивать с толку и казаться неочевидным для новых посетителей форумов Discourse (анонимный просмотр). Кроме того, в стандартном мобильном представлении кнопка «Вход» ведет на страницу входа, которая, в свою очередь, содержит ссылку на страницу регистрации; это создает лишние трудности для новых пользователей на мобильных устройствах.

Стандартное мобильное представление без компонента:

Этот простой компонент темы Discourse заменяет существующую кнопку Log In на объединенную кнопку с более понятной подписью — по умолчанию Sign Up / Log In. При нажатии она открывает выпадающее меню или мобильное модальное окно со ссылками на соответствующие страницы регистрации или входа.

Мобильная кнопка и модальное окно с настройками компонента по умолчанию:

Кнопка для настольных компьютеров и выпадающее меню с настройками компонента по умолчанию:

---

Настройки и переводы темы

В настройках администратора есть параметры, позволяющие включить отображение на настольных компьютерах, скрыть иконку объединенной кнопки для экономии места в шапке на мобильных устройствах, а также изменить все иконки и подписи кнопок.

Настройка	Описание
enable_on_desktop	Включить объединенную кнопку авторизации на всех размерах экрана
hide_mobile_combined_button_icon	скрывает иконку объединенной кнопки авторизации в мобильном представлении для экономии места в шапке
combined_button_icon	SVG-иконка для объединенной кнопки выпадающего меню
login_button_icon	SVG-иконка для кнопки «Вход»
signup_button_icon	SVG-иконка для кнопки «Регистрация»
button_labels.auth	текстовая строка объединенной кнопки для переводов темы
button_labels.log_in	текстовая строка кнопки «Вход» для переводов темы
button_labels.sign_up	текстовая строка кнопки «Регистрация» для переводов темы

---

Дополнительные скриншоты

Страница настроек

При включенном hide_mobile_combined_button_icon

Измененные подписи и иконки кнопок

Мобильные устройства:

Настольные компьютеры:

Настройте под свой форум для развлечения

---

Примечания

• Этот компонент совместим с меню «Гамбургер» слева на мобильных устройствах, но центрирование логотипа сайта может привести к тесноте в шапке.

---

Посмотрите мои другие разработки для Discourse

[Lilly (Lillian)]

Я только что выпустил обновление, которое улучшает взаимодействие, открывая мобильное модальное окно со ссылками на страницы регистрации или входа. Также обновил первое сообщение. Спасибо @Moin за идею!

скриншоты

Кнопки модального окна компонента по умолчанию:

Изменяемые подписи кнопок:

[eisammy (Sammy)]

Огромное спасибо @Lilly, я скоро протестирую

[Lilly (Lillian)]

Хорошо, я снова внес некоторые изменения в этот компонент — теперь его можно включить на рабочем столе и изменить все иконки.

[Lilly (Lillian)]

Сегодня я внес небольшое исправление для этого компонента — кнопка отображалась внутри заголовка темы при прокрутке, когда использовался компонент гамбургер-меню с левой стороны. Теперь эти компоненты полностью совместимы друг с другом.