Как реализовать расположение тем в два столбца, как здесь?

Поддержка
1

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

Это изображение содержит скриншот комментария на YouTube от пользователя под именем «Everyone», в котором обсуждается использование коллайдеров при проектировании персонажей и анимации, предлагается использовать капсульную форму для расчёта столкновений вместо длинной антенны, а также упоминается удобство использования простого прямоугольника для избежания сложностей. (Подпись сгенерирована ИИ)
Это изображение содержит скриншот комментария на YouTube от пользователя под именем «Everyone», в котором обсуждается использование коллайдеров при проектировании персонажей и анимации, предлагается использовать капсульную форму для расчёта столкновений вместо длинной антенны, а также упоминается удобство использования простого прямоугольника для избежания сложностей. (Подпись сгенерирована ИИ)2768×836 249 KB

3

CSS Flexbox, возможно? Просто на ум приходит. Затем, возможно, используя API/запросы, можно получить какие-то другие данные, например, количество постов.

4

То, что вам нужно, — это по сути замена горизонтальных линий на вертикальные?
Это можно реализовать через компонент темы, но только с помощью CSS не получится.
Нужно будет действовать аккуратно, чтобы ничего не сломать, и это может оказаться непростой задачей :thinking:

5

Я попробовал немного поиграть с flexbox, но это только сломало верстку.

6

Привет, @Canapin! В целом я хочу, чтобы данные об авторе поста располагались слева, а содержимое поста — справа, вместо того чтобы они шли друг под другом, как в стандартной разметке Discourse. Было бы полезно, если бы для этого существовали какие-либо моды.

7

Я согласен: с помощью CSS эти элементы нельзя аккуратно переместить. Аватар и стандартные метаданные на шаблоне расположены отдельно:

image
image574×122 11.9 KB

Интересно, как это реализовано на форумах Epic. Это переопределение шаблона? Я не вижу здесь никакого выхода для плагинов:

image
image574×105 8.12 KB

8

Судя по тому, что я вижу, они добавили данные (имя пользователя и т. д.) обратно после содержимого виджета post-avatar, увеличили ширину для .topic-avatar и скрыли всё остальное с помощью CSS, кроме даты. Давайте посмотрим, смогу ли я воспроизвести это.

9

Вы можете попробовать этот базовый компонент темы: GitHub - Arkshine/discourse-topic-avatar-vertical-layout · GitHub.

  • Только для просмотра на настольных компьютерах
  • Совместим с другими модификациями [1]
  • Количество постов не включено. Вам понадобится плагин, например этот: GitHub - Arkshine/discourse-user-post-count · GitHub.

Дайте знать, если обнаружите проблемы.

  1. Он перемещает виджет poster-name под виджет post-avatar. Никаких других изменений, кроме корректировок CSS. ↩︎

10

Это сработало как по волшебству! Большое спасибо, друг.