Skip to content

Commit 5ca626e

Browse files
cocotimecocotime
committed
🐻
1 parent 6881639 commit 5ca626e

12 files changed

+330
-30
lines changed

‎src/App.vue

+18
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<router-link class="header" to="/">
33
<h1 class="name">PET HEALTH</h1>
4+
<img class="heart" alt="heart" src="./assets/heart.svg" />
45
</router-link>
56
<div class="subheader" v-if="$route && $route.name !== 'choose-pet'">
67
<button
@@ -127,4 +128,21 @@ select {
127128
left: 20px;
128129
padding: 0;
129130
}
131+
.heart {
132+
filter: brightness(0) saturate(100%) invert(99%) sepia(53%) saturate(0%)
133+
hue-rotate(226deg) brightness(109%) contrast(101%);
134+
width: 20px;
135+
height: 18px;
136+
fill: white;
137+
margin-left: 10px;
138+
margin-top: 2px;
139+
}
140+
.no-data {
141+
margin-block-start: 50px;
142+
font-size: 18px;
143+
}
144+
.empty-icon {
145+
width: 100px;
146+
margin-block-end: 20px;
147+
}
130148
</style>

‎src/assets/heart.svg

+22
Loading

‎src/assets/medical-big.png

19.5 KB
Loading

‎src/assets/weight-big.png

20 KB
Loading

‎src/components/BrowseOptions.vue

+71-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
<template>
2-
<div class="main-container">
2+
<div
3+
class="main-container"
4+
:class="currentPet && checkBirthday() && 'additional'"
5+
>
6+
<div class="birthday-banner" v-if="currentPet && checkBirthday()">
7+
<p>Today is {{ $store?.state?.currentPet?.name }}'s birthday! 🥳</p>
8+
</div>
39
<ul class="browse-options">
410
<li>
511
<router-link to="/info" class="option-link">
612
<img alt="" class="icon" src="../assets/document.png" />
713
<div class="title">Info</div>
814
</router-link>
915
</li>
10-
<li>
16+
<li class="disabled">
1117
<router-link to="/" class="option-link">
1218
<img alt="" class="icon" src="../assets/shot.png" />
1319
<div class="title">Vaccines</div>
@@ -20,10 +26,10 @@
2026
</router-link>
2127
</li>
2228
<li>
23-
<router-link to="/" class="option-link">
29+
<a @click="goToMedicalRecords()" class="option-link">
2430
<img alt="" class="icon" src="../assets/medical.png" />
2531
<div class="title">Medical records</div>
26-
</router-link>
32+
</a>
2733
</li>
2834
</ul>
2935
<div class="icons">
@@ -57,11 +63,47 @@
5763
<script>
5864
export default {
5965
name: "BrowseOptions",
66+
data() {
67+
return {
68+
birthdayBanner: false,
69+
};
70+
},
71+
computed: {
72+
currentPet() {
73+
return this.$store.state.currentPet;
74+
},
75+
},
76+
methods: {
77+
goToMedicalRecords() {
78+
this.$store.dispatch("getMedicalRecords");
79+
this.$router.push({ name: "medicalRecords" });
80+
},
81+
checkBirthday() {
82+
if (this.currentPet) {
83+
const birthday = new Date(
84+
this.currentPet.birthday
85+
).toLocaleDateString();
86+
const today = new Date().toLocaleDateString();
87+
return birthday === today;
88+
}
89+
},
90+
},
6091
};
6192
</script>
6293

