Мобильный компонент списка тем MD

[Steven]

Это выполнимо

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

{{d-icon "eye"}} {{number topic.views numberKey="views_long"}}
и
{{#if hasLikes}}{{d-icon "heart"}} <a href='{{topic.summaryUrl}}'>{{number topic.like_count}}</a>{{/if}}

Для моего экрана я использовал следующее:

<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.hbr'>
<td class="topic-list-data">
  {{~raw-plugin-outlet name="topic-list-before-columns"}}
  <div class='right'>
    <div>
        {{!--
          Синтаксис `~` удаляет пробелы между элементами, что приводит к получению
          `<a class=topic-post-badges>Некоторый текст</a><span class=topic-post-badges>`,
          без пробела между ними.
          Из-за этого элемент topic-post-badge считается частью того же слова, что и "текст"
          в конце ссылки, что препятствует переносу его на новую строку.
        --}}
        {{~raw-plugin-outlet name="topic-list-before-link"}}
        <div class='main-link'>
          {{~raw-plugin-outlet name="topic-list-before-status"}}
          {{~raw "topic-status" topic=topic~}}
          {{~topic-link topic class="raw-link raw-topic-link"}}
          {{~#if topic.featured_link~}}
          {{~topic-featured-link topic~}}
          {{~/if~}}
          {{~raw-plugin-outlet name="topic-list-after-title"}}
          {{~#if showTopicPostBadges}}
		    {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
		  {{~/if}}
          {{~#if expandPinned~}}
          {{~raw "list/topic-excerpt" topic=topic~}}
          {{~/if~}}
        </div>
        <div class="topic-item-stats clearfix">
          {{#if hideCategory}}
            <span class="topic-creator">
              {{d-icon "user"}} <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a>
            </span>
            {{else}}
            {{~raw-plugin-outlet name="topic-list-before-category"}}
            <div class='category'>
              {{category-link topic.category}}
            </div>
          {{/if}}
          <span class="comments">
            {{d-icon "eye"}} {{number topic.views numberKey="views_long"}} &nbsp; {{d-icon "far-comment"}} <a href="{{topic.firstPostUrl}}">{{number topic.replyCount noTitle="true"}}</a> &nbsp; {{#if hasLikes}}{{d-icon "heart"}} <a href='{{topic.summaryUrl}}'>{{number topic.like_count}}</a>{{/if}}
          </span>
          {{discourse-tags topic mode="list"}}
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="pull-right">
      <div class="last-post-avatar">
        <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.lastPosterUser.username}}">{{avatar topic.lastPosterUser imageSize="small"}}</a>
      </div>
      <div class='num activity last'>
        <span class="age activity" title="{{topic.bumpedAtTitle}}"><a href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a></span>
      </div>
    </div>
</td>
</script>

[Heliosurge (Dan DeMontmorency)]

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

[Steven]

Для некоторых иконок необходимо зарегистрировать соответствующий символ шрифта Font Awesome.

Проверьте настройку svg icon subset и добавьте fa-eye

[Heliosurge (Dan DeMontmorency)]

Спасибо, это исправило проблему. Я думал, что уже добавил это, но, должно быть, забыл закоммитить изменение.

[Heliosurge (Dan DeMontmorency)]

В стабильной версии всё работает отлично. Но в тесте, который прошёл, не отображаются просмотры или лайки. Даже в режиме предварительного просмотра, чтобы убедиться, что другие компоненты не мешают работе, например, теме Air. Ваш базовый компонент работает как задумано. Расширение не показывает просмотры или лайки.

[satonotdead]

Извините, но что означает красный значок? Это что-то вроде тега?

Можно ли использовать значок «awesome», чтобы сохранить гармонию с остальной частью форума?

Спасибо за информацию!

[Steven]

У меня возникли проблемы с тегом d-icon, когда тегов не было.

Я только что попробовал новое решение: отправил обновление, чтобы использовать иконку Font Awesome вместо эмодзи. Дайте знать, если это сработает.

edit: откатил, работает на десктопе, но не на мобильных устройствах.

Если хотите попробовать, вот CSS, который можно использовать:

.topic-list .topic-item-stats .discourse-tags::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f02b";
  margin-left: 5px;
  margin-right: 2px;
}

[digitaldominica]

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

[Steven]

Спасибо, я обновил.

Теперь у вас должен быть флажок рядом с заголовком темы.

[digitaldominica]

Спасибо, проблема для меня решена.

[Steven]

Я не вижу способа заставить это работать со списком тем Glimmer.

Думаю, этот компонент темы будет заброшен. Пока мы можем пометить его тегом deprecated.

Возможно, я попробую что-то новое, используя только Plugin Outlets, но это точно не будет выглядеть так же.

[CAX.DO]

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

[Canapin (Coin-coin le Canapin)]

Огромный поклон этому компоненту, так как я считаю стандартное мобильное представление посредственным (аватар последнего автора слева — самое странное). Было бы жаль от него отказаться, но, к сожалению, я не умею программировать, и чат-боты, включая ChatGPT, тоже не справляются с этим

[Arkshine]

Я попробую!

[Arkshine]

Я создал PR

DEV: Modernize using plugin outlet (#3)

[Steven]

Отличная работа!

У меня пока не было возможности это проверить. Удалось ли тебе добавить значок темы (непрочитанные сообщения)? Я провёл несколько тестов, и добавить значок темы рядом с заголовком оказалось не так просто.

Но я пока не дотягиваю до твоего уровня.

[Arkshine]

@Steven Я не тестировал! С текущими изменениями ничего не заменяется, поэтому можно ожидать, что это будет отображаться (но, возможно, не в ожидаемом месте).

РЕДАКТИРОВАНИЕ:

Вот как это выглядит:

Исходный вид без компонента выглядит так:

Вы всё ещё хотите заменить аватар или всё в порядке?
Давайте посмотрю, смогу ли я заменить аватар.

РЕДАКТИРОВАНИЕ 2:

DEV: Show topic post badges in place of the avatar when available (#4)

[Steven]

Спасибо @Arskshine за проделанную работу!

Я немного поработал над компонентом и предлагаю вам вариант.

Вот как это выглядит сейчас:

Я подготовил альтернативный вариант, который возвращает краткое содержание и перемещает значок темы рядом с заголовком (извините, скриншот на французском, но главное — сам дизайн):

Что вы предпочитаете для официальной версии?

[CAX.DO]

Привет, @Steven @Arkshine!

Большое спасибо за вашу работу.

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

Возможно ли увеличить длину заголовков в новой версии? Одна из целей использования этого компонента — отображать больше информации.

Я не умею программировать, поэтому моё описание может быть не совсем профессиональным.

[CAX.DO]

Я попробовал добавить этот фрагмент CSS, и он сработал.

td .main-link {
    width: 100%;
    display: inline-block;
}