[Home] - Responsividade da Home
katsumidev opened this issue · comments
US Relacionada - SouJunior/products#282
Descrição:
Essa task tem como objetivo implementar a responsividade da página principal (Home), Essa responsividade visa garantir uma experiência de usuário consistente e de qualidade em diferentes dispositivos e tamanhos de tela.
Subtasks
- Adaptação do header para a versão mobile, no modelo de um menu hamburguer que quando clicado abrirá um menu com as opções do header.
- Aplicar os ajustes necessários para que os elementos sejam redimensionados, reorganizados ou reestilizados adequadamente, garantindo a usabilidade e a legibilidade.
- Testar a página em diferentes tamanhos de tela, visando garantir que não há nenhuma incompatibilidade em nenhum dispositivo
- Fazer ajustes adicionais, se necessário, para garantir uma experiência de usuário suave e consistente em todas as resoluções de tela.
Critérios de aceitação
- Os elementos da página home devem ser ajustados de forma responsiva, de acordo com os diferentes tamanhos de tela.
- Os elementos são redimensionados, reorganizados ou reestilizados de forma apropriada para garantir a legibilidade e a usabilidade em dispositivos móveis e outros tamanhos de tela.
- As página home deve ser testada em diferentes dispositivos e tamanhos de tela para verificar se a responsividade está corretamente implementada.
- A responsividade é verificada em diferentes orientações de tela, como retrato e paisagem, garantindo uma experiência consistente em todas as situações.
- A implementação segue as diretrizes de design responsivo definidas para o aplicativo.
@mooncoded , você consegue colocar a URL desta Task aqui para que o Paulo possa realizar os testes?
Segue o link 👉 https://vagas-front-end.netlify.app/
@Paru369 , você conseguiria avaliar essa Task, por favor?
Olá colega tudo joia! Cara estou querendo contribuir com algns projetos
Como posso ajudá-lo?
Realizei testes exploratórios, testei a responsividade em celulares(357 x 668) e maiores.
Testei a responsividade em tablets. Testado em orientações de restrato e paisagem.
Esta tudo ok, só estou aguardando ter acesso ao figma para dar uma olhada no layout e implementação, mas em relação aos itens que estão renderizados não houve nenhuma quebra.
Nas telas em mobile, os itens do menu estão sem ação, mas creio que também não fazem parte dessa entrega.
A pagina de busca de vagas retorna alguns erros 400 mas creio que esta mocada e não faz parte desta entrega.
@FilipeLeoni Solicitei acesso novamente. Não consigo ver.
Vou liberar a feature pois os critérios de aceitação apenas citam a responsidade.
Quando formos ter homologação de UI dou uma nova olhada.
Me passa seu email que eu falo com o pessoal de ux para te dar o acesso
@Paru369
Me passa seu email que eu falo com o pessoal de ux para te dar o acesso
Me passa seu email que eu falo com o pessoal de ux para te dar o acesso
Acredito que agora está liberado
Só uns detalhes em relação ao menu e footer da versão mobile.
Menu:
https://jam.dev/c/1c32d2dd-db2a-45f4-92c1-8fd62fb0af9d
Footer:
https://jam.dev/c/30816a6d-d183-4286-a561-e6bba8efd468
@caiquefonseca eu tinha avançado a task(voltei com ela), vê com o time se vão tratar como bug, rework, ou se fica em testing ate o ajuste.
@mooncoded , consegue fazer os ajustes e sinalizar pra gente quando terminar?
Claro, vou dar uma olhada!
Pronto, mandei o PR com as mudanças requisitadas @caiquefonseca @Paru369
Obrigado, @mooncoded . Quando aprovarem o PR é só marcar o Paru aqui.
@mooncoded , você tá precisando de ajuda com alguma coisa nessa Task?
@Paru369 @caiquefonseca Já aprovaram o PR, tinha esquecido de marcar aqui
Apontamento 1 - onde está escrito "feed de vagas" deve constar a foto do perfil da pessoa em formato redondo.
Apontamento 2 - tem uma seta no meio do nome da SouJunior, a seta tem que ser retirada.
Apontamento 3 - O nome da SouJunior deve estar centralizado e faltou aparecer uma imagem com 3 barrinhas no canto esquerdo superior que representaria o botão das opções.
Apontamento 4 - no tamanho do quadrado azul, ele não está preenchendo os espaços nas laterais por completo e as margens estão brancas, o certo é ele preencher por completo os espaços nas laterais.
Apontamento 5 - possui um campo de "quando postada" esse campo não tem na US.
@mooncoded , você revisar estes itens indicados pela Beatriz, por favor?
@mooncoded , por favor, atualiza a gente aqui sobre esta task.
@caiquefonseca @BeatrizFFranco Só esperando o PR ser aprovado, esses erros pareciam não existir, pois acredito que a Beatriz estava visualizando um deploy antigo, o headero filipe me disse que era provisório, mas em todo caso já alterei de modo que acredito estar correto
esse deploy já contem a versão atualizada 👉 deploy-preview-226--vagas-front-end.netlify.app/
Boa noite, o PR já foi aprovado para realizarmos os testes? Estou com uma Task onde os erros apontados pela Beatriz sobre a responsividade do feed de vagas precisa ser testado.
Já foi aprovado, @FernandoMiguelS . Na última sexta-feira.
A responsividade está incluída na V1 da Home, aguardando aprovação da PR para liberação para teste.
Boa noite, testes realizados, onde foram encontradas diversas inconsistências. Necessitando ajustes.
Ajustes realizados por @herculesmachado de acordo a solicitação de @FernandoMiguelS . Aguardando novos testes.
@Kaleber-chaves , você consegue fazer os testes dessa US seguindo o mesmo padrão do que fizemos com a US Home?
Descrição: Verificar a responsividade da página principal (Home)
Subtasks:
- Os elementos da página home devem ser ajustados de forma responsiva, de acordo com os diferentes tamanhos de tela.
- Os elementos são redimensionados, reorganizados ou reestilizados de forma apropriada para garantir a legibilidade e a usabilidade em dispositivos móveis e outros tamanhos de tela.
- As página home deve ser testada em diferentes dispositivos e tamanhos de tela para verificar se a responsividade está corretamente implementada.
- A responsividade é verificada em diferentes orientações de tela, como retrato e paisagem, garantindo uma experiência consistente em todas as situações.
- A implementação segue as diretrizes de design responsivo definidas para o aplicativo.
TF01 - Verificar se a pagina se ajusta de forma responsiva de acordo com diferentes tamanhos de teste:
Status: Não Passou
Evidencias:
teste vocacional quebra quando diminui o tamanho da tela, impossibilitando a leitura.
Vamos junto nessa jornada, os textos do lado esquerdo é quebrado.
TF02 - Testar em diferentes dispositivos e tamanhos, teste modo retrato e paisagem.
Status: Não Passou
Evidencias:
Resultado: Tanto no navegador com tamanho reduzido ou modo dispositivo e com tamanho personalizados a pagina não ficou completamente responsiva.
- Na versao mobile com a resoluçao 320x675 o icone da logo desaparece.
- Mais abaixo da pagina secao ''Vamos junstos nesta joarnada" responsivida ficou ok, porem um pouco mais abaixo quebrou um detalhe no retangulo em volta dos depoimentos.
Em outros modelos de dispositivos moveis, apresentou alguns erros de responsividade na parte como mostra abaixo:
usei como exemplo o iphone xr.
segue link com análise dos testes realizados, esta demanda foi reprovado parcialmente pois há alguns ajustes que precisam ser realizados conforme demonstrados no arquivo no link: