Display Topic Author on Topic List

Внести вклад UX
1

Hello!

I would like to change the topic list to only display the topic’s author instead of a list of frequent posters in a topic.

Would there be an easy way to accomplish this?

Username of user below topics
2

EDIT: Here’s a more complete solution I threw together that you can download as a theme component:

8 лайков
Topic Author
3

@tshenry, круто, я ищу похожее решение, но хотел бы отображать имя пользователя автора вместо его изображения.

Где можно посмотреть репозиторий вашего компонента?

4

Ах! Я точно облажался, забыв предоставить возможность скачать или посмотреть код! Это просто CSS. Как только будет время, я упакую это в полноценный компонент темы на GitHub.

// Скрыть всех участников, кроме автора темы
.topic-list .posters {
    width: 75px;
    text-align: center;
    
    // Показать только первого участника
    a:not(:first-of-type) {
        display: none;
    }
    // Убрать смещение и декорации
    a:first-child .avatar.latest:not(.single) {
        position: static;
        box-shadow: none;
        border: 0;
    }
    // Корректировка для центрирования
    & > a {
        float: none;
        margin-right: 0;
    }
}

// Убедиться, что правильный пользователь отображается на меньшей ширине
@media screen and (max-width: 850px) {
    .topic-list td.posters {
        // Убедиться, что первый участник виден
        a:not(.latest) {
            display: block;
        }
        // Скрыть всё остальное
        a:not(:first-of-type) {
            display: none;
        }
    }
}

То, что вы пытаетесь реализовать, скорее всего, ближе к этому:

4 лайка
7

Это супер круто. Спасибо!

Кажется, CSS-код для мобильных устройств не работает. Недавно Discourse изменил способ организации постеров для мобильных? Есть какие-нибудь советы, как это исправить?

Спасибо!

8

Приведённый выше CSS изначально не предназначался для мобильных устройств, но, думаю, это, вероятно, то, что вы ищете?

1 лайк
9

Да! Я не смог ограничить этот макет только для топиков (OP) по конкретным категориям через CSS в мобильной теме, как это можно сделать с вашим CSS-кодом. Есть ли у вас советы, как этого добиться на мобильных устройствах (извините, я новичок в Ember.js :/)?

10

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

  • Создайте тему в канале Development и посмотрите, смогут ли разработчики дать вам какие-либо советы
  • Изучите код существующих компонентов тем, связанных с категориями, и поищите идеи или вдохновение
  • Разместите объявление в канале Marketplace и заплатите кому-нибудь за разработку этой функции
2 лайка