diff --git a/src/home/components/PetRegister/index.js b/src/home/components/PetRegister/index.js deleted file mode 100644 index 43647887..00000000 --- a/src/home/components/PetRegister/index.js +++ /dev/null @@ -1,63 +0,0 @@ -import { Component } from 'pet-dex-utilities'; -import TextInput from '../../../components/TextInput'; -import UploadImage from '../../../components/UploadImage'; -import Button from '../../../components/Button'; -import './index.scss'; - -const events = ['submit']; - -const html = ` -
-
-
-

Qual o nome do seu bichinho?

-
-
-
-
-`; - -export default function PetRegister() { - Component.call(this, { html, events }); - - const $inputContainer = this.selected.get('input-container'); - const $uploadImage = this.selected.get('upload-image-container'); - const $buttonContainer = this.selected.get('button-container'); - - this.input = new TextInput({ - placeholder: 'Nome do Pet', - }); - - this.upload = new UploadImage(); - this.button = new Button({ - text: 'Continuar', - isFullWidth: true, - isDisabled: false, - }); - - const updateButtonVisibility = () => { - const input = this.input.getValue(); - const image = this.upload.getImage(); - - this.button.setIsDisabled(!(input && image)); - }; - updateButtonVisibility(); - - this.upload.listen('value:change', updateButtonVisibility); - this.input.listen('value:change', updateButtonVisibility); - - this.button.listen('click', () => { - const image = this.upload.getValue(); - const name = this.input.getValue(); - this.emit('submit', { image, name }); - }); - - this.upload.mount($uploadImage); - this.input.mount($inputContainer); - this.button.mount($buttonContainer); -} - -PetRegister.prototype = Object.assign( - PetRegister.prototype, - Component.prototype, -); diff --git a/src/home/components/PetRegister/index.scss b/src/home/components/PetRegister/index.scss deleted file mode 100644 index ad0833c3..00000000 --- a/src/home/components/PetRegister/index.scss +++ /dev/null @@ -1,72 +0,0 @@ -@use '~styles/breakpoints.scss' as breakpoints; -@use '~styles/colors.scss' as colors; -@use '~styles/fonts.scss' as fonts; - -.pet-register { - display: flex; - flex-direction: column; - - &__container { - width: 100%; - } - - &__image { - max-width: 18.6rem; - - margin: 5rem auto; - } - - &__title { - font-family: fonts.$primaryFont; - color: colors.$gray800; - text-align: center; - font-size: fonts.$xs; - font-weight: fonts.$medium; - - margin: 7rem auto 3rem; - } - - &__input { - max-width: 32.7rem; - - margin: 0 auto; - } - - &__button { - width: 100%; - - margin-top: 16.8rem; - padding: 2rem; - box-sizing: border-box; - - box-shadow: 0 -3px 8px 0 rgba(73, 77, 90, 0.12156862745098039); - border-radius: 1.7rem; - } -} - -@include breakpoints.from1024 { - .pet-register { - align-items: center; - - &__title { - font-size: fonts.$sm; - - margin-top: 15rem; - } - - &__input { - max-width: 40rem; - - margin: 0 auto; - } - - &__button { - width: 43%; - - margin-top: 4rem; - padding: unset; - - box-shadow: unset; - } - } -} diff --git a/src/home/components/PetVetPage/images/cuidadosEspeciais.svg b/src/home/components/PetVetPage/images/cuidadosEspeciais.svg deleted file mode 100644 index cf3c0a71..00000000 --- a/src/home/components/PetVetPage/images/cuidadosEspeciais.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/src/home/components/PetVetPage/images/estetoscopio.svg b/src/home/components/PetVetPage/images/estetoscopio.svg deleted file mode 100644 index 6d34411e..00000000 --- a/src/home/components/PetVetPage/images/estetoscopio.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/src/home/components/PetVetPage/index.js b/src/home/components/PetVetPage/index.js deleted file mode 100644 index 19e49de9..00000000 --- a/src/home/components/PetVetPage/index.js +++ /dev/null @@ -1,127 +0,0 @@ -import { Component } from 'pet-dex-utilities'; -import Button from '../../../components/Button'; -import Radio from '../../../components/RadioButton'; -import Vaccine from '../../../components/Vaccine'; - -import estetoscopio from './images/estetoscopio.svg'; -import cuidadosEspeciais from './images/cuidadosEspeciais.svg'; - -import './index.scss'; - -const html = ` -
-
-

Conte-nos um pouco mais do seu animal

-

Seu pet já foi vacinado? Conta pra gente que mês ou ano que você costuma comemorar o aniversário dele!

-
-
-
-
-
- estetoscopio -
-
-

O seu pet amigo foi castrado?

-
-
-
-
-
-
-
- cuidados especiais -
-
-

Cuidados especiais

-
-
-
-
-
- -
-`; - -const events = ['submit']; - -function createAndMount({ name, text, mountTo }) { - const radio = new Radio({ name, text }); - radio.mount(mountTo); - return radio; -} - -export default function PetVetPage({ vaccines = [] } = {}) { - Component.call(this, { html, events }); - - const $footer = this.selected.get('footer'); - const $specialCareRadio = this.selected.get('special-care-radio'); - const $neuteredRadio = this.selected.get('neutered-radio'); - const $cardGroup = this.selected.get('card-group'); - - this.vaccine = new Vaccine({ vaccines }); - this.vaccine.mount($cardGroup); - - const form = { - isNeutered: undefined, - isSpecialCare: undefined, - specialCareText: '', - vaccines: undefined, - }; - - const specialCare = [ - createAndMount({ - name: 'specialCare', - text: 'Não', - mountTo: $specialCareRadio, - }), - createAndMount({ - name: 'specialCare', - text: 'Sim', - mountTo: $specialCareRadio, - }), - ]; - const neutered = [ - createAndMount({ - name: 'neutered', - text: 'Não', - mountTo: $neuteredRadio, - }), - createAndMount({ - name: 'neutered', - text: 'Sim', - mountTo: $neuteredRadio, - }), - ]; - - neutered.forEach((radio) => { - radio.listen('change', (value) => { - const text = radio.getText(); - form.isNeutered = text === 'Yes' ? value : !value; - }); - }); - - specialCare.forEach((radio) => { - radio.listen('change', (value) => { - const text = radio.getText(); - form.isSpecialCare = text === 'Yes' ? value : !value; - }); - }); - - this.button = new Button({ - text: 'Concluir', - isFullWidth: false, - isDisabled: false, - }); - - this.button.selected.get('button').classList.add('petvet-page__button'); - this.button.mount($footer); - - const emitForm = () => { - form.vaccines = this.vaccine.listVaccines(); - this.emit('submit', form); - }; - - this.button.listen('click', emitForm); -} - -PetVetPage.prototype = Object.assign(PetVetPage.prototype, Component.prototype); diff --git a/src/home/components/PetVetPage/index.scss b/src/home/components/PetVetPage/index.scss deleted file mode 100644 index f0136cd4..00000000 --- a/src/home/components/PetVetPage/index.scss +++ /dev/null @@ -1,159 +0,0 @@ -@use '~styles/colors.scss' as colors; -@use '~styles/fonts.scss' as fonts; -@use '~styles/breakpoints' as breakpoints; - -.petvet-page { - height: 100%; - - display: flex; - flex-direction: column; - - align-items: center; - - &__header { - text-align: center; - - margin-bottom: 2.4rem; - - &--text { - font-family: fonts.$primaryFont; - color: colors.$gray800; - font-size: 1.8rem; - font-weight: fonts.$semiBold; - - line-height: 2.6; - } - - &--subtext { - font-family: fonts.$fourthFont; - color: colors.$gray700; - font-size: fonts.$sm; - font-weight: fonts.$regular; - - line-height: 2.2; - } - } - - &__card-group { - display: flex; - flex-direction: column; - - gap: 1.6rem; - } - - &__card { - font-family: fonts.$primaryFont; - color: colors.$gray800; - font-size: 1.4rem; - font-weight: fonts.$semiBold; - line-height: 2rem; - - padding: 1.6rem; - - box-shadow: 0 0 2px 2px rgba(50, 50, 71, 0.04); - - border-radius: 1.4rem; - } - - &__card-header { - display: flex; - gap: 1rem; - - align-items: center; - } - - &__card-content { - width: 100%; - - display: flex; - - flex-direction: column; - - gap: 2rem; - } - - &__img { - max-width: 5.4rem; - max-height: 5.4rem; - - display: flex; - - align-items: center; - } - - &__footer { - width: 100%; - - display: flex; - - justify-content: center; - } - - &__button { - width: min(100%, 42rem); - - margin-top: 2.4rem; - margin-bottom: 2.4rem; - } -} - -@include breakpoints.from667 { - .petvet-page { - &__img { - min-width: 6rem; - min-height: 6rem; - - display: flex; - - align-items: center; - } - - &__card { - padding: 2rem; - - border: 1px solid colors.$gray150; - - box-shadow: none; - border-radius: 1.8rem; - } - - &__card-header { - display: flex; - gap: 2rem; - - align-items: center; - } - - &__card-content { - flex-direction: row; - - align-items: center; - - justify-content: space-between; - } - - &__header { - &--subtext { - font-size: fonts.$sm; - } - } - - &__card-group { - gap: 2.4rem; - } - - &__button { - margin-bottom: 0; - } - } -} - -@container (min-height: 790px) { - @include breakpoints.from667 { - .petvet-page { - &__card-group { - overflow: auto; - } - } - } -} diff --git a/src/layouts/PetDexApp/components/Navigation/images/avatar.svg b/src/layouts/PetDexApp/components/Navigation/images/avatar.svg deleted file mode 100644 index 032e1219..00000000 --- a/src/layouts/PetDexApp/components/Navigation/images/avatar.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/layouts/PetDexApp/components/Navigation/images/bell.svg b/src/layouts/PetDexApp/components/Navigation/images/bell.svg deleted file mode 100644 index 0d372506..00000000 --- a/src/layouts/PetDexApp/components/Navigation/images/bell.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/layouts/PetDexApp/components/Navigation/images/exit.svg b/src/layouts/PetDexApp/components/Navigation/images/exit.svg deleted file mode 100644 index 09385386..00000000 --- a/src/layouts/PetDexApp/components/Navigation/images/exit.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/layouts/PetDexApp/components/Navigation/images/menu.svg b/src/layouts/PetDexApp/components/Navigation/images/menu.svg deleted file mode 100644 index 928eed22..00000000 --- a/src/layouts/PetDexApp/components/Navigation/images/menu.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/layouts/PetDexApp/components/Navigation/index.js b/src/layouts/PetDexApp/components/Navigation/index.js deleted file mode 100644 index 1f529662..00000000 --- a/src/layouts/PetDexApp/components/Navigation/index.js +++ /dev/null @@ -1,36 +0,0 @@ -import { Component } from 'pet-dex-utilities'; -import './index.scss'; - -import petUrl from '../../../../images/pet-dex.svg'; -import avatarUrl from './images/avatar.svg'; -import bellUrl from './images/bell.svg'; -import exitUrl from './images/exit.svg'; -import menuUrl from './images/menu.svg'; - -const html = ` - -`; - -export default function Navigation() { - Component.call(this, { html }); -} - -Navigation.prototype = Object.assign(Navigation.prototype, Component.prototype); diff --git a/src/layouts/PetDexApp/components/Navigation/index.scss b/src/layouts/PetDexApp/components/Navigation/index.scss deleted file mode 100644 index 51597104..00000000 --- a/src/layouts/PetDexApp/components/Navigation/index.scss +++ /dev/null @@ -1,57 +0,0 @@ -@use '~styles/breakpoints.scss' as breakpoints; - -.navigation { - width: 100%; - - display: flex; - - align-items: center; - justify-content: space-between; - - padding-inline: 2rem; - - &__icons { - display: flex; - - gap: 2.4rem; - } - - &__icon-container { - width: 4rem; - height: 4rem; - - display: grid; - - place-items: center; - - &--menu { - display: grid; - } - - &--avatar, - &--bell, - &--exit { - display: none; - } - } -} - -@include breakpoints.from1024 { - .navigation { - &__icon-container { - &--menu { - display: none; - } - - &--avatar, - &--bell, - &--exit { - display: grid; - } - } - - &__logo { - display: none; - } - } -} diff --git a/src/layouts/PetDexApp/components/SideMenu/images/configuracoes.svg b/src/layouts/PetDexApp/components/SideMenu/images/configuracoes.svg deleted file mode 100644 index feb16ea7..00000000 --- a/src/layouts/PetDexApp/components/SideMenu/images/configuracoes.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/src/layouts/PetDexApp/components/SideMenu/images/conta.svg b/src/layouts/PetDexApp/components/SideMenu/images/conta.svg deleted file mode 100644 index 836f5554..00000000 --- a/src/layouts/PetDexApp/components/SideMenu/images/conta.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/layouts/PetDexApp/components/SideMenu/images/doacoes.svg b/src/layouts/PetDexApp/components/SideMenu/images/doacoes.svg deleted file mode 100644 index 46094d62..00000000 --- a/src/layouts/PetDexApp/components/SideMenu/images/doacoes.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/layouts/PetDexApp/components/SideMenu/images/exit.svg b/src/layouts/PetDexApp/components/SideMenu/images/exit.svg deleted file mode 100644 index 54ed31ac..00000000 --- a/src/layouts/PetDexApp/components/SideMenu/images/exit.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/layouts/PetDexApp/components/SideMenu/images/exitmenu.svg b/src/layouts/PetDexApp/components/SideMenu/images/exitmenu.svg deleted file mode 100644 index 2f428194..00000000 --- a/src/layouts/PetDexApp/components/SideMenu/images/exitmenu.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/layouts/PetDexApp/components/SideMenu/images/meuspets.svg b/src/layouts/PetDexApp/components/SideMenu/images/meuspets.svg deleted file mode 100644 index 5151bde8..00000000 --- a/src/layouts/PetDexApp/components/SideMenu/images/meuspets.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/layouts/PetDexApp/components/SideMenu/images/notifications.svg b/src/layouts/PetDexApp/components/SideMenu/images/notifications.svg deleted file mode 100644 index 2d7409da..00000000 --- a/src/layouts/PetDexApp/components/SideMenu/images/notifications.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/src/layouts/PetDexApp/components/SideMenu/images/perfil.svg b/src/layouts/PetDexApp/components/SideMenu/images/perfil.svg deleted file mode 100644 index 2084683f..00000000 --- a/src/layouts/PetDexApp/components/SideMenu/images/perfil.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/layouts/PetDexApp/components/SideMenu/images/petdex.svg b/src/layouts/PetDexApp/components/SideMenu/images/petdex.svg deleted file mode 100644 index 7ad64d63..00000000 --- a/src/layouts/PetDexApp/components/SideMenu/images/petdex.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/layouts/PetDexApp/components/SideMenu/index.js b/src/layouts/PetDexApp/components/SideMenu/index.js deleted file mode 100644 index d4407b25..00000000 --- a/src/layouts/PetDexApp/components/SideMenu/index.js +++ /dev/null @@ -1,50 +0,0 @@ -import { Component } from 'pet-dex-utilities'; -import petUrl from '../../../../images/pet-dex.svg'; -import configuracoes from './images/configuracoes.svg'; -import conta from './images/conta.svg'; -import doacoes from './images/doacoes.svg'; -import exit from './images/exit.svg'; -import exitMenu from './images/exitmenu.svg'; -import meusPets from './images/meuspets.svg'; -import notificacoes from './images/notifications.svg'; -import perfil from './images/perfil.svg'; -import petdex from './images/petdex.svg'; -import './index.scss'; - -const html = ` - -
-
-
-

Seu Pet

-
-
-
- -
-
- -`; - -export default function SideMenu() { - Component.call(this, { html }); -} - -SideMenu.prototype = Object.assign(SideMenu.prototype, Component.prototype); diff --git a/src/layouts/PetDexApp/components/SideMenu/index.scss b/src/layouts/PetDexApp/components/SideMenu/index.scss deleted file mode 100644 index 0953bb8f..00000000 --- a/src/layouts/PetDexApp/components/SideMenu/index.scss +++ /dev/null @@ -1,147 +0,0 @@ -@use '~styles/colors.scss' as colors; -@use '~styles/breakpoints.scss' as breakpoints; -@use '~styles/fonts.scss' as fonts; - -.side-menu-nav { - display: flex; - - align-items: center; - justify-content: space-between; - padding-inline: 2rem; - - &__logo-container { - display: none; - padding-block: 4rem 2rem; - - text-align: center; - } - - &__logo { - max-width: 100%; - } - - &__icons { - display: flex; - gap: 2.4rem; - - align-items: center; - justify-content: center; - } - - &__notifications { - width: 1.6rem; - height: 1.95rem; - } - - &__perfil { - width: 4.3rem; - height: 4.3rem; - - border-radius: 100%; - } - - &__exit { - width: 2rem; - height: 2rem; - } - - &__exitmenu { - width: 2.9rem; - height: 2.4rem; - } -} - -.side-menu-content { - width: 28rem; - - display: flex; - flex-direction: column; - gap: 4.2rem; - - margin: 0 auto; - - &__line { - width: 100%; - - border: 0.1rem solid colors.$secondary100; - } - - &__lineinside { - width: 100%; - - margin: 4.2rem 0; - border: 0.1rem solid colors.$secondary100; - } - - &__yourpet { - font-family: fonts.$primaryFont; - } - - &__title-yourpet { - color: colors.$secondary100; - font-size: 1.6rem; - font-weight: fonts.$bold; - font-style: fonts.$normal; - } - - &__itens { - font-family: fonts.$primaryFont; - color: colors.$secondary100; - font-size: 1.6rem; - } - - &__ul { - display: flex; - flex-direction: column; - gap: 0.8rem; - - align-items: flex-start; - } - - &__menuitens { - display: flex; - gap: 1.2rem; - - align-items: center; - - color: colors.$secondary100; - text-decoration: none; - - padding: 1.2rem; - - &--active { - background-color: rgb(0, 29, 49); - border-radius: 2rem; - } - } -} - -@include breakpoints.from1024() { - .side-menu-nav { - &__logo-container { - display: block; - - margin: 0 auto; - } - - &__icons { - display: none; - } - - &__exitmenu { - display: none; - } - } - - .side-menu-content { - width: 70%; - - &__menuitens { - transition: 0.3s; - - &:hover { - opacity: 0.6; - } - } - } -} diff --git a/src/layouts/PetDexApp/pages/NoPetRegirested/images/no-pet-regirested-page.png b/src/layouts/PetDexApp/pages/NoPetRegirested/images/no-pet-regirested-page.png deleted file mode 100644 index 48d4054f..00000000 Binary files a/src/layouts/PetDexApp/pages/NoPetRegirested/images/no-pet-regirested-page.png and /dev/null differ diff --git a/src/layouts/PetDexApp/pages/NoPetRegirested/index.js b/src/layouts/PetDexApp/pages/NoPetRegirested/index.js deleted file mode 100644 index 032a20c6..00000000 --- a/src/layouts/PetDexApp/pages/NoPetRegirested/index.js +++ /dev/null @@ -1,38 +0,0 @@ -import { Component } from 'pet-dex-utilities'; -import Button from '../../../../components/Button'; -import petUrl from './images/no-pet-regirested-page.png'; -import './index.scss'; - -const html = ` -
-
-
-

Você ainda não tem nenhum pet cadastrado

-

Crie o perfil do seu pet e deixe o nosso site com o focinho do seu filhote!

-
- dog in an smart phone -
-
; -`; - -export default function NoPetRegirested() { - Component.call(this, { html }); - - const $container = this.selected.get('container'); - - this.button = new Button({ - text: 'Cadastrar pet', - isFullWidth: true, - isDisabled: false, - }); - - this.button.selected - .get('button') - .classList.add('no-pet-regirested-page__button'); - this.button.mount($container); -} - -NoPetRegirested.prototype = Object.assign( - NoPetRegirested.prototype, - Component.prototype, -); diff --git a/src/layouts/PetDexApp/pages/NoPetRegirested/index.scss b/src/layouts/PetDexApp/pages/NoPetRegirested/index.scss deleted file mode 100644 index aefe4e58..00000000 --- a/src/layouts/PetDexApp/pages/NoPetRegirested/index.scss +++ /dev/null @@ -1,80 +0,0 @@ -@use '~styles/colors.scss' as colors; -@use '~styles/breakpoints.scss' as breakpoints; - -.no-pet-regirested-page { - min-height: 100%; - - display: grid; - - place-items: center; - - &__description { - max-width: 33.5rem; - - font-family: 'Montserrat', sans-serif; - } - - &__title { - color: colors.$gray800; - font-size: 2.4rem; - font-weight: 700; - line-height: 1.25; - } - - &__hint { - color: colors.$gray600; - font-size: 1.6rem; - font-weight: 500; - line-height: 1.875; - - margin-top: 1.8rem; - } - - &__image { - max-width: 100%; - - margin-top: 2.4rem; - } - - &__button { - max-width: 42rem; - - margin-top: 3.2rem; - } - - &__content { - text-align: center; - } -} - -@include breakpoints.from1024 { - .no-pet-regirested-page { - &__description { - max-width: 46rem; - } - - &__title { - font-size: 3.4rem; - } - - &__hint { - font-size: 1.8rem; - - margin-top: 2rem; - } - - &__image { - margin-top: 0; - } - - &__button { - margin-top: 4rem; - } - - &__content { - display: flex; - - align-items: center; - } - } -} diff --git a/src/layouts/PetDexApp/pages/PetRegister/index.js b/src/layouts/PetDexApp/pages/PetRegister/index.js deleted file mode 100644 index 9d8abb23..00000000 --- a/src/layouts/PetDexApp/pages/PetRegister/index.js +++ /dev/null @@ -1,60 +0,0 @@ -import { Component } from 'pet-dex-utilities'; -import Button from '../../../../components/Button'; -import PetCard from '../../../../components/PetCard'; -import './index.scss'; - -const events = ['select:card', 'submit']; - -const html = ` -
-
- -
-`; - -export default function PetRegister({ cards = [] } = {}) { - Component.call(this, { html, events }); - - const $container = this.selected.get('container'); - const $footerContainer = this.selected.get('footer-container'); - this.activeCard = null; - - const $button = new Button({ - text: 'Continuar', - isFullWidth: false, - isDisabled: true, - }); - - cards.forEach((data) => { - const card = new PetCard(data); - - card.selected.get('pet-container').classList.add('pet-card'); - card.selected.get('pet-container').classList.toggle('pet-card--active'); - card.mount($container); - - card.listen('active', () => { - if (this.activeCard) this.activeCard.deactivate(); - - this.activeCard = card; - this.emit('select:card', card); - $button.enable(); - }); - - card.listen('deactive', () => { - $button.disable(); - this.activeCard = null; - }); - }); - - $button.listen('click', () => { - this.emit('submit', this.breedSelect); - }); - - $button.selected.get('button').classList.add('breed-page__button'); - $button.mount($footerContainer); -} - -PetRegister.prototype = Object.assign( - PetRegister.prototype, - Component.prototype, -); diff --git a/src/layouts/PetDexApp/pages/PetRegister/index.scss b/src/layouts/PetDexApp/pages/PetRegister/index.scss deleted file mode 100644 index db178c16..00000000 --- a/src/layouts/PetDexApp/pages/PetRegister/index.scss +++ /dev/null @@ -1,60 +0,0 @@ -@use '~styles/colors.scss' as colors; -@use '~styles/breakpoints.scss' as breakpoints; - -.breed-page { - height: 100%; - - display: flex; - flex-direction: column; - - &__breed-grid { - overflow: auto; - - display: flex; - flex-wrap: wrap; - gap: 1.6rem; - - align-items: start; - justify-content: center; - - .pet-card { - aspect-ratio: auto; - - cursor: pointer; - } - } -} - -.breed-page__footer { - display: flex; - - margin: 2rem; - - .breed-page__button { - width: min(100%, 42rem); - - margin: 0 auto; - } -} - -@include breakpoints.from1024 { - .breed-page { - &__breed-grid { - display: flex; - - align-items: center; - } - } - - .breed-page__footer { - margin: 1.2rem; - } -} - -@include breakpoints.from1280 { - .breed-page__footer { - &__button { - margin: 0 auto; - } - } -} diff --git a/src/layouts/PetDexApp/pages/PetRegister/index.spec.js b/src/layouts/PetDexApp/pages/PetRegister/index.spec.js deleted file mode 100644 index 49f1493a..00000000 --- a/src/layouts/PetDexApp/pages/PetRegister/index.spec.js +++ /dev/null @@ -1,9 +0,0 @@ -import { describe, expect, it } from 'vitest'; - -import PetRegisterPage from './index'; - -describe('PetregisterPage', () => { - it('its a function', () => { - expect(PetRegisterPage).toBeInstanceOf(Function); - }); -}); diff --git a/src/layouts/PetDexApp/pages/PetWeight/index.js b/src/layouts/PetDexApp/pages/PetWeight/index.js deleted file mode 100644 index 817f0824..00000000 --- a/src/layouts/PetDexApp/pages/PetWeight/index.js +++ /dev/null @@ -1,140 +0,0 @@ -import { Component } from 'pet-dex-utilities'; -import Button from '../../../../components/Button'; -import RadioButton from '../../../../components/RadioButton'; -import RangeSlider from '../../../../components/RangeSlider'; -import TextInput from '../../../../components/TextInput'; -import UploadImage from '../../../../components/UploadImage'; -import './index.scss'; - -const html = ` -
-
-
- -
-

Qual é o peso do seu animal de estimação?

-

Ajuste de acordo com a realidade

-
- -
- -
-
-
-
; -`; - -export default function PetWeight({ petPhoto }) { - Component.call(this, { html }); - this.initializeComponents(); - this.setupEventListeners(); - this.applyCssClasses(); - this.petPhoto = petPhoto; -} - -PetWeight.prototype = Object.assign(PetWeight.prototype, Component.prototype, { - initializeComponents() { - const $container = this.selected.get('container'); - const $imageContainer = this.selected.get('image-container'); - const $sliderContainer = this.selected.get('slider-container'); - const $inputsContainer = this.selected.get('input-container'); - - this.setupComponents( - $container, - $imageContainer, - $sliderContainer, - $inputsContainer, - ); - }, - - setupComponents( - $container, - $imageContainer, - $sliderContainer, - $inputsContainer, - ) { - this.image = new UploadImage(); - this.slider = new RangeSlider(); - this.input = new TextInput({ - placeholder: 'Peso', - assetUrl: '', - assetPosition: 'prefix', - variation: 'standard', - }); - this.radioKG = new RadioButton({ - check: true, - text: 'KG', - value: 'kg', - name: 'weight-unit', - }); - this.radioLB = new RadioButton({ - text: 'LB', - value: 'lb', - name: 'weight-unit', - }); - this.button = new Button({ - text: 'Continuar', - isFullWidth: false, - isDisabled: false, - }); - - this.image.mount($imageContainer); - this.slider.mount($sliderContainer); - this.input.mount($inputsContainer); - this.radioKG.mount($inputsContainer); - this.radioLB.mount($inputsContainer); - this.button.mount($container); - }, - - applyCssClasses() { - this.image.selected - .get('image-preview') - .classList.add('pet-weight-page__image'); - this.slider.selected - .get('range-slider') - .classList.add('pet-weight-page__slider'); - this.slider.selected - .get('range-slider-value') - .classList.add('pet-weight-page__value'); - this.input.selected - .get('input-text') - .classList.add('pet-weight-page__input'); - this.input.selected - .get('input-text-container') - .classList.add('pet-weight-page__input-container'); - this.radioKG.selected - .get('radio-container') - .classList.add('pet-weight-page__radio'); - this.radioLB.selected - .get('radio-container') - .classList.add('pet-weight-page__radio'); - this.button.selected.get('button').classList.add('pet-weight-page__button'); - }, - - setupEventListeners() { - this.slider.listen('value:change', (value) => { - this.weight = Number(value.toFixed(1)); - this.input.setValue(this.weight); - }); - - this.input.listen('value:change', (value) => { - const numericValue = parseFloat(value); - if (!numericValue.isNaN && this.weight !== numericValue) { - this.weight = numericValue; - this.slider.setValue(this.weight); - } - }); - - this.button.listen('click', () => { - const finalWeightUnit = this.weightUnit(); - const finalWeight = this.weight; - this.emit('weight', finalWeight, finalWeightUnit); - }); - }, - - weightUnit() { - return this.radioKG.isChecked() - ? this.radioKG.getValue() - : this.radioLB.getValue(); - }, -}); diff --git a/src/layouts/PetDexApp/pages/PetWeight/index.scss b/src/layouts/PetDexApp/pages/PetWeight/index.scss deleted file mode 100644 index ef3941a7..00000000 --- a/src/layouts/PetDexApp/pages/PetWeight/index.scss +++ /dev/null @@ -1,150 +0,0 @@ -@use '~styles/colors.scss' as colors; -@use '~styles/breakpoints.scss' as breakpoints; -@use '~styles/fonts.scss' as fonts; - -.pet-weight-page { - min-height: 100%; - - display: grid; - - place-items: center; - - &__content { - width: 100%; - - text-align: center; - } - - &__image-container { - width: max-content; - - display: inline-block; - - margin-bottom: 4rem; - } - - &__description { - font-family: fonts.$primaryFont; - } - - &__title { - color: colors.$gray800; - font-size: fonts.$xs; - font-weight: fonts.$medium; - } - - &__hint { - color: colors.$gray800; - font-size: 1.1rem; - font-weight: fonts.$regular; - - margin-top: 1.6rem; - } - - &__slider-container { - max-width: 100%; - - margin-top: 3rem; - } - - &__value { - margin-bottom: 0; - } - - &__inputs { - display: flex; - - justify-content: center; - } - - &__input { - display: none; - } - - &__radio { - margin-right: 1rem; - - &:last-child { - margin-right: 0; - } - } - - &__button { - width: 90%; - - margin-top: 1rem; - } -} - -@include breakpoints.from1024 { - .pet-weight-page { - align-items: flex-start; - - &__image-container { - margin-top: 3rem; - margin-bottom: 3rem; - } - - &__slider-container { - margin-top: 2rem; - } - - &__title { - font-size: fonts.$sm; - font-weight: fonts.$medium; - } - - &__hint { - font-size: fonts.$xs; - } - - &__inputs { - margin-top: 3rem; - margin-bottom: 2rem; - } - - &__input-container { - margin-right: 1rem; - } - - &__input { - display: block; - } - - &__radio { - margin-right: 1rem; - } - - &__button { - width: 40%; - } - } -} - -@include breakpoints.from1280 { - .pet-weight-page { - &__image-container { - margin-top: 4rem; - margin-bottom: 4rem; - } - - &__title { - font-size: fonts.$md; - font-weight: fonts.$semiBold; - } - - &__hint { - font-size: fonts.$sm; - } - - &__input-container { - width: 20%; - - margin-right: 2rem; - } - - &__button { - width: 45%; - } - } -} diff --git a/src/layouts/PetDexApp/pages/PetWeight/petWeightPage.spec.js b/src/layouts/PetDexApp/pages/PetWeight/petWeightPage.spec.js deleted file mode 100644 index ea9bc17e..00000000 --- a/src/layouts/PetDexApp/pages/PetWeight/petWeightPage.spec.js +++ /dev/null @@ -1,16 +0,0 @@ -import { describe, expect, it } from 'vitest'; -import PetWeightPage from './index'; - -const propsMock = { - petPhoto: 'https://via.placeholder.com/150', -}; - -describe('PetWeightPage', () => { - it('is a Function', () => { - expect(PetWeightPage).toBeInstanceOf(Function); - }); - - it.skip('returns an object', () => { - expect(new PetWeightPage(propsMock)).toBeInstanceOf(Object); - }); -}); diff --git a/src/layouts/PetDexApp/utils/scrollable-sidemenu.js b/src/layouts/PetDexApp/utils/scrollable-sidemenu.js deleted file mode 100644 index 87231742..00000000 --- a/src/layouts/PetDexApp/utils/scrollable-sidemenu.js +++ /dev/null @@ -1,42 +0,0 @@ -export default function initializeScrollable( - hamburger, - exitmenu, - itemsMenu, - home, -) { - const breakpointDesktop = 1024; - - function openMenu() { - home.classList.remove('home--exit-menu'); - home.classList.add('home--open-menu'); - } - - function closeMenu() { - home.classList.remove('home--open-menu'); - home.classList.add('home--exit-menu'); - } - - if (window.innerWidth < breakpointDesktop) { - hamburger.addEventListener('click', openMenu); - exitmenu.addEventListener('click', closeMenu); - } - - function activeClassMenu(selectedItem) { - itemsMenu.forEach((li) => { - li.classList.remove('side-menu-content__menuitens--active'); - }); - - selectedItem.classList.add('side-menu-content__menuitens--active'); - - if (window.innerWidth < breakpointDesktop) closeMenu(); - } - - itemsMenu.forEach((li) => { - li.addEventListener('click', activeClassMenu.bind(null, li)); - }); - - return { - openMenu, - closeMenu, - }; -} diff --git a/src/layouts/app/index.js b/src/layouts/app/index.js index 971a3542..193daa99 100644 --- a/src/layouts/app/index.js +++ b/src/layouts/app/index.js @@ -2,7 +2,6 @@ import { extractElements } from 'pet-dex-utilities'; import mainRouter from '../../router/main-router'; import { initializeSwiper } from '../../utils/swiper'; import Navigation from './components/Navigation'; -import NoPetRegirestedPage from './components/NoPetRegirestedPage'; import SideMenu from './components/SideMenu'; import initializeScrollable from './utils/scrollable-sidemenu'; import './index.scss'; @@ -20,10 +19,6 @@ document.addEventListener('DOMContentLoaded', () => { const navigation = new Navigation(); navigation.mount($navigation); - const $content = selected.get('content'); - const noPetRegirestedPage = new NoPetRegirestedPage(); - noPetRegirestedPage.mount($content); - const $hamburgerMenu = navigation.selected.get('hamburger-menu'); const $exitMenu = sideMenu.selected.get('exitMenu'); const $itemsMenu = sideMenu.selected.get('menuitens').querySelectorAll('li'); diff --git a/src/layouts/app/index.scss b/src/layouts/app/index.scss index c7c594eb..9bfc4947 100644 --- a/src/layouts/app/index.scss +++ b/src/layouts/app/index.scss @@ -8,8 +8,6 @@ height: 100dvh; overflow-x: hidden; - container-type: size; - display: grid; grid-template-areas: 'sidemenu nav' diff --git a/src/layouts/index.js b/src/layouts/index.js deleted file mode 100644 index c75896d4..00000000 --- a/src/layouts/index.js +++ /dev/null @@ -1,29 +0,0 @@ -import { extractElements } from 'pet-dex-utilities'; -import mainRouter from '../router/main-router'; -import { initializeSwiper } from '../utils/swiper'; -import Navigation from './PetDexApp/components/Navigation'; -import SideMenu from './PetDexApp/components/SideMenu'; -import initializeScrollable from './PetDexApp/utils/scrollable-sidemenu'; -import './index.scss'; - -document.addEventListener('DOMContentLoaded', () => { - const selected = extractElements([document.body]); - - const $home = selected.get('home'); - - const $sidemenu = selected.get('sidemenu'); - const sideMenu = new SideMenu(); - sideMenu.mount($sidemenu); - - const $navigation = selected.get('navigation'); - const navigation = new Navigation(); - navigation.mount($navigation); - - const $hamburgerMenu = navigation.selected.get('hamburger-menu'); - const $exitMenu = sideMenu.selected.get('exitMenu'); - const $itemsMenu = sideMenu.selected.get('menuitens').querySelectorAll('li'); - - initializeScrollable($hamburgerMenu, $exitMenu, $itemsMenu, $home); - initializeSwiper(); - mainRouter(); -}); diff --git a/src/layouts/index.scss b/src/layouts/index.scss deleted file mode 100644 index 885f8ddb..00000000 --- a/src/layouts/index.scss +++ /dev/null @@ -1,91 +0,0 @@ -@use '~styles/base.scss'; -@use '~styles/colors.scss' as colors; -@use '~styles/breakpoints.scss' as breakpoints; -@use '~styles/fonts.scss' as fonts; - -.home { - width: 200vw; - height: 100dvh; - overflow-x: hidden; - - display: grid; - grid-template-areas: - 'sidemenu nav' - 'sidemenu content'; - grid-template-rows: 8.1rem 1fr; - grid-template-columns: 100vw 100vw; - - background-color: colors.$primary600; - transform: translateX(-100vw); - - &--open-menu { - width: 100vw; - - transform: translateX(0); - - transition: transform 0.3s; - } - - &--exit-menu { - width: 200vw; - - transform: translateX(-100vw); - - transition: transform 0.3s; - } - - &__navigation { - display: flex; - grid-area: nav; - - align-items: center; - } - - &__sidemenu { - display: grid; - grid-area: sidemenu; - grid-template-rows: 8.1rem 1fr; - } - - &__content { - overflow: auto; - - grid-area: content; - - background-color: colors.$secondary100; - - padding-inline: 2rem; - padding-block: 3.2rem; - } - - &__content-page { - width: 100%; - height: 100%; - } -} - -@include breakpoints.from1024 { - .home { - width: 100vw; - - grid-template-areas: - 'sidemenu nav' - 'sidemenu content'; - grid-template-rows: 8.1rem 1fr; - grid-template-columns: 31.3rem 1fr; - - transform: translateX(0); - - &__content { - margin-inline: 2.4rem; - - margin-bottom: 2.4rem; - - border-radius: 1.6rem; - } - - &__sidemenu { - display: block; - } - } -}