Topic List Previews (legacy)

Спасибо, я попробую.

2 лайка

Джон, также проверь /latest.json и данные, поступающие для миниатюр — убедись, что URL-адреса работают, например:

2 лайка

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

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

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

Этот сайт в настоящее время использует плагин:

Примечание: в Safari это выглядит немного лучше благодаря более изящной полосе прокрутки :slight_smile:

3 лайка

Привет, после обновления у меня появилась бесполезная горизонтальная полоса прокрутки. Как её можно убрать? :slight_smile:

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

.tlp-featured-topics.has-topics .topics {
    overflow-x: hidden;
}
2 лайка

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

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

Так что другой вариант — публикуйте гораздо больше рекомендуемого контента!!

2 лайка

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

/* Работает в Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: grey darkgrey;
}

/* Работает в Chrome, Edge и Safari */
*::-webkit-scrollbar {
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: darkgrey;
}

*::-webkit-scrollbar-thumb {
  background-color: grey;
  border-radius: 0px;
  border: 0px solid grey;
}

источник: How to Customize Scrollbars with CSS: Styling Guide with Examples | DigitalOcean

2 лайка

Спасибо! Это отличное решение :slight_smile:

2 лайка

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

Однако через несколько недель использования нам пришлось его отключить, так как он вызывает довольно серьёзные проблемы при переходе внутрь тем и обратно. В основном при входе в тему часто происходит мерцание макета, а навигационная панель на мгновение исчезает до того, как тема будет отрисована. Аналогичная ситуация происходит при возврате назад: навигационная панель снова исчезает, и положение прокрутки в списке тем сбрасывается. Кроме того, переход внутрь тем и обратно заметно медленнее, чем при отключённом плагине. Вот запись экрана, показывающая, как это выглядит на мобильном устройстве (извините за ссылку на gfycat, скриншот был слишком большим для загрузки на Discourse).

Не знаете ли вы, что может вызывать эти проблемы, и можно ли что-то сделать, чтобы их предотвратить? В консоли нет ошибок или других признаков, которые могли бы указать на причину сбоя.
Я установил параметр topic list thumbnail resolution level на минимальное значение 6, так как большие изображения нам не нужны, поэтому размер картинок, вероятно, не является причиной. Пожалуйста, дайте знать, если нужна какая-либо дополнительная информация для помощи в решении проблемы.

2 лайка

Спасибо за отчёт. Вы пробовали TC, если не секрет?

1 лайк

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

1 лайк

Скорее всего, нет, потребуется переустановка.

Описанное вами поведение кажется странным. Ссылки (href) заголовков почти идентичны ссылкам на миниатюрах.

Можете ли вы подтвердить, что при клике на миниатюры проблема не возникает? (в плагине).

1 лайк

Могу подтвердить! Я даже не замечал этого до сих пор: клик по миниатюре переводит к первому сообщению в теме. Клик по миниатюре работает так же быстро, как и должно быть.

Спасибо, попробую это, хотя, вероятно, сегодня вечером у меня не будет времени. Я также только что обнаружил, что существует Компонент темы миниатюр списка тем, и интересно, не подойдёт ли он лучше для нашего случая из-за более узкой направленности. :thinking:

Кстати, спасибо за ваши очень быстрые ответы!

2 лайка

Я теперь попробовал TC, и, к сожалению, он показывает такое же поведение.

2 лайка

Спасибо.

Да, это интересно.

URL-адреса верны, но Ember, похоже, превращает клики по заголовкам в полную перезагрузку страницы.

Если вы посмотрите на вкладку «Network» (Сеть) в вашем браузере, то увидите разницу.

Я почти уверен, что раньше такого не было.

Заголовок создаётся тем же кодом в ядре, так что это крайне загадочно.

2 лайка

Похоже, что наличие изображений в начале поста может вызывать проблемы с форматированием в «выдержке из списка тем». (Это происходит как в плагине, так и в TC)

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

При использовании инструмента инспектора кажется, что «выдержка из списка тем» пытается включить ссылку на изображение в саму выдержку, что и вызывает проблемы со стилем.

1 лайк

“list/topic-excerpt” находится в ядре, а не в плагине или TC, к сожалению.

Я не переопределяю его напрямую.

Хотя не исключено, что это какая-то ерунда с jQuery?

Буду рад вашей помощи в отладке.

1 лайк

Спасибо за быстрый ответ. :smiling_face_with_three_hearts:

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

Похоже, это вызвано ссылкой inline-onebox.

Не уверен, связано ли это с ядром Discourse или плагином TLP. :thinking:

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

2 лайка

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

1 лайк

Огромное спасибо. :grinning:

Да, я думаю, вы правы: при использовании TC проблем не возникает.
Проблема с наложением возникает только после переключения на плагин.

Надеюсь, Chrome скоро исправит ограничение CSS Grid в 1000 строк, тогда мы сможем полностью заменить плагин на TC.

1 лайк

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

1 лайк