Наложения смещены при обёртывании Discourse

Разработка
1

Привет :waving_hand:

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

17
171113×780 58.9 KB

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

Спасибо большое :clinking_beer_mugs:

2

Да, я сталкивался с этим при добавлении очень большого баннера во время разработки крупного плагина для клиента. В моём случае смещение было совершенно нелепым (оно выходило за пределы экрана!)

Возможно, есть более простое решение, но, как оказалось, это довольно сложная задача, требующая переопределения функции, например, для карточки пользователя:

          api.modifyClass('component:user-card-contents',  {
            _positionCard(target) {

Это берётся из миксина, который находится здесь: discourse/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6 at b3eb67976dd0c0129736fe0b86167d7e512b51f4 · discourse/discourse · GitHub

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

Честно говоря, ваш пример выглядит не так уж плохо — может, стоит оставить как есть?

3

Проблема в том, что по сути все оверлеи расположены неверно. Я не хочу переопределять все методы позиционирования для всех возможных оверлеев.

На примере это выглядит приемлемо, так как окно браузера не было развернуто на весь экран. Обычно боковые отступы больше, поэтому смещение ещё заметнее. Некоторые оверлеи почти вылезли за пределы экрана.

4

Да, это раздражает. Возможно, стоит ограничить настройки списком тем и по возможности не трогать просмотр тем, а также не делать слишком много «вариантов», чтобы упростить себе жизнь.

5

Я не настраивал никакой конкретный вид. Я хочу поместить весь форум в контейнер, чтобы по-разному окрасить боковые части.

6

Как вы это делаете? Вы добавляете новый контейнер вокруг div #main?

Возможно, будет проще, если вы вместо этого добавите цвет фона к #main-outlet, а затем зададите цвет фона для боковых сторон на body.

7

Да, потом я так и подумал! Итак:

body {
   background-color: red;
}

#main-outlet {
    background-color: white;
}

Всё ещё остаётся проблема с массивным баннером, но это не так уж и важно.