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

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


Совместимость

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

Компонент темы был протестирован на нескольких цветовых палитрах; он будет работать с светлыми, нейтральными или тёмными темами.

К сожалению, компонент темы может не работать с плагинами, которые уже изменяют отображение списка тем, например, с плагинами предпросмотра списка тем.

Дайте знать, если у вас возникнут какие-либо проблемы!

21 лайк

Классный плагин. Хотя, как общая рекомендация, можно ли указать минимальную версию Discourse для темы и списка компонентов? Я нахожусь на стабильной ветке, но у меня есть тестовая среда для версии 2.5 beta. @codinghorror?

Я создал отдельную ветку для старых версий.

При установке используйте ссылку https://github.com/iunctis/md-topic-list-mobile, откройте расширенные настройки и добавьте older-discourse.

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

2 лайка

Прямое сравнение:

По умолчанию / Компонент

Мне нравится, что аватар последнего автора находится справа.
В стандартной мобильной верстке большой аватар, расположенный сразу слева от заголовка темы, кричит «автор».

Просто из любопытства я посмотрел файл SCSS: есть ли причина, по которой вы не использовали вложенный синтаксис, предлагаемый SCSS?

7 лайков

Попробовал расширенные настройки. Всё ещё пишет «отключено», требуется 2.5 beta2.

В основном потому, что с вложенным синтаксисом в CSS я допускаю больше ошибок :grimacing:

Но я могу переписать это через пару недель, когда буду более уверен в дизайне списка тем

@Heliosurge Я отредактировал файл about.json, теперь всё должно быть в порядке.

3 лайка

Спасибо за вашу отличную работу. :clinking_beer_mugs::smiling_face_with_sunglasses::+1::sparkles:

2 лайка

Только что я выкатил небольшое обновление. Новых функций нет, но я добавил совместимость с новыми функциями миниатюр.

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

4 лайка

Мне это нравится, всё так чисто. @Steven, я wondered, возможно ли добавить эту нативную функцию через CSS при клике на «Все ответы»?

Не через CSS, но шаблон можно исправить.

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

2 лайка

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

2 лайка

Привет, @Steven, похоже, что уведомления о новых сообщениях отображаются дважды: один раз справа от заголовка темы и один раз вместо счетчика ответов. Это баг или я что-то упускаю?

Кстати, очень приятный мобильный вид темы. Моим пользователям он нравится.

1 лайк

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

Я обновлюсь через несколько минут

edit: Только что обновил, дайте знать, если стало лучше

1 лайк

Да, теперь всё работает отлично, спасибо, всё было очень быстро :slight_smile:

1 лайк

Я думаю, вам стоит удалить эмодзи тега, который вы добавили перед списком тегов:

На разных операционных системах это выглядит по-разному:

image

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

Если вы действительно добавите иконку тега с помощью компонента иконок тегов, это будет выглядеть так:

image

Поэтому я скрыл эмодзи с помощью CSS, но, на мой взгляд, его вообще не должно быть здесь :slight_smile:

Как это отображается на моём форуме сейчас:

image

.md-tlm .discourse-tags::before {
    display: none;
}
.md-tlm .tl-replies {
    margin-right: 8px;
}
1 лайк

Спасибо за обратную связь. У меня сейчас серьёзные проблемы с интернетом, поэтому я немного отстал по всем задачам, связанным с Discourse.

Мне нравится идея с иконкой или эмодзи для тега, но, скорее всего, я заменю два компонента темы на d-icon для тегов. Одновременно с этим я создам ветку без какой-либо иконки для совместимости с компонентом иконок тегов.

1 лайк

Привет, Стивен!
Похоже, в текущей версии Discourse есть несколько проблем с макетом.
Я создал пустую тему и добавил только компонент списка тем MD для мобильных устройств, и, похоже, проблема именно в этом.
Вот мобильный вид:

Что-то не так с отступами.

2 лайка

Спасибо, я займусь этим прямо сейчас.

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

edit: Новый коммит. Я переписал шаблон и стили, чтобы в будущем было проще вносить обновления.

Дайте знать, если возникнут какие-либо проблемы, @Canapin

4 лайка

Выглядит отлично. Спасибо!

1 лайк

Можем ли мы добавить общее количество лайков и просмотров тем рядом с количеством ответов?

2 лайка