Componente de tema de submenus do cabeçalho empurra a parte inferior da barra lateral para fora da tela

Experiência do Usuário
1

Quando o componente de tema header submenus está ativo, os ícones na parte inferior da barra lateral desaparecem da tela.

https://cdn.screencast.com/uploads/g000302MBEXFEjy4eyPzZN1QY9lUH/LWR_Recording.mp4?sv=2021-08-06&st=2023-05-18T04:17:29Z&se=2023-05-19T04:17:29Z&sr=b&sp=r&sig=7+95Shu88XVl4t3jX+P9p8cxStR+2WKs4CSyK/zvaZc=

Provavelmente há algum tipo de cálculo CSS indo na direção errada?

4 curtidas
2

Cabeçalhos personalizados não são incluídos no cálculo, isso pode ser reproduzido adicionando qualquer conteúdo à seção header de um tema.

O cálculo que usamos para a barra lateral e o chat leva em consideração a altura do cabeçalho do Discourse e define --header-offset como uma variável ao calcular algumas alturas.

Incluir cabeçalhos personalizados pode ser um pouco complicado porque o conteúdo do cabeçalho personalizado não fica fixo na rolagem por padrão, como o cabeçalho do Discourse… então, se o incluirmos no cálculo por padrão, assim que você rolar e o cabeçalho personalizado desaparecer, a altura ficará incorreta.

Então, por exemplo, se eu aumentar manualmente --header-offset pela altura do meu cabeçalho personalizado (é aproximadamente 60px por padrão), você terá uma lacuna acima da barra lateral na rolagem:

Adicionamos uma classe .docked ao body quando um cabeçalho personalizado sai de vista, então é possível usá-lo… o que é melhor, mas há uma transição perceptível enquanto a altura da barra lateral se ajusta entre os estados… isso ocorre porque .docked está ativado ou desativado.

Se você quiser um cabeçalho fixo, isso é um pouco mais fácil de contornar… porque você pode aumentar --header-offset pela altura do cabeçalho personalizado e, em seguida, definir o valor top de .d-header-wrap como a altura do cabeçalho personalizado:

Uma solução que vem à mente para melhorar o caso do cabeçalho não fixo é:

  1. Verificar a altura do cabeçalho personalizado
  2. Incluir a altura do cabeçalho personalizado em --header-offset
  3. Decrementar a altura do cabeçalho personalizado usada no cálculo de --header-offset com base na posição de rolagem. Isso ajustará a altura da barra lateral mais gradualmente do que a classe .docked pode fazer.

Pode levar alguma experimentação para acertar…

5 curtidas
3

Isso é muito útil, obrigado @awesomerobot

(movido para UX)

4 curtidas
4

Isso foi implementado aqui (muito obrigado a @david):

Isso deve resolver problemas com a barra lateral, chat e outros conteúdos do cabeçalho personalizado.

4 curtidas