Entrar Ainda não tem acesso?
3
respostas

[Dúvida] Barra de progresso mobile

Referente ao curso CSS: construindo layouts com Grid

por Wellington Fernandes Barbosa
| 156.9k xp | 9 posts
Garçom

Estou enfrentando dificuldades para finalizar o layout do player de podcast na versão mobile. O problema está relacionado à barra de progresso de reprodução do podcast, que faz parte da estrutura HTML do botão do player. Não consigo alinhar essa barra abaixo da descrição do podcast e do botão de reprodução, já que ela está integrada à estrutura do botão. Caso fosse para implementar o controle de volume, funcionaria, porque ele pertence a uma estrutura separada.

Na versão desktop, consegui finalizar o layout, mas na versão mobile esse problema persiste. Estou utilizando display: grid na seção do player, que organiza a descrição, os botões de reprodução e o controle de volume. Porém, não consigo capturar ou manipular adequadamente a barra de progresso, que é filha da div de botões.

Acredito que, caso o player fosse reestruturado com seções separadas para a descrição, os botões, o volume e a barra de progresso, isso resolveria o problema. Desde o início, poderia implementar o display: grid já organizando esses elementos na interface. No entanto, como a barra de progresso está dentro da div dos botões, isso gera essa dificuldade. Ainda assim, não gostaria de alterar o HTML para conseguir concluir esse exercício.

3 respostas
por Mike de Sousa
| 895.4k xp | 1479 posts
Alura Scuba Team Suporte Educacional

Olá, Wellington, como vai?

Para poder te ajudar melhor, você poderia me fornecer o código do seu projeto? Se puder, envie pelo GitHub, assim consigo ter acesso a todo o projeto e te ajudar de forma mais precisa.

Fico no aguardo e à disposição
por Wellington Fernandes Barbosa
| 156.9k xp | 9 posts
Garçom

Esse é o meu repositório, não alterei o html do player, mas acredo que para resolver esse dasafio seja necessário. A versão desktop está boa, mas a versão mobile está incompleta. https://github.com/wellingtonfernandesbarbosa/WaveCast

Agradeço pela ajuda.

por Mike de Sousa
| 895.4k xp | 1479 posts
Alura Scuba Team Suporte Educacional

Oi, Wellington.

Uma solução simples seria usar o position para poder posicionar o botão de play dentro do elemento pai. Eu fiz um exemplo onde eu ocultei todos os elementos que não estavam presentes no modelo do figma, apliquei um flex-direction para poder colocar a barra abaixo da capinha e o position para deixar o botão no lado direito:

demonstrando o resultado conforme a descrição mencionada acima

O código fica da seguinte forma, usei a media query de 789px, mas você pode ajustar conforme achar melhor. A class .mobile__play deve ser posta na tag img referente ao botão play:

@media screen and (max-width: 789px) {
  .secao-player .player_volume {
    display: none;
  }

  .secao-player {
    position: relative;
    padding: 1rem 0;
  }

  .player_descricao {
    margin-left: 2rem;
    align-self: flex-start;
  }

  .player_temporizador {
    width: 100%;
  }

  .player_temporizador span {
    display: none;
  }

  .player_temporizador img {
    display: none;
  }

  .secao-player {
    flex-direction: column;
  }

  .player_temporizador .mobile__play {
    display: block;
    position:absolute;
    right: 25px;
    top: 40px;
  }
}

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado