Цвет границы ячеек категорий нарушен после обновления

Поддержка
1

Привет! Я не нашёл других сообщений об этой проблеме, но проверил несколько тем и выяснил, что после обновления до версии 3.1.0.beta4 свойство border-color для блока категорий, заданное через inline CSS, перестало работать.

Вот что происходит:
Screenshot 2023-06-07 at 13.03.12

Непонятно, почему оно внедряет одновременно и цвет, и переменную (?).

Буду благодарен за любую помощь или подсказку.

2

Кажется, @MarcP упоминал что-то подобное в теме компонента темы на Colorful Categories - #7 by MarcP. Вы тоже используете этот компонент?

3

Спасибо! Нет, я пробовал использовать тему Material, а также несколько других на всякий случай. К сожалению, поведение было таким же. Это произошло сразу после обновления. Пока что всё остальное кажется в порядке.

5

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

6

Ой. Я неправильно понял вопрос @JammyDodger, но нет, у меня этот компонент не установлен.

7

Интересно, есть ли какое-нибудь хитрое решение этой проблемы? Единственное, что приходит в голову, — удалить часть символов в JS?

8

Это регрессия в Discourse и не связана с темами или плагинами, исправление будет скоро!

9

Спасибо! Для справки: я полагаю, что к цветам категорий нет прямого доступа через CSS, верно?
Возможно, через JS?

10

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

Вы можете увидеть их в инспекторе браузера:

Screenshot 2023-06-07 at 12.59.26 PM
Screenshot 2023-06-07 at 12.59.26 PM256×371 17.5 KB

Таким образом, если вы знаете ID категории, вы можете получить доступ к её цвету в CSS. Самый простой способ найти ID (число) — посмотреть на URL категории, например Support https://meta.discourse.org/c/support/6. Чтобы использовать цвет категории «Поддержка», можно сделать что-то вроде этого:

.your-class-name {
  background: var(--category-6-color); 
}

Это исправление уже внесено (FIX: add category colors back to categories pages (#21977) · discourse/discourse@e43ac00 · GitHub), поэтому после обновления Discourse цвета должны вернуться.

11

Это здорово! Спасибо за это. :slight_smile:

12

Это здорово. Хотя, думаю, для решения этой проблемы единственный способ — проверить ID категории, а затем применить правильную CSS-переменную с помощью JS. Если у тебя есть другое решение, дай знать. Я с радостью напишу код и поделюсь им здесь.

13

Исправление уже внесено (FIX: add category colors back to categories pages (#21977) · discourse/discourse@e43ac00 · GitHub), поэтому после обновления Discourse цвета должны восстановиться.

14

Это было быстро!

Пока я только что нашёл обходной путь :sweat_smile:
Оставляю код ниже на всякий случай.

var categoryBoxes = document.getElementsByClassName('category-box');

for (var i = 0; i < categoryBoxes.length; i++) {
  var categoryBox = categoryBoxes[i];
var dataCategoryId = categoryBox.getAttribute('data-category-id');
categoryBox.style.border = '2px solid var(--category-' + dataCategoryId + '-color)';
}
15

Просто для перепроверки —

Есть ли способ обновиться через интерфейс фронтенда? Мне кажется, мои обновления прошли тестирование.
Или мне нужно подождать версию 3.1.0.beta5?

16

Большинство сайтов по умолчанию находятся в состоянии «тесты пройдены», поэтому вы можете обновляться в любое время через /admin/upgrade.

17

Не могу поверить, что я этого не знал. LOL

Спасибо, как всегда!

18

На моем экземпляре это всё ещё проблема в мобильной версии, на рабочем столе всё в порядке :thinking: