Sysvale
Bug nas bolinhas do componente Timeline
Resumo do problema
No componente timeline, ao adicionar mais de um objeto as bolinhas ficam desalinhadas
Como mostra o print, esse desalinhamento ocorre do primeiro objeto para os posteriores.
Detalhes técnicos
- Versão do Cuida: 2.19.0
- Navegador utilizado: chrome;
- Versão do navegador: 101.0.4951.64;
Ao investigar este problema, tive algumas conclusões:
- A linha de um evento possui a seguinte estilização:
#timeline .event__row {
display: flex;
justify-content: space-between;
}
O que indica que elementos contidos na linha serão espaçados igualmente.
Como há várias linhas, qualquer mudança no tamanho em um dos campos do evento resultará no desalinhamento do pino central, isso é mais propício de acontecer no primeiro elemento event.date
Exemplos:
Possíveis soluções
- Documentar que o campo event.date sempre seguirá a regra
00/00/0000ou deverá sempre ter tamanho igual para todos os eventos. - Dar um tamanho fixo ao campo event__date. o que pode quebrar o layout caso o usuário entre com muitos dados nesse campo.
Acredito que a melhor solução vai ser fixar o tamanho do date, mas talvez alguém tenha uma ideia melhor. Fiz uns testes aqui e isso resolve, mas como Uendel falou, se entrar com muitos dados no campo de date, pode quebrar o layout.
Já a primeira sugestão de solução de Uendel acho que não é legal, porque no caso lá no previne mesmo (que utilizamos o componete da timeline no módulo de importações) nós colocamos a data no formato "08 Ago - 09:31"
