Submenus do Cabeçalho

[LeoDavidson]

Parece haver um bug agora quando o modo Fixo (sempre mostrar o menu, mesmo ao rolar para baixo) é ativado.

Estou vendo isso com o Discourse 2.9.0.beta8, e também reproduzi facilmente usando o site de pré-visualização do tema oficial do Discourse. Acho que notei pela primeira vez há cerca de 2 semanas, mas não tenho certeza absoluta de quando começou a acontecer.

Para reproduzir:

• Ative o modo Fixo nas configurações do componente do tema.
• Clique em um tópico com muitas respostas.
• (Se for a primeira vez que você lê o tópico e está no topo, role para baixo algumas respostas, volte para a lista de tópicos e clique no tópico novamente, para ser levado de volta à postagem em que estava.)

A quantidade de preenchimento necessária na parte superior da página é calculada incorretamente, resultando no topo da postagem e no nome de quem a escreveu sendo rolado sob o cabeçalho e cortado.

Você tem que rolar um pouco para cima toda vez que clica em um tópico, apenas para ver de quem está lendo a postagem.

Você vê isso ao entrar no tópico:

Quando você deveria ver algo assim:

O que é realmente estranho é que nem sempre acontece, e pressionar Ctrl-F5 geralmente o corrige. Mas ele acontecerá novamente um pouco mais tarde.

Editar o CSS para aumentar a quantidade de preenchimento que ele adiciona ao main-outlet meio que corrige as coisas, mas então você obtém muito espaço em branco na parte superior das listas de tópicos. Parece que as listas de tópicos e os tópicos precisam de preenchimento diferente, ou talvez um deles esteja adicionando o preenchimento duas vezes ou algum preenchimento extra de outro lugar?

(Editar: Às vezes, a página não pode rolar para cima o suficiente para ver o problema. Por exemplo, quando você vai para a última postagem em um tópico e ela é curta, não há como o cabeçalho sobrepor o nome do autor lá, mesmo que você role para baixo o máximo que puder manualmente. Isso pode explicar algumas situações em que as coisas parecem funcionar. Teste com uma janela do navegador que não seja muito alta para a maneira mais confiável de reproduzir o bug.)

[Tris20 (Tristan)]

Existe alguma maneira de impedir que isso apareça na tela de login? Eu consigo fazer isso com o seguinte CSS, mas isso ainda apresenta o submenu do cabeçalho por um segundo e depois o oculta.

.static-login .top-menu {
	display: none;
}
.static-login .d-header-wrap {
	display: none;
}

Existe uma maneira melhor de impedir que isso apareça durante a página static-login?

[awesomerobot (Kris)]

Este e outros temas não funcionarão na visualização do rastreador; a visualização do rastreador não carrega a maior parte do JavaScript do Discourse.

[davidkingham]

Olá Kris, este componente poderia ser atualizado para uso com o chat e a barra lateral. Com a configuração fixed_mode ativada, o chat e a barra lateral não são movidos para baixo e ficam atrás do d-header.

O CSS abaixo parece corrigir as coisas de forma agradável, exceto que não funciona bem com Category Banners, pois parece estar empurrando o #main-outlet para baixo em mais 40px nas páginas de categoria. Obrigado!

.sidebar-wrapper, .main-chat-outlet, .chat-drawer {
    margin-top: 40px !important;
}

[awesomerobot (Kris)]

Obrigado por apontar isso! Acabei de adicionar algumas correções aqui:

UX: update fixed styling for sidebar & chat

[davidkingham]

Incrível, obrigado Kris! Alguma ideia de por que o #main-outlet está caindo 40px?

#main-outlet {
   padding-top: calc(1.8em + 40px);
}

[awesomerobot (Kris)]

Ah, eu não tinha visto isso — isso pode ser removido e será assim que este PR for mesclado: UX: remove old main-outlet adjustment by awesomerobot · Pull Request #19 · discourse/discourse-header-submenus · GitHub

Atualização: isso agora foi mesclado, então o espaço extra desaparecerá se você atualizar o componente.

[P2W (Mike Riddick)]

Onde um cara encontra os nomes dos ícones?

[awesomerobot (Kris)]

Acredito que tudo o que está listado aqui está disponível para uso: Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome

Embora alguns ícones exijam uma etapa adicional… para ícones que não usamos no Discourse por padrão, os nomes dos ícones precisam ser adicionados à configuração de tema Ícones SVG.

Se você realmente quiser ser específico, todos os ícones que usamos no Discourse por padrão estão listados aqui: discourse/lib/svg_sprite.rb at da0d20d4a99aab40bd08bf133a425be413521d5a · discourse/discourse · GitHub

E todos os ícones disponíveis para uso em temas (através da configuração ícones SVG) estão neste diretório: discourse/vendor/assets/svg-icons at main · discourse/discourse · GitHub

Visualizar os arquivos SVG no GitHub não é muito útil, porque você verá uma grande caixa branca:

mas você pode clicar no botão “raw” e visualizar o código-fonte da página, o nome do ícone é o id do symbol

[P2W (Mike Riddick)]

Você arrasa, muito obrigado

[davidkingham]

Obrigado Kris, isso resolveu. No entanto, notei alguns outros problemas. .topic-navigation precisa ser empurrado para baixo 40px, e .topic-post.sticky-avatar .topic-avatar parece ser calculado incorretamente ao rolar para baixo, e acaba atrás do cabeçalho d-header. Além disso, é possível expandir o compositor e a janela de chat muito alto e perder os controles atrás do cabeçalho d-header também. Acho que isso cobre tudo!

Editar: mais uma coisa, quando você visita um link de âncora, o título também fica sob o cabeçalho.

[satonotdead]

Alguém descobriu isso? Gosto da abordagem de não usar espaço adicional e reutilizar os recursos já na tela.

É muito legal que pairar o mouse sobre o logotipo permite navegar para o blog, docs ou wiki!

[alxndr (Alexander)]

Para que conste, a “configuração do tema de ícones svg” mencionada por Kris pode ser encontrada em Admin > Configurações > Outros > na parte inferior há svg icon subset (…acho que está correto??)

[davidkingham]

Há um pequeno problema de z-index com a nova lightbox Glimmer, 1001 a coloca acima da lightbox porque a lightbox está em 1000.

[awesomerobot (Kris)]

Problema clássico de z-index, será corrigido na próxima atualização do Discourse

UX: increase experimental lightbox z-index

[clement]

Obrigado por este bom plugin.

Gostaria de saber se há alguma forma de não exibir os submenus do cabeçalho quando não estiver logado?

Ou, (como ideia de desenvolvimento?) talvez melhor, que tal ter itens de menu exibidos vinculados a grupos (níveis de confiança ou outros)?
É fácil pedir, eu sei…

Obrigado
C.

[Kieran_Berryman]

Não acho que isso esteja em nenhum outro lugar, desculpas se estiver. Eu adoro usar submenus de cabeçalho, mas tenho muitos cabeçalhos superiores e, como resultado, fica muito ruim no celular. Eu gostaria que meus cabeçalhos não saíssem da tela e me obrigassem a rolar. Isso é possível?

[Kieran_Berryman]

Ok, eu meio que resolvi meu problema apenas compilando a maioria dos links importantes como submenus em um cabeçalho superior “Navegacional” no celular.