Issue 26 #50

anthonymanoel · 2024-01-11T01:55:32Z

Closes #26

Description
Adicionando range-slider como um componente dinâmico para futuramente setar peso do animal.

fix issue-26 devhatt#26

Alecell · 2024-01-11T13:25:01Z

src/components/PetRegist/Ellipse.svg:Zone.Identifier

Oque é isso?

subiu errado, não era p ter subido, tá com o link do figma que foi retirado só.

Alecell · 2024-01-11T13:25:42Z

src/components/PetRegist/Ellipse.svg

Porque temos duas imagens do "Ellipse"?

Por isso se chama Ellipse?

Eu exportei como SVG do figma do petdex, e lá está com o nome de selection ellipse:

acabei por colocar esse nome.

a despeito dos 2 arquivos, um é para desktop e outro para mobile, ao tentar estilizar ele no mobile, uma parte dele se ocultava caso eu desse um Width do tamanho necessário. Então a solução que achei foi duplicar o arquivo e mudar direto no código do SVG o tamanho.

Alecell · 2024-01-11T13:26:15Z

src/components/PetRegist/Bars.svg

Isso não pode ser uma imagem, tem q ser feito no HTML/SVG raw pra fazer animação

é um svg, exportei direto do figma do petdex.

Alecell · 2024-01-11T13:32:27Z

src/components/PetRegist/index.css

Isso aqui não existe, vc fez em css? A gente usa scss não css.

eu fiz em sccs.

foi uma extensão minha que criou esse .css, vou tirar ele de jogo, tinha esquecido.

Alecell · 2024-01-11T13:33:33Z

src/components/PetRegist/index.css

+* {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+html {
+  font-size: 10px;
+}


Vc não pode fazer isso num arquivo interno de css, alterar o html e usar * é muito errado, precisa ajustar

Alecell · 2024-01-11T13:34:13Z

src/components/PetRegist/index.css

+  position: absolute;
+  top: -80px;
+  z-index: -1;
+}/*# sourceMappingURL=index.css.map */


Isso é um sourcemap? Pq tem um sourcemap no seu componente?

po esse sourcemap eu não adicionei ai não, que brisa é essa

Alecell · 2024-01-11T13:37:14Z

src/components/PetRegist/index.scss

Precisamos falar sobre isso

…CSS e ajeitando bug do prettier fix devhatt#26

Alecell · 2024-01-18T12:43:25Z

src/components/PetRegist/index.scss

+        appearance: none;
+      }
+    }
+}


Alecell · 2024-01-18T12:43:35Z

src/components/PetRegist/index.js

@@ -0,0 +1,48 @@
+/* eslint-disable prettier/prettier */


prettier e eslint estão dando conflito de identação, precisei desativar um para que não desse erro. Cheguei até a falar com o Pilu e Diogo sobre esse erro ai, e te mandei msg um dia no discord mostrando o erro, no fim ele era ocasionado por conta de conflito de identação

Alecell · 2024-01-18T12:44:22Z

src/components/PetRegist/index.js

Não tinha raparado antes, mas pq o arquivo se chama PetRegist?

Como ele vai fazer parte do cadastro de pets e ainda não existia nenhum arquivo, pensei em já deixar o nome para guiar o que esse componente faz parte.

Alecell · 2024-01-18T12:45:11Z

src/components/PetRegist/index.js

