Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Criação e Estilização do Componente PetCard com Estados de Seleção #20

Closed
Tracked by #93
Alecell opened this issue Dec 15, 2023 · 2 comments · Fixed by #33
Closed
Tracked by #93

Criação e Estilização do Componente PetCard com Estados de Seleção #20

Alecell opened this issue Dec 15, 2023 · 2 comments · Fixed by #33
Assignees
@RafaelLimaC
Labels
good first issue Good for newcomers

Comments

@Alecell
Copy link
Contributor

Alecell commented Dec 15, 2023 •
edited
Loading

Describe the feature
Implementação do componente PetCard para exibir informações de pets com interatividade de seleção.

Description Desenvolver um componente de cartão (PetCard) que apresente a imagem e o nome do pet. Este componente deve ter dois estados visuais: selecionado e desselecionado. No estado selecionado, o cartão deve ser destacado com uma borda azul.

Use Case

O PetCard será utilizado para melhorar a experiência do usuário ao selecionar pets, fornecendo um feedback visual claro de qual pet está selecionado no momento.


Implementation Details

O componente deve ser criado usando HTML, SASS e JavaScript, seguindo as diretrizes de design fornecidas no Figma. Deve ser responsivo e acessível, permitindo a navegação tanto por cliques quanto por teclado.


Visual Concepts

As referências visuais para o componente estão disponíveis no layout do Figma: Layout PetDex.

image

image


Additional Information

É importante notificar o designer que a página de layout no Figma está com problemas de scroll, necessitando ajustes para visualização completa do design.

Perguntas Pendentes:

  • Qual é o comportamento exato esperado ao interagir com o PetCard? Há alguma ação adicional além da alteração visual?
  • Qual a ação de seleção deve ser vinculada ao estado do PetCard dentro do fluxo geral da aplicação?

Recomendações:

  • Certifique-se de que o estado selecionado não interfira na legibilidade ou acessibilidade do cartão.
@GabrielBruno7 GabrielBruno7 removed their assignment Dec 16, 2023
@Alecell Alecell added the good first issue Good for newcomers label Dec 16, 2023
@Alecell Alecell changed the title PetCard - imagem e nome - estado de selecionado e desselecionado Criação e Estilização do Componente PetCard com Estados de Seleção Dec 16, 2023
@RafaelLimaC
Copy link
Contributor

Eu quero!!!

@Alecell
Copy link
Contributor Author

Alecell commented Dec 19, 2023

Ponto: 21

RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Dec 19, 2023
@RafaelLimaC
feat: creating pet-card component
75ba9f6 
fix devhatt#20
@RafaelLimaC RafaelLimaC mentioned this issue Dec 19, 2023
Merged
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Dec 19, 2023
@RafaelLimaC
refactor: fazendo as alterações solicitadas no petcard, incluindo imp…
8131e89 
…ortação de variáveis, refactor para o src da imagem ser incluido de forma automatizada e organização do sccs

fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Dec 19, 2023
@RafaelLimaC
refactor: alterando o alt das imagens
6ce43d6 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Dec 21, 2023
@RafaelLimaC
refactor: changed the way font was imported, refactor on petcard widt…
6736c24 
…h/height, refactor petcard constructor

fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Dec 21, 2023
@RafaelLimaC
refactor: refactor on petcard constructor, refactor on petcard css co…
bb9d295 
…mponent, changed the way font was imported

fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Dec 25, 2023
@RafaelLimaC
style: changed some units from px to rem and removed fixed width/height
ce60335 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Dec 25, 2023
@RafaelLimaC
ci: styles changes
cf6af21 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Jan 6, 2024
@RafaelLimaC
style: indentation of html in js file
bfb5510 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Jan 6, 2024
@RafaelLimaC
style: indentation fix in js file
13d362f 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Jan 9, 2024
@RafaelLimaC
feat: visualization of card title in 2 lines
e6124ca 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Jan 9, 2024
@RafaelLimaC
fix: eof
0cd8370 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Jan 11, 2024
@RafaelLimaC
style: changed some units from px to rem and removed fixed width/height
17c8abb 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Jan 11, 2024
@RafaelLimaC
refactor: changed the way font was imported, refactor on petcard widt…
df172ab 
…h/height, refactor petcard constructor

fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Jan 11, 2024
@RafaelLimaC
refactor: fazendo as alterações solicitadas no petcard, incluindo imp…
9735991 
…ortação de variáveis, refactor para o src da imagem ser incluido de forma automatizada e organização do sccs

fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Jan 11, 2024
@RafaelLimaC
refactor: alterando o alt das imagens
dbfd734 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Jan 11, 2024
@RafaelLimaC
style: indentation of html in js file
c86c87d 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Jan 11, 2024
@RafaelLimaC
style: indentation fix in js file
0fd12c6 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Jan 11, 2024
@RafaelLimaC
feat: visualization of card title in 2 lines
c2f7529 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Jan 11, 2024
@RafaelLimaC
fix: eof
2d3af68 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Jan 11, 2024
@RafaelLimaC
feat: transition when hover petcard
4ebdbd0 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Jan 15, 2024
@RafaelLimaC
refactor: changed the colors from hex to rgba
fd337c8 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Jan 17, 2024
@RafaelLimaC
feat: title height adapt to the title size, and the petImage move down
36d2af5 
fix devhatt#20
@Alecell Alecell moved this from Backlog to In Progress in PetDex frontend Feb 1, 2024
@Alecell Alecell moved this from In Progress to Pending Approval in PetDex frontend Feb 1, 2024
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 5, 2024
@RafaelLimaC
style: removed some numbers after the comma for better reading
fbc1916 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 5, 2024
@RafaelLimaC
style: changed some units from px to rem and removed fixed width/height
4f6842e 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 5, 2024
@RafaelLimaC
refactor: changed the way font was imported, refactor on petcard widt…
ca2847f 
…h/height, refactor petcard constructor

fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 5, 2024
@RafaelLimaC
refactor: fazendo as alterações solicitadas no petcard, incluindo imp…
a6d5af7 
…ortação de variáveis, refactor para o src da imagem ser incluido de forma automatizada e organização do sccs

fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 5, 2024
@RafaelLimaC
refactor: alterando o alt das imagens
d9da7f0 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 5, 2024
@RafaelLimaC
style: indentation of html in js file
2ab69d5 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 5, 2024
@RafaelLimaC
style: indentation fix in js file
89ce073 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 5, 2024
@RafaelLimaC
feat: visualization of card title in 2 lines
efec593 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 5, 2024
@RafaelLimaC
feat: transition when hover petcard
2fdef07 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 5, 2024
@RafaelLimaC
refactor: changed the colors from hex to rgba
f8d3ab6 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 5, 2024
@RafaelLimaC
feat: title height adapt to the title size, and the petImage move down
9310166 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 5, 2024
@RafaelLimaC
style: removed some numbers after the comma for better reading
5a6c409 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 8, 2024
@RafaelLimaC
style: changed some units from px to rem and removed fixed width/height
47aa09f 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 8, 2024
@RafaelLimaC
refactor: changed the way font was imported, refactor on petcard widt…
3ee6aa3 
…h/height, refactor petcard constructor

fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 8, 2024
@RafaelLimaC
refactor: fazendo as alterações solicitadas no petcard, incluindo imp…
e3cce20 
…ortação de variáveis, refactor para o src da imagem ser incluido de forma automatizada e organização do sccs

fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 8, 2024
@RafaelLimaC
refactor: alterando o alt das imagens
7bc558f 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 8, 2024
@RafaelLimaC
style: indentation of html in js file
fa6de70 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 8, 2024
@RafaelLimaC
style: indentation fix in js file
b6d296d 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 8, 2024
@RafaelLimaC
feat: visualization of card title in 2 lines
bbb38cf 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 8, 2024
@RafaelLimaC
feat: transition when hover petcard
ba11736 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 8, 2024
@RafaelLimaC
refactor: changed the colors from hex to rgba
d2798cb 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 8, 2024
@RafaelLimaC
feat: title height adapt to the title size, and the petImage move down
46c90b0 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 8, 2024
@RafaelLimaC
style: removed some numbers after the comma for better reading
40ee9d3 
fix devhatt#20
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 8, 2024
@RafaelLimaC
refactor: reverted wrong changes made when i rebased
6519177 
fix devhatt#20
Alecell pushed a commit that referenced this issue Feb 8, 2024
@RafaelLimaC
feat: petCard component issue#20 (#33)
ea0bbcf 
* style: changed some units from px to rem and removed fixed width/height

fix #20

* refactor: changed the way font was imported, refactor on petcard width/height, refactor petcard constructor

fix #20

* refactor: fazendo as alterações solicitadas no petcard, incluindo importação de variáveis, refactor para o src da imagem ser incluido de forma automatizada e organização do sccs

fix #20

* refactor: alterando o alt das imagens

fix #20

* Delete src/styles/var.scss

* style: indentation of html in js file

fix #20

* style: indentation fix in js file

fix #20

* feat: visualization of card title in 2 lines

fix #20

* feat: transition when hover petcard

fix #20

* refactor: changed the colors from hex to rgba

fix #20

* feat: title height adapt to the title size, and the petImage move down

fix #20

* style: removed some numbers after the comma for better reading

fix #20

* refactor: reverted wrong changes made when i rebased

fix #20
@github-project-automation github-project-automation bot moved this from Pending Approval to Closed in PetDex frontend Feb 8, 2024
@PiluVitu PiluVitu mentioned this issue Mar 4, 2024
Closed
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@RafaelLimaC RafaelLimaC

Labels
good first issue Good for newcomers
Projects
PetDex frontend
Status: Closed
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: petCard component issue#20 RafaelLimaC/pet-dex-frontend
3 participants
@Alecell @GabrielBruno7 @RafaelLimaC