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.

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

Issue 26 #50

Closed
wants to merge 4 commits into from
Closed
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions src/components/PetRegist/Bars.svg
Copy link
Contributor

Choose a reason for hiding this comment

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

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

Copy link
Author

Choose a reason for hiding this comment

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

é um svg, exportei direto do figma do petdex.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions src/components/PetRegist/Ellipse-responsive.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions src/components/PetRegist/Ellipse.svg
Copy link
Contributor

Choose a reason for hiding this comment

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

Porque temos duas imagens do "Ellipse"?

Por isso se chama Ellipse?

Copy link
Author

Choose a reason for hiding this comment

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

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

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.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/components/PetRegist/Ellipse.svg:Zone.Identifier
Copy link
Contributor

Choose a reason for hiding this comment

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

Oque é isso?

Copy link
Author

Choose a reason for hiding this comment

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

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

Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
[ZoneTransfer]
ZoneId=3
HostUrl=https://www.figma.com/
98 changes: 98 additions & 0 deletions src/components/PetRegist/index.css
Copy link
Contributor

Choose a reason for hiding this comment

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

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

Copy link
Author

Choose a reason for hiding this comment

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

eu fiz em sccs.

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

Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
* {
box-sizing: border-box;
width: 100%;
}

html {
font-size: 10px;
}
Comment on lines +1 to +8
Copy link
Contributor

Choose a reason for hiding this comment

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

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

Copy link
Author

Choose a reason for hiding this comment

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

blz


.organize {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
}

#bonhoeffer {
display: flex;
flex-direction: column;
}

.question {
font-family: Montserrat;
font-size: 1.8rem;
font-weight: 500;
line-height: 26px;
letter-spacing: 0px;
text-align: center;
color: #39434F;
}

#adjuste {
font-family: Montserrat;
font-size: 1.4rem;
font-weight: 400;
line-height: 0;
letter-spacing: 0px;
text-align: center;
color: #606873;
}

#weight {
font-family: Montserrat;
font-size: 8rem;
font-weight: 700;
line-height: 50px;
letter-spacing: 0px;
text-align: center;
color: #1B85F3;
margin-bottom: 120px;
}

#rangeSlider {
margin-top: 0;
width: 600px;
-webkit-appearance: none;
}
#rangeSlider:focus {
outline: none;
}
#rangeSlider::-webkit-slider-runnable-track {
width: 10000px;
height: 1px;
cursor: pointer;
box-shadow: none;
background: #606873;
border-radius: 0px;
border: 0px solid #010101;
}
#rangeSlider::-webkit-slider-thumb {
box-shadow: none;
border: 2px solid #1268CC;
height: 42px;
width: 75px;
border-radius: 15px;
background: #1B85F3;
cursor: pointer;
-webkit-appearance: none;
margin-top: -20px;
}

#Slider-SVG {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
}

#bars-svg {
width: 100%;
display: flex;
background-repeat: repeat-x;
position: absolute;
top: -80px;
z-index: -1;
}/*# sourceMappingURL=index.css.map */
Copy link
Contributor

Choose a reason for hiding this comment

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

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

Copy link
Author

Choose a reason for hiding this comment

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

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

1 change: 1 addition & 0 deletions src/components/PetRegist/index.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

47 changes: 47 additions & 0 deletions src/components/PetRegist/index.js
Copy link
Contributor

Choose a reason for hiding this comment

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

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

Copy link
Author

Choose a reason for hiding this comment

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

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.

Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/* eslint-disable prettier/prettier */
Copy link
Contributor

Choose a reason for hiding this comment

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

Why?

Copy link
Author

Choose a reason for hiding this comment

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

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

import { Component } from 'pet-dex-utilities';
import './index.scss';
import Bars from './Bars.svg';

const html = `
<section class="slider">
<div class="slider__text-slider">
<h3 data-select="weight" class="slider__weight">0</h3>
</div>
<div class="slider__container">
<input type="range" value="50" step="0.1" min="0" max="100" data-select="rangeSlider" class="slider__input"/>
<img class="slider__bars-svg" alt="rangeSlider" src="${Bars}" data-select="svg">
</div>
</section>
`;

const events = ['weight'];

export default function Slider() {
Component.call(this, { html, events });
this.enable = true;

this.selected.get('rangeSlider').addEventListener(
'input',
(event) => {
if (!this.enable) return;
this.weight();
this.setValue(event.target.value);
},
false,
Copy link
Contributor

Choose a reason for hiding this comment

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

Pq esse false aqui?

);
}
Slider.prototype = Object.assign(Slider.prototype, Component.prototype, {
setTitle() {
this.selected.get('weight').textContent = Text;
},
setValue() {
this.selected.get('weight').textContent = this.selected.get('rangeSlider').value;
},
weight() {
Copy link
Contributor

Choose a reason for hiding this comment

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

mudar para weightChange

Copy link
Author

Choose a reason for hiding this comment

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

ok

this.emit('weight');
Copy link
Contributor

Choose a reason for hiding this comment

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

o nome do evento muda pra weight:change

},
disable() {
this.enable = false;
},
});
Loading