Can it be done with CSS? Grouping categories on category page

Разработка
13

Вы знаете пример темы, которая не работает с RTL? Если да, опубликуйте ссылку на тему здесь, и я проверю свою теорию, а затем объясню, что идёт не так после тестирования.

Редактирование: Вот объяснение проблемы:

Для CSS-файлов, входящих в основную кодовую базу Discourse, RTL-CSS создаётся путём «отражения» большинства правил CSS, зависящих от направления макета сайта. Например, padding-left преобразуется в padding-right. Это делается с помощью гема RTLcss: GitHub - discourse/rtlcss: A wrapper around the rtlcss npm package to flip CSS direction in Ruby · GitHub.

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

Когда тема используется с RTL-интерфейсом, padding-left: 8px; не преобразуется в padding-right: 8px;. Это вызывает небольшую проблему с выравниванием. Я уверен, что существуют примеры более серьёзных проблем, возникающих при использовании тем с RTL-языками.

То же самое относится к любому CSS, который вы добавляете в тему Discourse по умолчанию через редактор тем. Вот пример с использованием кода из этой темы: Can it be done with CSS? Grouping categories on category page - #4 by cosdesign.

Вот правило из этого CSS, задающее направление:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0; // это нужно изменить
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

Для RTL-локализации возникает следующая проблема:

image
image863×676 57.5 KB

Если бы это правило находилось в основном CSS-файле Discourse, left: 0; автоматически преобразовалось бы в right: 0; при выборе RTL-языка. Поскольку CSS добавляется в тему, вам нужно вручную изменить его следующим образом:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    right: 0; // изменено на правильное положение для RTL-макетов
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

image
image829×674 57.1 KB

Discourse добавляет класс rtl к тегу html, когда используется RTL-макет. Разработчики тем могли бы использовать этот класс, чтобы их темы работали как для LTR, так и для RTL-макетов. Это работает, и я думаю, что это правильно, но возможно, объявление left: auto не обязательно.

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}
/* Исправление позиционирования для RTL-макетов */
.rtl body [data-category-id="2"]::before,.rtl body [data-category-id="4"]::before {
    right: 0;
    left: auto;
}

Я не уверен, следует ли разработчикам использовать этот подход для своих тем. Это отнимает много времени и может привести к ошибкам и проблемам с обслуживанием. Возможно, Discourse могла бы компилировать некоторые темы или рассмотреть возможность предоставления версии для RTL. Возможно, стоит протестировать этот подход на нескольких из них:

require "rtlcss"

Rtlcss.flip_css("theme_css")

Это должно было быть коротким ответом :slight_smile: Если то, что я написал, верно и ещё не обсуждалось в другой теме, возможно, его стоит переместить в новую тему.