Как показать ворота ниже в посте?

Разработка
1

Спасибо за отличный компонент! Можно ли сделать так, чтобы ворота открывались ниже в посте? (У нас все темы начинаются с изображения, и мы хотели бы показать довольно много текста или даже определить место в теме, где ворота должны открываться). Любые подсказки (например, CSS-хаки) будут очень кстати!

2

Да, я тоже хотел спросить о чём-то подобном — возможно, о настройке в процентах, которую можно изменить.

3

В настоящее время контент скрывается с помощью следующей техники (среди прочего):

  • Прокрутка отключена
  • Высота контента страницы установлена на 100%

Вы можете настроить эти параметры. Например:

body.topic-in-gated-category {
    height: 200%;
}

Это позволит продолжить прокрутку:

Это можно сделать визуально приятнее, например, уменьшив синюю область (до ¼ или ⅓ экрана), а также сократив белый градиент…

Вы также можете изменить следующее:

.topic-in-gated-category .post-stream {
    max-height: 150vh;
    overflow: hidden;
}

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

.post-stream > *:nth-child(n+6) {
    display: none;
}

не гарантирует отображение одинакового количества постов от одной темы к другой.

4

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

Заранее большое спасибо.

5

Привет, Хайме,

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

6

Спасибо, @Arkshine. И после небольшого углубления в тему я думаю, что мне нужно клонировать или форкнуть репозиторий для этого компонента, а затем внести свои правки непосредственно в общий CSS, прежде чем импортировать отредактированную версию обратно в Discourse? Правильно ли я понимаю?

7

Если вы хотите изменить CSS, вы можете легко создать новый компонент через интерфейс.

  1. Перейдите в Администрирование → Настроить
  2. Нажмите на Установить
  3. Затем выберите Создать новый. Тип должен быть Компонент.
    image
    image519×357 5.62 KB

Вот и всё! Прикрепите его к вашей теме; затем вы сможете Редактировать CSS/HTML.

Обычно вам стоит сделать форк, если вы хотите внести вклад в оригинальный компонент на Github (создав Pull Request) или если вы хотите создать свою версию. Если вы это сделаете, вы не будете получать обновления от оригинального компонента; скорее всего, это не то, что вам нужно в данном случае!

8

Спасибо еще раз. Проблема, как я понимаю, в том, что свойство CSS в моем пользовательском компоненте также присутствует в базовом компоненте из репозитория на GitHub.

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

9

Если ваш CSS не переопределяет исходный компонент, вы можете добавить !important в правило. Это должно сработать.

.topic-in-gated-category .post-stream {
    max-height: 150vh !important;
    overflow: hidden !important;
}
10

Это работает идеально, ещё раз спасибо за помощь!