diff --git a/.eslintrc.json b/.eslintrc.json index 0fbd960e..cca6d6b2 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,11 +1,9 @@ { "extends": ["airbnb-base"], - "plugins": ["prettier"], "env": { "browser": true }, "rules": { - "prettier/prettier": ["error", { "endOfLine": "auto" }], "no-console": "warn", "object-curly-newline": "off" } diff --git a/.prettierrc b/.prettierrc index 498428ae..00e8d420 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,5 @@ { - "trailingComma": "es5", + "trailingComma": "all", "useTabs": false, "tabWidth": 2, "semi": true, diff --git a/src/components/TextInput/index.scss b/src/components/TextInput/index.scss index e6a7701e..2bda8eb2 100644 --- a/src/components/TextInput/index.scss +++ b/src/components/TextInput/index.scss @@ -12,7 +12,7 @@ &.standard { padding: 0.65rem 1rem; - border: 1px solid #a3a3a3; + border: 1px solid rgb(163, 163, 163); border-radius: 8px; @@ -31,24 +31,24 @@ } &:focus { - border-color: #007bff; + border-color: rgb(0, 123, 255); filter: opacity(1); - outline-color: #007bff; + outline-color: rgb(0, 123, 255); } &.input-error { - border-color: #dc3545; + border-color: rgb(220, 53, 69); - background-color: #ee727e75; + background-color: rgba(238, 114, 126, 0.458); filter: opacity(0.75); - outline-color: #dc3545; + outline-color: rgb(220, 53, 69); } } &.outlined { padding: 0.5rem 0.35rem; - border-bottom: 2px solid #bfbfbf; + border-bottom: 2px solid rgb(191, 191, 191); border-color: transparent; outline: none; @@ -56,16 +56,16 @@ transition: border-color 0.3s ease-in-out; &:focus { - border-bottom-color: #007bff; + border-bottom-color: rgb(0, 123, 255); } &.input-error { - border-bottom-color: #dc3545; + border-bottom-color: rgb(220, 53, 69); filter: opacity(0.65); &::placeholder { - color: #dc3545; + color: rgb(220, 53, 69); } } diff --git a/src/components/button/index.js b/src/components/button/index.js new file mode 100644 index 00000000..2e52049e --- /dev/null +++ b/src/components/button/index.js @@ -0,0 +1,45 @@ +import { Component } from 'pet-dex-utilities'; +import './index.scss'; + +const events = ['click']; + +const html = ` + +`; + +export default function Button({ text = '', isFullWidth = false }) { + Component.call(this, { html, events }); + + this.setText(text); + this.setIsFullWidth(isFullWidth); + + const $button = this.selected.get('button'); + $button.addEventListener('click', () => { + this.click(); + }); +} + +Button.prototype = Object.assign(Button.prototype, Component.prototype, { + getText() { + return this.selected.get('button').textContent; + }, + + setText(text = '') { + this.selected.get('button').textContent = text; + this.emit('text:change', text); + }, + + isFullWidth() { + return this.selected.get('button').classList.has('button--block'); + }, + + setIsFullWidth(isFullWidth = false) { + const { classList } = this.selected.get('button'); + if (isFullWidth) classList.add('button--block'); + else classList.remove('button--block'); + }, + + click() { + this.emit('click'); + }, +}); diff --git a/src/components/button/index.scss b/src/components/button/index.scss new file mode 100644 index 00000000..d563cb29 --- /dev/null +++ b/src/components/button/index.scss @@ -0,0 +1,21 @@ +@use '~styles/colors.scss' as colors; + +.button { + font-family: 'Noto Sans', sans-serif; + color: rgb(255, 255, 255); + font-size: 1.6rem; + font-weight: 500; + + padding: 1.6rem; + border: unset; + + background-color: colors.$blue500; + border-radius: 1.4rem; + appearance: none; + + &--block { + width: 100%; + + display: block; + } +} diff --git a/src/home/components/NoPetRegirestedPage/images/no-pet-regirested-page.png b/src/home/components/NoPetRegirestedPage/images/no-pet-regirested-page.png new file mode 100644 index 00000000..48d4054f Binary files /dev/null and b/src/home/components/NoPetRegirestedPage/images/no-pet-regirested-page.png differ diff --git a/src/home/components/NoPetRegirestedPage/index.js b/src/home/components/NoPetRegirestedPage/index.js new file mode 100644 index 00000000..33d63046 --- /dev/null +++ b/src/home/components/NoPetRegirestedPage/index.js @@ -0,0 +1,37 @@ +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 NoPetRegirestedPage() { + Component.call(this, { html }); + + const $container = this.selected.get('container'); + + this.button = new Button({ + text: 'Cadastrar pet', + isFullWidth: true, + }); + + this.button.selected + .get('button') + .classList.add('no-pet-regirested-page__button'); + this.button.mount($container); +} + +NoPetRegirestedPage.prototype = Object.assign( + NoPetRegirestedPage.prototype, + Component.prototype, +); diff --git a/src/home/components/NoPetRegirestedPage/index.scss b/src/home/components/NoPetRegirestedPage/index.scss new file mode 100644 index 00000000..aefe4e58 --- /dev/null +++ b/src/home/components/NoPetRegirestedPage/index.scss @@ -0,0 +1,80 @@ +@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/home/components/SideMenu/index.js b/src/home/components/SideMenu/index.js new file mode 100644 index 00000000..2771bc6a --- /dev/null +++ b/src/home/components/SideMenu/index.js @@ -0,0 +1,17 @@ +import { Component } from 'pet-dex-utilities'; +import petUrl from '../../images/pet-dex.svg'; +import './index.scss'; + +const html = ` +
+
+ +
+
+`; + +export default function SideMenu() { + Component.call(this, { html }); +} + +SideMenu.prototype = Object.assign(SideMenu.prototype, Component.prototype); diff --git a/src/home/components/SideMenu/index.scss b/src/home/components/SideMenu/index.scss new file mode 100644 index 00000000..96f25b3a --- /dev/null +++ b/src/home/components/SideMenu/index.scss @@ -0,0 +1,11 @@ +.side-menu { + &__logo-container { + padding-block: 4rem 2rem; + + text-align: center; + } + + &__logo { + max-width: 100%; + } +} diff --git a/src/home/components/navigation/images/avatar.svg b/src/home/components/navigation/images/avatar.svg new file mode 100644 index 00000000..032e1219 --- /dev/null +++ b/src/home/components/navigation/images/avatar.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/home/components/navigation/images/bell.svg b/src/home/components/navigation/images/bell.svg new file mode 100644 index 00000000..0d372506 --- /dev/null +++ b/src/home/components/navigation/images/bell.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/home/components/navigation/images/exit.svg b/src/home/components/navigation/images/exit.svg new file mode 100644 index 00000000..09385386 --- /dev/null +++ b/src/home/components/navigation/images/exit.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/home/components/navigation/images/menu.svg b/src/home/components/navigation/images/menu.svg new file mode 100644 index 00000000..928eed22 --- /dev/null +++ b/src/home/components/navigation/images/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/home/components/navigation/index.js b/src/home/components/navigation/index.js new file mode 100644 index 00000000..f67ec21c --- /dev/null +++ b/src/home/components/navigation/index.js @@ -0,0 +1,36 @@ +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 = ` +
+
+ +
+
+
+ menu +
+
+ notifications +
+
+ user avatar +
+
+ exit button +
+
+
+`; + +export default function Navigation() { + Component.call(this, { html }); +} + +Navigation.prototype = Object.assign(Navigation.prototype, Component.prototype); diff --git a/src/home/components/navigation/index.scss b/src/home/components/navigation/index.scss new file mode 100644 index 00000000..51597104 --- /dev/null +++ b/src/home/components/navigation/index.scss @@ -0,0 +1,57 @@ +@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/home/images/pet-dex.svg b/src/home/images/pet-dex.svg new file mode 100644 index 00000000..255af074 --- /dev/null +++ b/src/home/images/pet-dex.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/home/index.html b/src/home/index.html index 7f3f70d0..b1974e35 100644 --- a/src/home/index.html +++ b/src/home/index.html @@ -5,9 +5,20 @@ Pet Hat - + + + + + -
+
+ + +
+
diff --git a/src/home/index.js b/src/home/index.js new file mode 100644 index 00000000..b11f4ddf --- /dev/null +++ b/src/home/index.js @@ -0,0 +1,21 @@ +import { extractElements } from 'pet-dex-utilities'; +import Navigation from './components/Navigation'; +import NoPetRegirestedPage from './components/NoPetRegirestedPage'; +import SideMenu from './components/SideMenu'; +import './index.scss'; + +document.addEventListener('DOMContentLoaded', () => { + const selected = extractElements([document.body]); + + 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 $content = selected.get('content'); + const noPetRegirestedPage = new NoPetRegirestedPage(); + noPetRegirestedPage.mount($content); +}); diff --git a/src/home/index.scss b/src/home/index.scss index 9ea4e0c8..d58d723e 100644 --- a/src/home/index.scss +++ b/src/home/index.scss @@ -1,6 +1,63 @@ -@use '../styles/base.scss'; +@use '~styles/base.scss'; +@use '~styles/colors.scss' as colors; +@use '~styles/breakpoints.scss' as breakpoints; -.home-main-container { - display: flex; - gap: 1rem; +.home { + width: 100vw; + height: 100vh; + + display: grid; + grid-template-areas: + 'nav' + 'content'; + grid-template-rows: 8.1rem 1fr; + grid-template-columns: 1fr; + + background-color: colors.$appColor; + + &__navigation { + display: flex; + grid-area: nav; + + align-items: center; + } + + &__sidemenu { + display: none; + padding-inline: 4.65rem; + } + + &__content { + overflow: auto; + + grid-area: content; + + background-color: colors.$appContentColor; + + padding-inline: 2rem; + padding-block: 3.2rem; + } +} + +@include breakpoints.from1024 { + .home { + grid-template-areas: + 'menu nav' + 'menu content'; + grid-template-rows: 8.1rem 1fr; + grid-template-columns: 31.3rem 1fr; + + &__content { + margin-inline: 2.4rem; + + margin-bottom: 2.4rem; + + border-radius: 1.6rem; + } + + &__sidemenu { + display: block; + grid-area: menu; + } + } } diff --git a/src/home/main.js b/src/home/main.js deleted file mode 100644 index afc5d344..00000000 --- a/src/home/main.js +++ /dev/null @@ -1,30 +0,0 @@ -import { extractElements } from 'pet-dex-utilities'; -import Card from '../components/Card'; -import './index.scss'; - -function renderCards(qty, $container) { - for (let i = 0; i < qty; i += 1) { - const card = new Card(); - card.mount($container); - card.setTitle(`Card ${i}`); - card.listen('purchase', () => { - console.log(`purchase de quem usa o componente, esse é o card ${i}`); - }); - - const $card = card.selected.get('card-button'); - - if (i === 2) { - card.disable(); - $card.classList.add('card-container__button--disabled'); - } else { - $card.classList.add('card-container__button--active'); - } - } -} - -document.addEventListener('DOMContentLoaded', () => { - const selected = extractElements([document.body]); - const $container = selected.get('container'); - - renderCards(5, $container); -}); diff --git a/src/index.html b/src/index.html new file mode 100644 index 00000000..354a1bb6 --- /dev/null +++ b/src/index.html @@ -0,0 +1,12 @@ + + + + + + Document + + + + Ir para Home + + diff --git a/src/styles/base.scss b/src/styles/base.scss index bfa6d87d..2a4851c2 100644 --- a/src/styles/base.scss +++ b/src/styles/base.scss @@ -1,10 +1,10 @@ -@use 'reset-css/sass/_reset.scss'; +@use 'reset-css/sass/reset.scss'; html, body { font-size: 62.5%; } -main { +.root { font-size: 1.6rem; } diff --git a/src/styles/breakpoints.scss b/src/styles/breakpoints.scss new file mode 100644 index 00000000..2b505548 --- /dev/null +++ b/src/styles/breakpoints.scss @@ -0,0 +1,7 @@ +$from1024SizeMin: 1024px; + +@mixin from1024() { + @media (min-width: #{$from1024SizeMin}) { + @content; + } +} diff --git a/src/styles/colors.scss b/src/styles/colors.scss new file mode 100644 index 00000000..3aa92cf1 --- /dev/null +++ b/src/styles/colors.scss @@ -0,0 +1,5 @@ +$appColor: rgb(0, 52, 89); +$appContentColor: rgb(255, 255, 255); +$gray800: rgb(57, 67, 79); +$gray600: rgb(128, 139, 154); +$blue500: rgb(27, 133, 243); diff --git a/vite.config.js b/vite.config.js index c7645bd9..fd20c5d5 100644 --- a/vite.config.js +++ b/vite.config.js @@ -17,8 +17,14 @@ export default defineConfig({ outDir: resolve(__dirname, 'dist'), rollupOptions: { input: { - main: resolve(__dirname, 'src/home/index.html'), + index: resolve(__dirname, 'src/index.html'), + home: resolve(__dirname, 'src/home/index.html'), }, }, }, + resolve: { + alias: { + '~styles': resolve(__dirname, 'src/styles'), + }, + }, });