Список тем: авторы и участники

[Lilly (Lillian)]

	Краткое описание	Добавляет аватар автора темы в левый столбец страниц со списком тем, а также предоставляет возможность отображать в столбце авторов только последнего участника обсуждения. Аватар автора можно настраивать по размеру и форме.
	Предпросмотр	https://discourse.theme-creator.io/theme/Lilly/discourse-topic-list-author-posters
	Репозиторий	https://github.com/Lillinator/topic-list-author-posters
	Руководство по установке	Как установить тему или компонент темы

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

Обзор

Этот компонент темы для Discourse вставляет аватар автора темы в первый столбец всех страниц со списком тем и предоставляет настройки, позволяющие администратору указать форму и размер аватара. Кроме того, аватар автора не будет отображаться первым в списке участников обсуждения.

Также есть настройка, позволяющая отображать в столбце участников только аватар последнего автора сообщения, но только если в теме участвует более одного пользователя. Таким образом, аватар автора будет отображаться только в том случае, если в теме есть и другие участники.

Кроме того, администраторы могут выбрать отображение автора темы на странице категории, когда включен режим просмотра последних тем (т.е.: Categories with latest topics), а также настроить размер и форму аватара.

Также есть переключатель для вертикального выравнивания содержимого строки по верхнему или среднему краю.

На маленьких экранах (мобильные устройства) автор будет отображаться там, где обычно находится аватар последнего автора сообщения.

Этот компонент хорошо работает с Topic List Excerpts и Discourse AI summary gists.

Настройки

Скриншот настроек с параметрами по умолчанию на странице администратора компонента

Настройки	Описание
Topic list author avatar size	Размер аватаров в столбце аватара автора на страницах со списком тем — small (малый), medium (средний) или large (большой).
Topic list author avatar border radius	Скругление аватара на страницах со списком тем: 0% = квадрат → 50% = круг. tab_style = скругленные левые углы
Topic list show last poster only	Отображать только аватар последнего автора сообщения в столбце участников, но только если в теме участвует более одного пользователя.
Vertically align row top	Переключатель для выравнивания строк по верхнему или среднему краю
Show author on categories page	Отображать аватар автора вместо последнего автора сообщения в списках тем на странице категории.
Category page topic avatar size	Размер аватаров в столбце аватара автора в списках тем на странице категории — small (малый), medium (средний) или large (большой).
Category page avatar border radius	Скругление аватара на странице категории: 0% = квадрат → 50% = круг. tab_style = скругленные левые углы

Скриншоты

Ниже приведены некоторые скриншоты с различными настройками размера и формы аватара, а также с расширенными краткими описаниями от ИИ.

Скриншоты различных страниц со списком тем с включенными разными настройками компонента, показывающие как компактный, так и расширенный режим кратких описаний, а также развернутую/свернутую боковую панель

С настройками по умолчанию:

Крупные аватары в стиле tab_style с расширенными краткими описаниями:

Маленькие аватары с радиусом скругления 15% и включенной опцией Topic_list_show_last_poster_only:

Аватары среднего размера с радиусом скругления 0% (квадратные) и включенной опцией Topic_list_show_last_poster_only, а также с расширенными краткими описаниями:

Скриншоты страницы категории, показывающие 2 разных размера и формы аватаров с автором или последним участником.

Настройки компонента по умолчанию, со средними круглыми аватарами и включенной опцией Show_author_on_categories_page:

Крупные аватары в стиле tab_style и отключенной опцией Show_author_on_categories_page:

Скриншот мобильного вида

С аватарами автора в стиле tab_style:

---

Примечания

• Вставляет аватар автора и изменяет столбец участников там, где это ожидается, на вкладках страницы профиля.
• Поведение на мобильных устройствах такое же, как и по умолчанию в списках тем в футере (рекомендуемые/связанные темы), а также на страницах вкладок профиля и входящих сообщений.
• Не совсем совместим с темой Horizon.

---

Возможные будущие задачи

• Добавить переключатель отключения на мобильных устройствах?
• Исключения для категорий и тегов?
• Поддержка слева направо?
• Скругление аватаров участников?

Как всегда, спасибо @Moin за идею, обратную связь и помощь в отладке.

---

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

[jordanjay29]

Спасибо за создание этого плагина, он мгновенно решил потенциальную проблему для меня!

@Lilly

Дальнейшие улучшения стиля

Возможно, это уже запланировано, но хотел упомянуть, что я заметил странное отступление у колонки с аватаром автора слева (которого нет на мобильных устройствах, когда компонент отключен, для сравнения). Похоже, что атрибут text-align для td.posters влияет и на изображение.

Выравнивание списка аватаров авторов также меняется при включении компонента, и это выглядит так, будто выравнивание td.topic-list-data переопределяет значение по умолчанию. Если вас всё устраивает, я легко могу внести изменения в стили на своей стороне.

Отличный компонент, спасибо ещё раз.

[Lilly (Lillian)]

Спасибо за отчёт, я только что внёс исправление. Обновите компонент и дайте знать, если это поможет.

[jordanjay29]

Выравнивание аватара по левому краю на десктопе выглядит лучше. Я добавил этот CSS, чтобы настроить колонку среднего постера под свои предпочтения:

td.posters.topic-list-data {
    vertical-align: middle !important;
}

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

[Lilly (Lillian)]

@jordanjay29

На десктопе выравнивание аватара по левому краю выглядит лучше. Я добавил этот CSS, чтобы настроить колонку среднего постера под свои предпочтения:

Вертикальное выравнивание сверху сделано намеренно, чтобы сохранить единообразие с остальными карточками тем, и менять его не будем.

Я не вносил изменений для мобильных устройств, но посмотрю.

[jordanjay29]

Вертикальное выравнивание, возможно, было применено слишком широко в вашем CSS, и, вероятно, нужно указывать только на custom-author-column, где вы используете td.topic-list-data. Я предполагаю, что изменение селектора на td.custom-author-column.topic-list-data решит проблему и устранит необходимость в кастомных стилях с моей стороны.

[Lilly (Lillian)]

Нет, я имел в виду, что колонка с постерами должна быть выровнена по верхнему краю, как и все остальные элементы строки. Выглядит неуместно, если она выровнена по центру (особенно если включены выдержки или AI-краткие содержания), но, полагаю, это вопрос вкуса, так что вы можете настроить как вам угодно.

Вертикальное выравнивание

По умолчанию:

С кратким содержанием:

Я внес небольшое изменение для мобильных устройств, которое должно исправить отступ слева.

[jordanjay29]

Так как на моём форуме не используются отрывки, сниппеты или сводки на базе ИИ, предпочтителен стандартный вид Discourse. Мне кажется, что такое изменение логичнее реализовать в отдельном компоненте темы, но у нас разные мнения, и я уже исправил это на своей стороне — без обид.

На мобильных устройствах теперь выглядит немного лучше, спасибо!

[Lilly (Lillian)]

@jordanjay29 после ещё раз обдумав это, я решил добавить переключатель выравнивания (это было несложно).

вот, пожалуйста

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

редактирование: я выпустил ещё одно исправление для выравнивания на странице категорий.