Карточки тем


В настоящее время главная страница отображается некорректно на Samsung S23 Ultra. Один пост вызывает переполнение текста и нарушает всю разметку.

Вызвана ли эта проблема самим постом или ошибкой компонента темы?

Спасибо!

1 лайк

Я проверил и обнаружил, что проблема вызвана ссылкой на Google Maps в сообщении.

Если ссылка имеет формат maps.google.com, всё работает нормально.

2 лайка

Готовится ли компонент «Карточки тем» к изменениям: Upcoming topic-list changes - how to prepare themes and plugins? Я только что обновил Discourse и получил уведомление для администраторов о том, что этот компонент необходимо обновить.

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

1 лайк

Ах, верно! Моя вина. Я забыл, что мы используем https://github.com/communiteq/discourse-topic-cards. https://github.com/communiteq/discourse-topic-cards

@RGJ, извините за беспокойство, не знаете ли вы, в чём сейчас разница между вашим форком и основным репозиторием?

2 лайка

Да, основной репозиторий поддерживается должным образом… Я займусь этим в начале следующей недели.

2 лайка

Версия для мобильных устройств по какой-то причине ломается, когда включен компонент ‘topic excerpt’, и даже без него (у меня две темы — с этим компонентом и без него, и обе сломались) ¯\_(ツ)_/¯ поэтому этого CSS достаточно

PS: Вставьте этот код в мобильный SCSS из панели администратора

.topic-card__excerpt-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    white-space: normal !important; 
}

.topic-card__excerpt {
    max-width: 100% !important;
    overflow: hidden !important;
}

.topic-list-item {
    overflow: hidden !important;
    max-width: 100% !important;
    white-space: normal !important;
}

td {
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: normal !important;
}
2 лайка

Как это можно применить только к одной категории или списку категорий, например, Миниатюры тем?

1 лайк

Вам нужно добавить эту логику в компонент. Если этого нет в официальном плане разработки, то это возможно только через форк.

Да, нам это тоже определённо понадобится. @jordan-violet, вы сделали то, что предложил @manuel

У меня нет технических знаний, чтобы сделать это. :disappointed_face:

1 лайк

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

5 лайков

Выглядит хорошо

1 лайк

Эй, от тебя это значит очень много! Спасибо!

1 лайк

Есть идеи, почему некоторые заголовки чёрные, а другие синие? Все 3 темы мной прочитаны.

Ха! Сам себе ответил сразу после публикации. Чёрный цвет означает непрочитанные ответы. Но поскольку рядом уже есть значок с цифрой в кружочке, вероятно, цветовая индикация тут и не нужна.

1 лайк

Если я хочу, чтобы сами карточки тем имели цвет, отличный от остального фона, какой CSS мне нужно изменить?

Также я не вижу этого упоминания, но карточки тем скрывают иконку массовых действий. Можно ли её вернуть?
Мне приходится постоянно её отключать, когда мне нужно применить массовые обновления к темам.

1 лайк

Нажмите правой кнопкой мыши на элемент, который хотите изменить, и выберите «Просмотреть код» (Inspect). Откроются инструменты разработчика браузера, и вы увидите CSS-селектор.

1 лайк

Спасибо, я добавил:

.topic-card.has-max-height {
    background: #e6ecf2
}
.topic-card.has-max-height:hover {
    background: #ddecf7
}

И это отлично работает со стандартной палитрой «Оттенки синего».

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

Отвечаю на свой вопрос снова…

Вчера я узнал о @media (prefers-color-scheme: light/dark), так что всё в порядке.

1 лайк

Огромное спасибо @eisammy!!!
У меня были проблемы с этим, и я чуть не сошел с ума!
По какой-то причине я не мог заставить внешние ссылки превращаться в onebox, поэтому длинные ссылки в выдержках растягивали текст за пределы блока и портили интерфейс моего сайта. С вашей помощью проблема решена!

1 лайк

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

Discourse 3.5.0.beta7-dev - https://github.com/discourse/discourse version 773ae006b7d4315c01a37170b1ebad27332d515e

1 лайк

Есть ли шанс, что это появится в ближайшем будущем?