Skip to content

Commit

Permalink
fix: petvetpage and vacine improvments
Browse files Browse the repository at this point in the history
  • Loading branch information
@juliaam
juliaam committed May 20, 2024
1 parent cc1d759 commit 3a50e04
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 64 deletions.
4 changes: 2 additions & 2 deletions src/components/Vaccine/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ const html = `
</div>
</div>
</div>
<div class="vaccine__list-group">
<div class="vaccine__sections" data-select="group"> </div>
<div class="vaccine__scroll">
<div class="vaccine__sections" data-select="group"> </div>
</div>
</div>
`;
Expand Down
20 changes: 7 additions & 13 deletions src/components/Vaccine/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
@use '~styles/breakpoints.scss' as breakpoints;

.vaccine {
overflow: auto;

display: flex;
flex-direction: column;

Expand All @@ -16,14 +18,6 @@
box-shadow: rgb(50, 50, 71);
border-radius: 1.8rem;

&__sections {
display: flex;
flex-direction: column;
gap: 2rem;

margin-right: 1rem;
}

&__header {
display: flex;

Expand Down Expand Up @@ -84,9 +78,13 @@
display: none;
}

&__list-group {
&__scroll {
overflow-y: auto;
}

&__sections {
margin-right: 2rem;
}
}

@include breakpoints.from667 {
Expand All @@ -102,9 +100,5 @@
&__add-vacine-text {
display: block;
}

&__sections {
margin-right: 2rem;
}
}
}
61 changes: 34 additions & 27 deletions src/home/components/PetvetPage/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,44 @@ import { Component } from 'pet-dex-utilities';
// import TextInput from '../../../components/TextInput';
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 { listenBreakpoint } from '../../../utils/breakpoints/breakpoints';

import './index.scss';

const html = `
<div data-select="container" class="petvet-page">
<div class="petvet-page__header">
<p class="petvet-page__header--text">Conte-nos um pouco mais do seu animal</p>
<p class="petvet-page__header--subtext">Seu pet já foi vacinado? Conta pra gente que mês ou ano que você costuma comemorar o aniversário dele! </p>
</div>
<div class="petvet-page__card-group">
<div class="petvet-page__card">
<div class="petvet-page__card-header">
<a href="#"><img class="petvet-page__img" src="${estetoscopio}" alt="estetoscopio"></a>
<p class="petvet-page__card-text">O seu pet amigo foi castrado?</p>
<div class="petvet-page__radio-group" data-select="special-care">
</div>
</div>
</div>
<div class="petvet-page__card">
<div class="petvet-page__card-header">
<div>
<a href="#"><img class="petvet-page__img" src="${cuidadosEspeciais}" alt="cuidados especiais"></a>
</div>
<div>
<p class="petvet-page__card-text">Cuidados especiais</p>
<div class="petvet-page__radio-group" data-select="registered">
<div data-select="container" class="petvet-page">
<div class="petvet-page__header">
<p class="petvet-page__header--text">Conte-nos um pouco mais do seu animal</p>
<p class="petvet-page__header--subtext">Seu pet já foi vacinado? Conta pra gente que mês ou ano que você costuma comemorar o aniversário dele!</p>
</div>
<div class="petvet-page__card-group" data-select="card-group">
<div class="petvet-page__card">
<div class="petvet-page__card-header">
<div>
<a href="#"><img class="petvet-page__img" src="${estetoscopio}" alt="estetoscopio"></a>
</div>
<div class="petvet-page__card-content">
<p>O seu pet amigo foi castrado?</p>
<div data-select="registered"></div>
</div>
</div>
</div>
<div class="petvet-page__card">
<div class="petvet-page__card-header">
<div class="petvet-page__icon-text">
<a href="#"><img class="petvet-page__img" src="${cuidadosEspeciais}" alt="cuidados especiais"></a>
</div>
<div class="petvet-page__card-content">
<p>Cuidados especiais</p>
<div data-select="special-care"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;

const events = ['value'];
Expand All @@ -50,9 +52,11 @@ function createAndMount({ name, text, mountTo }) {

export default function PetVetPage() {
Component.call(this, { html, events });

const $container = this.selected.get('container');
const $specialCare = this.selected.get('special-care');
const $registered = this.selected.get('registered');
const $cardGroup = this.selected.get('card-group');

const form = {
isRegistered: undefined,
Expand Down Expand Up @@ -83,9 +87,12 @@ export default function PetVetPage() {
});
});

this.vaccine = new Vaccine();
this.vaccine.mount($cardGroup);

this.button = new Button({
text: 'Concluir',
isFullWidth: true,
isFullWidth: false,
isDisabled: false,
});
this.button.mount($container);
Expand Down
67 changes: 45 additions & 22 deletions src/home/components/PetvetPage/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
@use '~styles/breakpoints' as breakpoints;

.petvet-page {
height: 100%;

display: flex;
flex-direction: column;

Expand All @@ -17,15 +19,15 @@
font-family: fonts.$primaryFont;
color: colors.$gray800;
font-size: 1.8rem;
font-weight: fonts.$medium;
font-weight: fonts.$semiBold;

line-height: 2.6;
}

&--subtext {
font-family: fonts.$notoSansFont;
color: colors.$gray700;
font-size: fonts.$xs;
font-size: fonts.$sm;
font-weight: fonts.$regular;

line-height: 2.2;
Expand All @@ -36,7 +38,9 @@
display: flex;
flex-direction: column;

gap: 2.4rem;
gap: 1.6rem;

margin-bottom: 1rem;
}

&__card {
Expand All @@ -48,7 +52,7 @@

padding: 1.6rem;

box-shadow: 0 0 2px 2px rgba(12, 26, 75, 0.08);
box-shadow: 0 0 2px 2px rgba(50, 50, 71, 0.04);
border-radius: 1.4rem;
}

Expand All @@ -57,8 +61,16 @@
gap: 1rem;

align-items: center;
}

&__card-content {
width: 100%;

display: flex;

flex-direction: column;

justify-content: space-between;
gap: 2rem;
}

&__img {
Expand All @@ -69,6 +81,12 @@

align-items: center;
}

&__button {
width: min(100%, 42rem);

margin-top: auto;
}
}

@include breakpoints.from667 {
Expand All @@ -82,35 +100,40 @@
align-items: center;
}

&__card-text-icon {
&__card {
padding: 2rem;

border: 1px solid colors.$gray150;

box-shadow: none;
border-radius: 1.8rem;
}

&__card-header {
display: flex;
gap: 2rem;

align-items: center;

font-family: fonts.$primaryFont;
color: colors.$gray800;
font-size: 1.8rem;
font-weight: fonts.$semiBold;
}

&__vaccine {
min-width: 63rem;
&__card-content {
flex-direction: row;

box-sizing: border-box;
}
align-items: center;

&__button {
max-width: 42rem;
justify-content: space-between;
}

&__card {
padding: 2rem;
&__header {
&--subtext {
font-size: fonts.$sm;
}
}

border: 1px solid colors.$gray150;
&__card-group {
overflow: auto;

box-shadow: none;
border-radius: 1.8rem;
gap: 2.4rem;
}
}
}

0 comments on commit 3a50e04

Please sign in to comment.