Input labels

[gprado-justworks]

rodei o projeto local e ele ta com um Bug de que enquanto o background do pokemon dentro do modal ainda nao carregou ele fica mostrando o pokemon fora da tela quase:

Solucao: Colocar um loading ao abrir o modal e so mostrar o conteudo quando a imagem de fundo for totalmente carregada pela request. De prefencia um skeleton ia ficar top

[gprado-justworks]

Em telas 24 filtrando alguns pokemons o conteudo fica muito espacado verticalmente:

O problema ai eh que ta setando a altura da div com 100vh. Nesse caso, nao precisa limitar essa div, pode tirar o scroll dela e deixar o scroll com o componente pai.

Remover o scroll: hidden do body tambem! E dpois o Header vai bugar, ai corrigir a estrutura do Header

[ashcrysis]

ajustei aqui o scroll como você disse, mas o que exatamente seria corrigir a estrutura do header @gprado-justworks ?

[ashcrysis]

Fiz desse jeito, vou verificar aqui o Skeleton se tá tudo okay mesmo, vê se tá legal

[gprado-justworks]

ajustei aqui o scroll como você disse, mas o que exatamente seria corrigir a estrutura do header @gprado-justworks ?

deixar o header uma unica "Peça", colocar ele pra seguir o scroll sem quebrar a tela

[gprado-justworks]

Skeleton funcionou, mas bugou com o Header:

[ashcrysis]

Skeleton funcionou, mas bugou com o Header:

Acabei de subir um commit corrigindo isso kkkkkkk[](url)

[ashcrysis]

minha msg bugou todinha, mas baixa o commit e vê se resolveu

[gprado-justworks]

minha msg bugou todinha, mas baixa o commit e vê se resolveu

Resolvido!

[gprado-justworks]

Vamos melhorar o Skeleton pra ele representar a estrutura do conteudo interno e usar a propriedade Active dele pra ter animacao

Tipo:

Titulo

mensagem
teste

outra mensagem

o skeleton seria:

======

=================
==============

=========

No caso do modal, usa o skeleton de imagens!

https://ant.design/components/skeleton

[gprado-justworks]

Vamos melhorar o Skeleton pra ele representar a estrutura do conteudo interno e usar a propriedade Active dele pra ter animacao

Tipo:

Titulo

mensagem
teste

outra mensagem

o skeleton seria:

======

=================
==============

=========

No caso do modal, usa o skeleton de imagens!

https://ant.design/components/skeleton

https://ant.design/components/skeleton#:~:text=Display%20active%20animation.-,Active,-Button%20and%20Input

[gprado-justworks]

Tem um espaco a direita extra nao sendo usado:

[gprado-justworks]

Pra preencher toda a tela, defina quantos cards ficaram por linha e divida por 100%

Exemplo: width: calc((100%/5) - 42px)

[gprado-justworks]

Pra preencher toda a tela, defina quantos cards ficaram por linha e divida por 100%

Exemplo: width: calc((100%/5) - 42px)

• 42px representa nao considerar o Margin e Padding dos itens internos

[ashcrysis]

Pra preencher toda a tela, defina quantos cards ficaram por linha e divida por 100%

Exemplo: width: calc((100%/5) - 42px)

Nesse caso, isso é no results container né? ou seria no componente PokeList que criamos? Tô colocando aqui esse width no PokeList e por exemplo pondo 2 ele fica quatro por linha

[gprado-justworks]

Pra preencher toda a tela, defina quantos cards ficaram por linha e divida por 100% Exemplo: width: calc((100%/5) - 42px)

Nesse caso, isso é no results container né? ou seria no componente PokeList que criamos? Tô colocando aqui esse width no PokeList e por exemplo pondo 2 ele fica quatro por linha

Nos cards, adiciona pra cada card esse width que passei, pois eles vao ter a largurda de: 100% / X, ex: 100%/3 = 33%, entao cada card teria 33% de largura, ocupando totalmente a tela

[ashcrysis]

Ata, entendi, deu certo

[ashcrysis]

Unico bo é que agora se eu reescaleonar a tela pra deixar como se fosse um celular acessando ele fica assim, vou tentar ajustar

[gprado-justworks]

Unico bo é que agora se eu reescaleonar a tela pra deixar como se fosse um celular acessando ele fica assim, vou tentar ajustar

Usar media query pra quanto menor a tela maior o width:

Exemplos: 1024: 12 itens 768: 8 itens 480: 4 itens

https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_media_queries/Using_media_queries

[gprado-justworks]

Vi os skeletons mas tem 2 coisas:

1 - Nao existe texto em cima da imagem, entao nao precisa ter skeleton em cima da imagem 2 - Nao existe texto a direita da imagem, mas ficaram skeletons ali, pode remover tambem

[gprado-justworks]

• Remover o skeletons que tao aparecendo a direita da imagem:

• Adicionar um respiro/padding nas laterais do header e do content da lista: 48px ou 64px

• Remover o alerta de login bem sucedido, apenas redirecionar pro /search

• Adicionar um texto em vermelho abaixo do form de login, ex: https://ant.design/components/alert