Карточки тем

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

До:

После:

4 лайка

Спасибо большое за этот замечательный TC. Внешний вид действительно современный, простой и выглядит элегантно.

Один вопрос и просьба:

Могут ли результаты поиска иметь такой же внешний вид? Было бы очень здорово, если бы отображение результатов поиска соответствовало отображению TC, учитывая, что наши пользователи часто используют функцию поиска.

Ещё раз большое спасибо за эту работу.

2 лайка

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

3 лайка

@chapoi Как можно уменьшить размер изображения и область темы?

карточки тем слишком большие

1 лайк

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

  • значение закругления углов или отключение
  • значение тени или отключение
  • включение/отключение ответов, просмотров и активности
  • отображение авторов: true или false
3 лайка

Просто хочу поделиться на случай, если кому-то ещё это пригодится:

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

Вот соответствующий CSS, который я использовал для исправления:

// Увеличить максимальную высоту карточек тем с миниатюрой
.topic-card:has(.topic-card__thumbnail) {
    max-height: 275px;
}

(При проверке в инспекторе оказалось, что высота по умолчанию составляла 210 пикселей)

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

До

После

4 лайка

Интересно, можно ли настроить выбор категорий, для которых будут использоваться карточки тем? Это было бы здорово, особенно если применить это в #theme, так как миниатюры тем не очень удобны на мобильных устройствах.

Очень хороший компонент.

3 лайка

Да, именно это я имел в виду ранее: в зависимости от других параметров 210 пикселей могут быть слишком малы, а 275 пикселей — слишком велики. Сложно найти универсальное решение для всех случаев.

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

5 лайков
  1. А что насчёт сдвига фотографии вправо? Расположение с фотографией и без неё различается и выглядит несогласованно.
  2. Похоже, что нижний текст иногда обрезается, так как часть контента отображается не полностью.
3 лайка

Мне интересно, как этот компонент темы выглядит на Air Theme, особенно при объединении тем с изображениями и без них. Выглядит многообещающе, но до идеала ещё далеко. Возможно, проблемы можно решить только с помощью CSS, а может, потребуется более глубокая доработка.

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

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

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

3 лайка

Что нужно сделать, чтобы компонент «Карточки тем» отображал не только :heart: тем (как это уже происходит сейчас), но и количество просмотров и комментариев, как это делает официальный блог в режиме Topic List Thumbnails?

Миниатюры в списке тем

Карточки тем

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

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

Я остановился на карточках тем + теме по умолчанию, добавив современные блоки категорий и групп, которые создают карточки для категорий и отлично сочетаются с карточками тем.

Причины:

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

Ладно, может быть, этот вопрос проще: :sweat_smile:

В настоящее время раздел «Предлагаемые темы» в конце любой страницы также отображает темы в виде карточек. Хотя мне нравятся карточки на основных страницах, я считаю, что в конце всех страниц они излишни и отвлекают от основного содержимого страницы или обсуждения.

Есть ли способ показать простой список «Предлагаемых тем» (максимально приближенный к стандартной теме), не затрагивая карточки тем на основных страницах?

2 лайка

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

3 лайка

Хорошо, спасибо. Готово, также для моего другого запроса выше:

Кстати, вчера я попробовал это, потому что столкнулся с той же проблемой: содержимое вылезало за пределы карточек:

Разве это не ломает мобильный вид? Я только что попробовал, и в моём случае всё ломается.

3 лайка

Я посмотрю на это. Как минимум, я добавлю настройку для высоты, чтобы упростить её изменение. Поставлю напоминание, чтобы не забыть.

5 лайков

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

  • Хотя описание всегда ограничено тремя строками, заголовок может переноситься на две строки или более. Для заголовка довольно легко занять вторую строку, и дизайн мог бы это учитывать.
  • Когда тегов много и они не помещаются рядом с категорией, все они переносятся на новую строку ниже. Было бы более естественно и экономично по пространству, если бы теги всегда начинали отображаться рядом с категорией, а те, что не помещаются в первой строке, переносились бы на вторую.
  • Элемент «Опубликовано [дата]» и :heart: в настоящее время находятся на новой строке под автором. Однако элемент «Опубликовано» мог бы располагаться рядом с :heart, выровненным по правому краю, в той же строке, что и автор. Это сэкономило бы вертикальное пространство для каждой записи и снизило бы риск выхода контента за пределы.

На случай, если объяснение по поводу тегов не совсем понятно. Здесь видно, как они начинают новую строку вместо того, чтобы располагаться рядом с категорией, как это происходит по умолчанию:

3 лайка

Это происходит здесь

2 лайка

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

Большинство экземпляров Discourse используют от 0 до 5 тегов, и одной строки для них более чем достаточно. Некоторые (как наш) могут использовать теги в большом количестве, но нам не нужно видеть их все на карточках тем. Достаточно увидеть первые, чтобы составить общее представление.

Введение ограничений на количество строк сделает карточки тем более предсказуемыми при разных размерах изображений и соотношениях сторон:

  • 1 строка для категории и тегов
  • До 2 строк для заголовка
  • До 3 строк для описания
  • 1 строка для автора, даты публикации и количества лайков.
3 лайка

К вашему сведению, мы собираемся заняться этим вопросом по адресу Add icons for Views and Replies, and Last Activity date in Topic Cards.

4 лайка

Ах да, я забыл оставить комментарий здесь с обновлением по этому поводу: мне пришлось добавить этот код только в desktop.scss, а не в common.scss.

Я больше не могу редактировать свой первоначальный комментарий, но обновил его в своём компоненте темы: Minima Adjustments for Topic Cards

3 лайка