6394
<style scoped>
95+
.main-container {
96+
block-size: calc(100vh - 118px);
97+
display: grid;
98+
grid-template-rows: 1fr auto;
99+
justify-content: space-between;
100+
101+
&.additional {
102+
grid-template-rows: auto 1fr auto;
103+
}
104+
}
64105
.browse-options {
106+
align-self: start;
65107
column-gap: 10px;
66108
row-gap: 10px;
67109
box-sizing: border-box;
@@ -90,6 +132,15 @@ export default {
90132
background-color: #ff738c;
91133
opacity: 0.8;
92134
}
135+
136+
&.disabled {
137+
pointer-events: none;
138+
opacity: 0.5;
139+
140+
&:hover {
141+
cursor: not-allowed;
142+
}
143+
}
93144
}
94145
.option-link {
95146
text-decoration: none;
@@ -106,12 +157,27 @@ export default {
106157
}
107158
}
108159
.icons {
109-
margin-block-start: 580px;
110160
color: #1b3038;
161+
margin-block-end: 25px;
111162
112163
& a {
113164
color: #ffffff;
114165
text-transform: lowercase;
115166
}
116167
}
168+
.birthday-banner {
169+
background: #ff738c;
170+
color: #ffffff;
171+
margin-block: 10px 20px;
172+
inline-size: calc(100% - 40px);
173+
margin-inline: 20px;
174+
padding: 20px;
175+
box-sizing: border-box;
176+
display: flex;
177+
justify-content: center;
178+
179+
& p {
180+
font-size: 18px;
181+
}
182+
}
117183
</style>

‎src/components/ChoosePet.vue

+25-6
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
<p class="pet-name">{{ pet.name }}</p>
1313
</div>
1414
</div>
15+
<a @click="goToAddPet()" class="pet add-btn"><span>Add pet</span></a>
1516
</div>
16-
<a @click="goToAddPet()" class="primary-btn">Add pet</a>
1717
</div>
1818
</template>
1919

