Header: ícone de busca e organização do header.php

[claromes]

Issue: #49 Ajustes:

• Deixei a busca pelo header sem botão, somente "Enter"
• Inseri os créditos dos SVG dentro de cada arquivo SVG
• Organizei um pouco o código do header
• Ajustei o header para o centro em telas menores que 400px
• Coloquei o Mapa do manual dentro do menu de usuário

Resultado final:

[rghedin]

Ficou excelente, @claromes!

Dois detalhes:

1. Acho que o mapa do site poderia estar mais para cima no menu, logo depois da divisória (entre a linha divisória e o item PC do Manual). É um item importante para ficar lá embaixo.
2. Seria legal padronizar o visual do campo de busca em outras partes do site com o do cabeçalho. (Ele aparece nos resultados da pesquisa e no mapa do site. Acho que só retirar a lupa azul dentro do campo de texto, ou então colocar ela do lado de fora, como se fosse um botão, mas com visual igual ao do ícone do cabeçalho.

[rghedin]

Ah, outra coisa: vi que o searchHeader.js é bem pequenininho, só 14 linhas sem minificar. Não seria o caso de puxá-lo inline no rodapé, em vez de chamar um arquivo *.js?

[rghedin]

Mais um detalhe que acho que melhora a usabilidade no mobile: quando o usuário tocar no ícone da lupa, incluir o atributo autofocus no <input> da pesquisa. Aí o teclado já sobe automaticamente, eliminando a necessidade de tocar no campo de texto para começar a digitar.

[claromes]

Fiz os ajustes e mais alguns. Também coloquei opacidade no ícone da lupa, como no Menu do Usuário. Além de alt e title que estavam faltando.

O arquivo do js serve mais para o desenvolvimento, pois a minificação é automática. E tbm organizando o código. Eu inseri mais algumas coisas. Veja se ainda vale ser inline.

[rghedin]

Ficou massa! O autofocus não está funcionando, embora o código esteja certinho. Não sei se é alguma limitação pelo tipo de chamada/JavaScript… se não rolar mesmo, talvez seja melhor tirá-lo.

Sobre o js, pensei em colocá-lo inline para reduzir as requisições ao carregar a página. Não sei até que ponto isso faz diferença na prática, mas tenho comigo que é melhor carregar esses códigos curtinhos no próprio HTML da página em vez de separá-los em arquivos próprios. Faz sentido?

[claromes]

Faz sentido porque diminui o número de solicitações. Testei o autofocus no celular e está funcionando. Vou ajustar o arquivo JS.

[rghedin]

Liguei meu Android de testes e está funcionando mesmo, tanto no Firefox quanto no Chrome (Cromite). Só no Safari do iOS que não 🥲 Mantemos o autofocus, então.

[claromes]

Eu pensei no caso de JS desativado e reescrevi a busca no header com CSS puro haha. Daí só deixei o JS inline para fazer o autofocus.

[rghedin]

Agora deu bom no Safari, @claromes!

[claromes]

Beleza. É só finalizar a revisão e daí faço o release.