From bc6364a4fc24fb3b9c4f53de49e444f256b2142c Mon Sep 17 00:00:00 2001 From: JonasGz Date: Thu, 18 Apr 2024 18:56:01 -0300 Subject: [PATCH] create: page general size pet - in progress --- src/home/index.js | 8 ++- src/home/index.scss | 4 +- src/home/pages/generalSize/index.js | 46 ++++++++++++++ src/home/pages/generalSize/index.scss | 87 +++++++++++++++++++++++++++ src/styles/colors.scss | 1 + src/styles/fonts.scss | 2 + 6 files changed, 144 insertions(+), 4 deletions(-) create mode 100644 src/home/pages/generalSize/index.js create mode 100644 src/home/pages/generalSize/index.scss diff --git a/src/home/index.js b/src/home/index.js index df911615..a07af66d 100644 --- a/src/home/index.js +++ b/src/home/index.js @@ -3,6 +3,7 @@ import Navigation from './components/Navigation'; import NoPetRegirestedPage from './components/NoPetRegirestedPage'; import SideMenu from './components/SideMenu'; import initializeScrollable from './utils/scrollable-sidemenu'; +import GeneralSize from './pages/generalSize'; import './index.scss'; document.addEventListener('DOMContentLoaded', () => { @@ -19,12 +20,15 @@ document.addEventListener('DOMContentLoaded', () => { navigation.mount($navigation); const $content = selected.get('content'); - const noPetRegirestedPage = new NoPetRegirestedPage(); - noPetRegirestedPage.mount($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'); initializeScrollable($hamburgerMenu, $exitMenu, $itemsMenu, $home); + + const generalSize = new GeneralSize(); + generalSize.mount($content); }); diff --git a/src/home/index.scss b/src/home/index.scss index 0f6d6ea2..7f763c6b 100644 --- a/src/home/index.scss +++ b/src/home/index.scss @@ -48,8 +48,8 @@ background-color: colors.$appContentColor; - padding-inline: 2rem; - padding-block: 3.2rem; + // padding-inline: 2rem; + // padding-block: 3.2rem; } } diff --git a/src/home/pages/generalSize/index.js b/src/home/pages/generalSize/index.js new file mode 100644 index 00000000..4f1ea628 --- /dev/null +++ b/src/home/pages/generalSize/index.js @@ -0,0 +1,46 @@ +import { Component } from 'pet-dex-utilities'; +import Button from '../../../components/Button'; +import UploadImage from '../../../components/UploadImage'; +import './index.scss'; + +const html = ` +
+
+
+
+
+
+
Qual é o tamanho do seu animal de estimação?
+
Ajuste de acordo com a realidade
+
+
+
+
+
+
+
+`; + +export default function GeneralSize() { + Component.call(this, { html }); + + const $uploadImage = this.selected.get('upload-image'); + const $button = this.selected.get('button'); + let valor = null; + + this.uploadImage = new UploadImage(); + this.uploadImage.mount($uploadImage); + + this.button = new Button({ + text: 'Continuar', + isFullWidth: true, + isDisabled: false, + }); + + this.button.mount($button); +} + +GeneralSize.prototype = Object.assign( + GeneralSize.prototype, + Component.prototype, +); diff --git a/src/home/pages/generalSize/index.scss b/src/home/pages/generalSize/index.scss new file mode 100644 index 00000000..70eb8161 --- /dev/null +++ b/src/home/pages/generalSize/index.scss @@ -0,0 +1,87 @@ +@use '~styles/colors.scss' as colors; +@use '~styles/fonts.scss' as fonts; +@use '~styles/breakpoints.scss' as breakpoints; + +.general-size { + height: 100%; + display: flex; + flex-direction: column; + + &__general-size-container { + display: flex; + justify-content: space-between; + flex-direction: column; + align-items: center; + height: 100%; + gap: 2.4rem; + padding-inline: 2rem; + padding-block: 3.2rem; + } + + &__upload-image-container { + padding: 3rem; + } + + &__upload-image { + } + + &__texts { + display: flex; + flex-direction: column; + gap: 0.4rem; + align-items: center; + } + + &__title { + font-family: fonts.$primaryFont; + font-weight: fonts.$medium; + font-style: fonts.$normal; + font-size: fonts.$xs; + color: colors.$gray800; + line-height: 2rem; + } + + &__text { + font-family: fonts.$tertiaryFont; + font-weight: fonts.$regular; + font-style: fonts.$normal; + font-size: fonts.$xxs; + color: colors.$gray700; + line-height: 2rem; + } + + &__slider { + height: 20rem; + } + + &__container-button { + border-radius: 7px; + box-shadow: 0 -0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25); + display: flex; + justify-content: center; + align-items: center; + padding: 2.4rem; + } + + &__button { + width: 42rem; + } +} + +@include breakpoints.from1024 { + .general-size { + &__title { + font-size: 1.8rem; + line-height: 2.6rem; + font-weight: fonts.$medium; + } + &__text { + line-height: 2.2rem; + font-style: fonts.$normal; + } + &__container-button { + border-radius: none; + box-shadow: none; + } + } +} diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 46d49a1d..1dc655fd 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -5,6 +5,7 @@ $grey150: rgb(236, 239, 242); $gray200: rgb(217, 223, 230); $gray800: rgb(57, 67, 79); $gray600: rgb(128, 139, 154); +$gray700: rgba(96, 104, 115, 1); $blue500: rgb(27, 133, 243); $blue600: rgb(18, 104, 204); $yellow500: rgb(255, 197, 66); diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss index 71937419..e0e94f98 100644 --- a/src/styles/fonts.scss +++ b/src/styles/fonts.scss @@ -1,6 +1,8 @@ $primaryFont: 'Montserrat', sans-serif; $secondaryFont: 'Wix Madefor Display', sans-serif; +$tertiaryFont: 'Noto Sans'; +$xxs: 1.2rem; $xs: 1.4rem; $sm: 1.6rem; $md: 2rem;