@@ -75,7 +75,7 @@ export default {
7575
.pet-info {
7676
color: #ffffff;
7777
position: absolute;
78-
bottom: -30px;
78+
bottom: -29px;
7979
inline-size: 100%;
8080
background-color: #ff738c;
8181
text-transform: uppercase;
@@ -101,9 +101,28 @@ export default {
101101
block-size: 100px;
102102
margin-inline-end: 10px;
103103
}
104-
.primary-btn {
105-
inline-size: calc(100% - 70px);
106-
margin-block-start: 20px;
107-
text-decoration: none;
104+
.add-btn {
105+
color: #ffffff;
106+
display: flex;
107+
justify-content: center;
108+
align-items: center;
109+
text-transform: uppercase;
110+
background: #ff738c;
111+
position: relative;
112+
113+
&::after {
114+
content: "";
115+
background: #ff738c;
116+
position: absolute;
117+
block-size: 27px;
118+
inline-size: 100%;
119+
bottom: -29px;
120+
outline: 2px solid #ff738c;
121+
border-radius: 0 0 4px 4px;
122+
}
123+
124+
& span {
125+
margin-block-start: 20px;
126+
}
108127
}
109128
</style>

‎src/components/MedicalRecords.vue

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<template>
2+
<div class="main-container">
3+
<ul v-if="medicalRecordsData">
4+
<li class="row" v-for="data in medicalRecordsData" :key="data.id">
5+
<div class="header">
6+
<p class="date">{{ data.date }}</p>
7+
<p v-if="data.place" class="place">{{ data.place }}</p>
8+
</div>
9+
<div class="content">
10+
<div class="title">{{ data.title }}</div>
11+
<div class="description">{{ data.description }}</div>
12+
<div v-if="data.prescription" class="prescription">
13+
<span class="bold">Prescription:</span> {{ data.prescription }}
14+
</div>
15+
<div v-if="data.vet" class="vet">
16+
<span class="bold">Vet:</span> {{ data.vet }}
17+
</div>
18+
</div>
19+
</li>
20+
</ul>
21+
<div v-else class="no-data">
22+
<img alt="" class="empty-icon" src="../assets/medical-big.png" />
23+
<p>There aren't medical records yet</p>
24+
</div>
25+
</div>
26+
</template>
27+
28+
<script>
29+
export default {
30+
name: "MedicalRecords",
31+
computed: {
32+
medicalRecordsData() {
33+
return this.$store.state.medicalRecords;
34+
},
35+
},
36+
};
37+
</script>
38+
39+
<style scoped>
40+
.header {
41+
justify-content: space-between;
42+
padding-inline: 10px;
43+
}
44+
.date {
45+
font-size: 14px;
46+
font-weight: 500;
47+
}
48+
.place {
49+
font-size: 14px;
50+
}
51+
.title {
52+
font-weight: 500;
53+
font-size: 20px;
54+
margin-block: 5px;
55+
}
56+
.description {
57+
margin-block: 15px;
58+
}
59+
.prescription {
60+
margin-block: 10px;
61+
}
62+
.bold {
63+
font-weight: 500;
64+
}
65+
ul {
66+
list-style-type: none;
67+
padding-inline-start: 0;
68+
margin-block-start: 0;
69+
margin-block-end: 0;
70+
padding-inline: 20px;
71+
}
72+
.row {
73+
background-color: #ffffff;
74+
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
75+
box-sizing: border-box;
76+
display: flex;
77+
flex-direction: column;
78+
margin-block-end: 20px;
79+
text-align: left;
80+
}
81+
.content {
82+
padding-inline: 10px;
83+
padding-block: 10px 15px;
84+
}
85+
</style>

‎src/components/NewPet.vue

+1
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@ export default {
135135
}
136136
.primary-btn {
137137
inline-size: 100%;
138+
margin-block-start: 10px;
138139
}
139140
.error {
140141
color: red;

‎src/components/PetInfo.vue

+19-12
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,33 @@
11
<template>
22
<div class="main-container">
33
<ul v-if="currentPet">
4-
<li>
5-
<div class="label">Name</div>
6-
<div class="value">{{ currentPet.name }}</div>
7-
</li>
8-
<li>
4+
<li v-if="currentPet.gender">
95
<div class="label">Gender</div>
106
<div class="value">{{ currentPet.gender }}</div>
117
</li>
12-
<li>
8+
<li v-if="currentPet.animalType">
139
<div class="label">Animal</div>
1410
<div class="value">{{ currentPet.animalType }}</div>
1511
</li>
16-
<li>
12+
<li v-if="currentPet.breed">
1713
<div class="label">Breed</div>
1814
<div class="value">{{ currentPet.breed }}</div>
1915
</li>
20-
<li>
16+
<li v-if="currentPet.color">
2117
<div class="label">Color</div>
2218
<div class="value">{{ currentPet.color }}</div>
2319
</li>
24-
<li>
20+
<li v-if="currentPet.weight">
2521
<div class="label">Weight</div>
2622
<div class="value">{{ currentPet.weight }}kg</div>
2723
</li>
28-
<li>
24+
<li v-if="currentPet.chipNumber">
2925
<div class="label">Chip number</div>
3026
<div class="value">{{ currentPet.chipNumber }}</div>
3127
</li>
32-
<li>
28+
<li v-if="currentPet.birthday">
3329
<div class="label">Birthday</div>
34-
<div class="value">{{ currentPet.birthday }}</div>
30+
<div class="value">{{ getDate(currentPet.birthday) }}</div>
3531
</li>
3632
</ul>
3733
<router-link to="/new" class="primary-btn">Edit info</router-link>
@@ -46,6 +42,11 @@ export default {
4642
currentPet: this.$store.state.currentPet,
4743
};
4844
},
45+
methods: {
46+
getDate(date) {
47+
return new Date(date).toLocaleDateString();
48+
},
49+
},
4950
};
5051
</script>
5152

@@ -72,4 +73,10 @@ li {
7273
.label {
7374
font-weight: bold;
7475
}
76+
.primary-btn {
77+
inline-size: calc(100% - 60px);
78+
box-sizing: border-box;
79+
margin-block-start: 20px;
80+
text-decoration: none;
81+
}
7582
</style>

0 commit comments

Comments
 (0)