Closed daphnemartinsba closed 1 month ago
A home não esta pixel perfect. Muitos espaçamentos, embora proximos do figma, não estão exatos.
Pagina Sobre:
Pagina Governança:
Pagina Indicadores:
Pagina Guias tematicos:
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.
HOME mobile:
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.
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
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.
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.
Está sem o rodapé também no desktop
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).
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.
Página Contato:
Desktop:
Mobile:
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.
Single Evento: https://www.ethos.org.br/evento/conferencia-ethos-360-sao-paulo-2024/
Mobile:
Página Indicadores Ethos:
No layout:
Mobile:
Não há barra de rolagem para acessar os Docs de apoio.
Fonte dos números nas listas numeradas não corresponde à do layout.
Exemplo na página https://www.ethos.org.br/instituto-ethos/
Todas as modificações foram atualizadas no dev.ethos.org.br
[ ] 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