[VALIDAÇÃO] ESTILOS E RESPONSIVIDADE

daphnemartinsba commented 2 months ago

[ ] Revisar os estilos de todas as páginas
[ ] Revisar a responsividade, mobile e tablet de todas as páginas
Retornos devem ser ajustados e anotados aqui na issue

barbaburns commented 2 months ago

A home não esta pixel perfect. Muitos espaçamentos, embora proximos do figma, não estão exatos.

Editei pelo painel o Titulo "Projetos" de 3rem para 4rem em font-size e acrescentei um margin-top;
adicionei os icones das 4 abas, tb pelo painel;
adicionei margin-botom ao botão "Mais Projetos", pelo painel;
adicionei margin-top ao titulo "Opinião";
ajuste de bordas e padding dos botoes pelo arquivo overides/button.scss;
ajuste para esconder o excerpt dos post-grid-blocks no arquivo blocks/posts-grid/style.scss;

barbaburns commented 2 months ago

Pagina Sobre:

ajuste de margem em mobile;

Pagina Governança:

ajustes de Titulos pelo painel;

barbaburns commented 2 months ago

Pagina Indicadores:

ajuste de padding entre os tabs, pelo painel;

Pagina Guias tematicos:

ajuste de margin-top em objects/post-content.scss

Paginas Iniciativas, Posicionamentos Institucionais, Publicações, Opinião e Noticias:

Os tabs estão sem os icones correspondentes. Daria pra trazer os icones para dentro do tema e adiciona-los via css.

marina-hacklab commented 2 months ago

HOME mobile:

Título "AGENDA" alinhado à esquerda no mobile. Layout prevê ele centralizado.

Esse ajuste exige código para ser feito pois o layout do desktop tem alinhamento à esquerda e o do mobile ao centro para o mesmo bloco. Uma opção é ter dois blocos iguais com a diferença somente no alinhamento e que apareçam somente nas resoluções adequadas.

Quebra de linha no título "Projetos" na resolução de 360px:

No figma, com 360px de largura:

Isso está acontecendo pq as margens laterais estão maiores do que no layout, o grid todo está mais estreito

Título "AGENDA" alinhado à esquerda no mobile. Layout prevê ele centralizado.

Esse ajuste exige código para ser feito pois o layout do desktop tem alinhamento à esquerda e o do mobile ao centro para o mesmo bloco. Uma opção é ter dois blocos iguais com a diferença somente no alinhamento e que apareçam somente nas resoluções adequadas.

Na seção dos indicadores ethos a ordem dos elementos está invertida:

Do figma:

A ordem está assim no mobile por causa da forma que as colunas se comportam por padrão no WP. Como no desktop a imagem está mais à direita, no mobile ela vai necessariamente estar abaixo dos outros elementos.

Uma opção é ter dois blocos iguais com a diferença somente na ordem dos elementos e dimensão da imagem, e que apareçam somente nas resoluções adequadas.

Sem o rodapé da hacklab

Está sem o rodapé também no desktop

marina-hacklab commented 2 months ago

Página instituto ETHOS mobile: https://www.ethos.org.br/instituto-ethos/

Botões com quebra de linha:

Do figma:

Razões possíveis para essa quebra são as margens laterais da página maiores do que no layout, as margens internas do botão e a diferença de estilo de texto do botão (no layout está em caixa alta e com outra fonte/fontweight).

marina-hacklab commented 2 months ago

Página Equipe/Governança mobile: https://www.ethos.org.br/equipe/

Bloco de avatar variando de formato no mobile:
Título das colunas na aba Participação Social com quebra de linha:

Esse ajuste exige código para ser feito pois o layout do desktop tem diferenças consideráveis em relação ao mobile. Não foi poissível se aproximar dos dois layouts usando os mesmos blocos para ambos.

Uma opção é ter um bloco de título adequado ao mobile acima das duas colunas e os títulos que já existem para cada coluna no desktop. A solução ideal é rever toda a distribuição das colunas, que estão adequadas no painel para o desktop.

marina-hacklab commented 2 months ago

Página Contato:

Desktop:

Alinhamento da caixa do reCaptcha no formulário:

Mobile:

Alimento dos elementos abaixo da caixa da mensagem:

Apesar de estar praticamente correspondendo ao layout, todos os elementos que não estavam previstos no layout juntos estão parecendo bagunçados. Sugestão: aumentar o espaçamento superior da caixa do reCaptcha, avaliar a opção de centralizar o botão de Enviar.

marina-hacklab commented 2 months ago

Single Evento: https://www.ethos.org.br/evento/conferencia-ethos-360-sao-paulo-2024/

Mobile: