search

bibliomar / bibliomar-client

The front-end client for Bibliomar: A complete reading suite built for educational purposes.
https://www.bibliomar.site
MIT License
12 stars 3 forks source link

Escala de imagens incorreta em alguns dispositivos #3

Closed Lamarcke closed 2 years ago

Lamarcke commented 2 years ago

Problema: Atualmente, principalmente em celulares e dispositivos 16:10, a escala de tela dos livros pode ficar estranha.

Estudando esse problema, verifiquei que poderia existir uma solução usando flexbox, definindo uma altura fixa no container parent e definindo flex-grow: 1 nas partes relevantes. Acabou que depois de alguns testes isso de fato funcionou, mas falta testar em dispositivos reais para confirmar.

Agora, todos as imagens de dentro das figures (que compoem a capa e a pequena descrição dos livros em todas as partes do site) possuem uma altura fixa, e o conteudo escala baseado nessa altura especifica (dando prioridade para a descrição acima da imagem de capa)

Essa é a estrutura simplificada:

<figure className="figure d-flex flex-column">
  <figcaption className="figure-caption flex-grow-1">
</figure>

Esse issue também ajudou a resolver o problema onde os items que possuiam tamanho de titulo diferente ficavam desalinhados com o resto do site.

Vou mantê-lo aberto até realizar mais testes, e qualquer sugestão de mudança é bem vinda.