+  setValue() {
+    this.selected.get('weight').textContent = this.selected.get('rangeSlider').value;
+  },
+  weight() {


mudar para weightChange

Alecell · 2024-01-18T12:45:27Z

src/components/PetRegist/index.js

+    this.selected.get('weight').textContent = this.selected.get('rangeSlider').value;
+  },
+  weight() {
+    this.emit('weight');


o nome do evento muda pra weight:change

Alecell · 2024-01-18T12:48:03Z

src/components/PetRegist/index.scss

+
+  align-items:center;
+
+  padding-right: 85px;


bah não tinha visto que eu coloquei em px

Alecell · 2024-01-18T12:48:44Z

src/components/PetRegist/index.scss

+  padding-right: 85px;
+
+  position:absolute;
+  top: -75px;


Usar %, no max usar outra coisa, a menos que vc me justifique o porque precisa de -75px de top

Alecell · 2024-01-18T12:48:50Z

src/components/PetRegist/index.scss

+
+  position:absolute;
+  top: -75px;
+  z-index: -1;


Alecell · 2024-01-18T12:49:03Z

src/components/PetRegist/index.scss

+.slider__input{
+    width: 600px;
+
+  margin-top: -45px;


Identação

Alecell · 2024-01-18T12:49:21Z

src/components/PetRegist/index.scss

Ta usando em alguns momentos identação de 4 espaçoes, use apenas 2

Alecell · 2024-01-18T12:49:22Z

src/components/PetRegist/index.scss

Ta usando em alguns momentos identação de 4 espaçoes, use apenas 2

Alecell

Preciso que se atente mais na parte de estilos, principalmente em:

Buscar soluções com melhor compatibilidade entre browsers
Evitar repetição de propriedade
Evitar "resolver um problema que vc mesmo causou", muito do seu CSS parece ser gambiarras que vc precisou fazer pq usou muita coisa que não deve ser usada ou alguma coisa que estragou a outra saca?
Se atentar ao nosso padrão de unidades e como usamos https://www.linkedin.com/pulse/unidades-css-um-guia-completo-alexandre-gomes/

Alecell · 2024-01-18T12:49:58Z

src/components/PetRegist/index.scss

+}
+
+.slider__input{
+    width: 600px;


usar %, largura em px é um crime hediondo

Alecell · 2024-01-18T12:51:26Z

src/components/PetRegist/index.scss

+        outline: none;
+    }
+
+    &::-webkit-slider-runnable-track {


Isso não é muito bem suportado, precisamos talvez conversar sobre o pq isso é necessario e quais estrategias podemos usar

Alecell · 2024-01-18T12:51:45Z

src/components/PetRegist/index.scss

+        cursor: pointer;
+    }
+
+    &::-webkit-slider-thumb {


Isso não é muito bem suportado, precisamos talvez conversar sobre o pq isso é necessario e quais estrategias podemos usar

Alecell · 2024-01-18T12:52:00Z

src/components/PetRegist/index.scss

+      width: 100px;
+      height: 100px;


Nunca never jamais

Alecell · 2024-01-18T12:52:14Z

src/components/PetRegist/index.scss

+    }
+}
+
+@media only screen and (max-width: 600px){


A gente ainda não tem as media-query padrão?

até o dia que eu subi isso não tinha não

Alecell · 2024-01-18T12:53:40Z

src/components/PetRegist/index.scss

+  }
+
+  .slider__bars-svg{
+    width: 200vw;


Alecell · 2024-01-18T12:53:53Z

src/components/PetRegist/index.scss

+    top: 5px;
+    z-index: -1;    


p resolver a questão do bars-svg fica atrás na position absolute, mt errado?

Alecell · 2024-01-18T12:54:00Z

src/components/PetRegist/index.scss

+  .slider__input{
+      width: 80vw;
+
+    margin-top: 15px;


identação

Ale, todas as partes de identação do Sass foram colocadas pelas extensões, eu deixo tudo mt próximo um do outro, com no máximo 1 espaço de linhas.

Alecell · 2024-01-18T12:54:03Z

src/components/PetRegist/index.scss

+  }
+
+  .slider__input{
+      width: 80vw;


Alecell · 2024-01-18T12:54:27Z

src/components/PetRegist/index.scss

Tive a impressão de que no fim desse arquivo vc duplicou alguns estilos, isso aconteceu de fato?

Alecell · 2024-02-21T03:10:23Z

PR fechado decorrente de inatividade

anthonymanoel added 2 commits January 10, 2024 14:14

adding slider-input-range component

9f02053

feat: adding a new component that will put weight in slider-range

8397944

fix issue-26 devhatt#26

Alecell requested changes Jan 11, 2024

View reviewed changes

anthonymanoel and others added 2 commits January 11, 2024 14:29

style: Removendo arquivos CSS, alterando tags chamadas no documento S…

19f29f2

…CSS e ajeitando bug do prettier fix devhatt#26

Merge branch 'main' into issue-26

0271931

Alecell reviewed Jan 18, 2024

View reviewed changes

src/components/PetRegist/index.scss

Copy link

Contributor

Alecell Jan 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ta usando em alguns momentos identação de 4 espaçoes, use apenas 2

Alecell requested changes Jan 18, 2024

View reviewed changes

PiluVitu assigned anthonymanoel Jan 29, 2024

Alecell unassigned anthonymanoel Feb 8, 2024

Alecell closed this Feb 21, 2024

Issue 26 #50

Issue 26 #50

Conversation

anthonymanoel commented Jan 11, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Alecell left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Alecell commented Feb 21, 2024