Padrão #59
openLayout Rins
0%
Description
Reorganizar o layout de rins foi um grande desafio 😅
Dediquei mais tempo que a média para esse módulo pq ele tem e exigiu algumas particularidades.
Para detalhar a reorganização do layout, vou dividir o módulo por colunas para explicar o que foi feito em cada uma delas.
1º coluna:
- Medidas renais: Reaproveitei os campos, porém demandou um certo tempo para alinhar a linha de cima com a de baixo e centralizar os itens na grid que fiz.
Só para nível de curiosidade, a página web é feita de linhas e colunas. Se quisermos que mais de um elemento fique na mesma linha utilizamos display flex com um espaço padrão que determinamos para todos os elementos (gap) ou utilizamos o display grid que divide aquela linha em colunas. Normalmente ao utilizar o display grid, precisamos estilizar os elementos de cada coluna para determinar se eles vão ficar no centro, à esquerda, à direita, em cima ou embaixo. O padrão é que eles venham em cima e à esquerda.
Vi no seu layout no figma que os elementos "RD" e "RE" estavam entre linhas. Ele não estava alinhado com a linha de medidas renais e também não tinha uma linha própria abaixo desse campo (eu tentei dessas duas formas e vi que o jeito que colocou no figma realmente era o melhor). Para conseguir resolver esse problema utilizei uma margem negativa que "puxou" os elementos para cima e fez com que eles ficassem exatamente no lugar desejado.
- Nefropatia parenquimatosa: O desafio aqui foi que ao mudar o label "RD" e "RE" para "rim direito" e "rim esquerdo" precisei aumentar o comprimento da coluna inteira e diminuir o tamanho das outras. Como as colunas são dependentes umas das outras precisei encontrar um valor padrao que não prejudicasse nenhuma delas.
*Caixas menores no geral: O rim tendo uma estrutura mais antiga, utilizava um ng-transclude-slot para cada grupo de campos como geral, nefropatia parenquimatosa, cirurgias prévias etc. Para utilizar esse parâmetro precisamos lidar com a interação continua do arquivo html com o arquivo Js, isso torna a manipulação de campos mais difícil e reduz a capacidade de fazer alterações frequentes. Os novos exames estão sendo construídos de forma diferente para não termos mais esse problema. Utilizamos esse parâmetro, mas apenas um por exame, não mais um por grupo.
Nas caixas menores especificamente precisei fazer uma nova diretiva para o rim, pois a estrutura antiga dele que utilizava vários ng-transclude-slot não permitia que eu fizesse essa divisão de caixas novas. No exame antigo a estrutura só ia até nódulo, então adicionar os campos "dispositivos", "inflam/infeccioso" e "alterações perirrenais" exigiu fazer uma volta enorme até que eu conseguisse colocá-las daquela maneira. Depois de resolver esse problemas, repliquei também a função das tags dinâmicas que antes só estava presente no fígado.
2º coluna:
- Cistos: foi bem mais tranquilo, apenas reposicionei alguns campos, alterei as opções de select e coloquei esse background cinza em rim direito e rim esquerdo.
- Dilatação dos Sistemas Coletores: Alterei poucas coisas e coloquei o background cinza em direito e esquerdo.
3º coluna:
- Cálculos não obstrutivos: Tirei alguns espaçamentos que estavam fazendo a linha quebrar e diminui ao máximo o tamanho dos selects, mesmo assim acho que está bem apertado e se eu diminuir um pouquinho a tela acaba quebrando a linha... Além disso, tive um problema para colocar os números padrão desses campos pq estava dando um erro de parse e tive que debugar para encontrar a solução, precisei pedir ajuda para o Jean e ficamos algumas horas tentando resolver o problema, mas por fim encontramos o erro.
Popovers
- Além das colunas, também editei os popovers existentes e criei os que ainda faltavam.
Selects
- Alterei as opções dos selects e deixei padrão como os do figma.
Campos numéricos pré-preenchidos
- Coloquei os números padrão em todos os campos numéricos
Em resumo foi isso, agora o pior já passou kkkk Se precisar de alguma edição é só falar
Files
