Sobreposições mal posicionadas ao envolver o Discourse

Olá :waving_hand:

Quando tento envolver todo o Discourse para habilitar barras laterais com cores diferentes, tenho um problema de posicionamento com sobreposições como o cartão de usuário, por exemplo.

O cartão de usuário deveria abrir exatamente ao lado do usuário clicado. Mas, na verdade, ele está deslocado horizontalmente exatamente pela largura das minhas barras laterais. Daí a pergunta: como o posicionamento dessas sobreposições é implementado e como posso evitar esses deslocamentos enquanto mantenho as barras laterais?

Muito obrigado :clinking_beer_mugs:

Sim, já encontrei isso ao adicionar um banner extra grande enquanto desenvolvia um plugin grande para um cliente. No meu caso, o deslocamento era completamente ridículo (estava fora da tela!)

Pode haver uma solução mais simples, mas acaba que isso é um pouco complexo e requer que você sobrescreva uma função, por exemplo, para o cartão de usuário:

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

Isso vem de um mixin, localizado aqui: discourse/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6 at b3eb67976dd0c0129736fe0b86167d7e512b51f4 · discourse/discourse · GitHub

Usei jQuery para determinar se aplicaria ou não a modificação com base na visibilidade do banner: em algumas páginas eu tinha o ‘banner’ grande, em outras não. Você pode usar uma estratégia semelhante.

Para ser honesto, seu exemplo não parece tão ruim — eu consideraria deixar como está?

O problema é que, basicamente, todos os overlays estão mal posicionados. Eu realmente não quero sobrescrever todos os métodos de posicionamento de todos os overlays que possam existir.

Parece aceitável na imagem de exemplo, já que a janela do navegador não estava em tamanho total. As laterais costumam ser maiores e, portanto, o posicionamento incorreto é pior. Alguns overlays estão quase fora da tela.

Sim, é irritante. Talvez restrinja as personalizações à Lista de Tópicos e tente deixar a visualização do Tópico o mais inalterada possível, sem criar muitas ‘variantes’, para facilitar sua vida.

Eu não personalizei nenhuma visualização específica. Quero colocar todo o fórum em um contêiner para colorir as laterais de forma diferente.

Como você está fazendo isso? Você está adicionando um novo container ao redor da div #main?

Pode ser mais fácil se você, em vez disso, adicionar uma cor de fundo ao #main-outlet e depois adicionar sua cor de fundo para os lados no body.

Sim, mais tarde eu estava pensando nisso! Então:

body {
   background-color: red;
}

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

Ainda há o problema do banner grande, mas não é tão grave.