Skip to content

Commit a0fb4c8

Browse files
jeffcheemajeffcheema
committed
fixed grid system
1 parent bc48e85 commit a0fb4c8

File tree

4 files changed

+115
-115
lines changed

4 files changed

+115
-115
lines changed

‎src/pages/AddDog/AddDog.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ import AdopterAddressSchema from './Form/FormSchemas/AdopterAddressSchema';
3030
import DogInfoSchema from './Form/FormSchemas/DogInfoSchema';
3131
import NotesSchema from './Form/FormSchemas/NotesSchema';
3232
import FacilityInfoSchema from './Form/FormSchemas/FacilityInfoSchema';
33-
3433
import FinancialInfoSchema from './Form/FormSchemas/FinancialInfoSchema';
3534
import ShowTags from './ShowTags';
3635
import { useForm } from 'react-hook-form';
36+
3737
const AddDog = () => {
3838
const { backend } = useBackend();
3939
const Navigate = useNavigate();
@@ -128,7 +128,7 @@ const AddDog = () => {
128128
</MenuButton>
129129
<MenuList>
130130
<TagSetup tagBoolean={serviceTag} tagName="Service" setTag={setServiceTag} />
131-
<TagSetup tagBoolean={therapyTag} tagName="Therapy" setTag={setTherapyTag} />
131+
<TagSetup tagBoolean={therapyTag} tagName="Pets" setTag={setTherapyTag} />
132132
<TagSetup tagBoolean={staffAdoptionTag} tagName="Stf Adpt" setTag={setStaffAdoptionTag} />
133133
<TagSetup tagBoolean={specialTag} tagName="Other" setTag={setSpecialTag} />
134134
<TagSetup tagBoolean={deceasedTag} tagName="Decsd" setTag={setDeceasedTag} />

‎src/pages/AddDog/AddDog.yup.jsx

-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import * as yup from 'yup';
22

33
export default yup.object().shape({
4-
// dogid
5-
// Dog Info Section
64
dogname: yup.string().required('Dog name is required'),
75
age: yup.number().required('Age is required'),
86
breed: yup.string().required('Breed is required'),

‎src/pages/Dogs/AdoptionLogFacilityCards.jsx

+112-110
Original file line numberDiff line numberDiff line change
@@ -29,121 +29,123 @@ const AdoptionLogFacilityCards = ({
2929

3030
// const { shelter } = info;
3131
return (
32-
<SimpleGrid columns={[1, 2, null, 3]} spacing={10} mt={10} mb={10}>
33-
{dogs.map(
34-
({
35-
dogid,
36-
dogname,
37-
graddate,
38-
age,
39-
breed,
40-
adoptername,
41-
adoptemail,
42-
adopterphone,
43-
addrline,
44-
adoptcity,
45-
adoptstate,
46-
zip,
47-
image,
48-
...rest
49-
}) => {
50-
const tags = Object.keys(possibleDogTags).filter(tag => rest[tag]);
51-
return (
52-
<Card maxW="md" key={dogid}>
53-
<CardHeader>
54-
<Flex direction="column">
55-
<Flex justifyContent="space-between">
56-
<Flex direction="row" gap={1}>
57-
<Image
58-
boxSize={10}
59-
borderRadius="500px"
60-
src={image || 'http://via.placeholder.com/250x250'}
61-
alt="Segun Adebayo"
62-
/>
63-
<Flex direction="column">
64-
<Text fontWeight="bold" fontSize="md">
65-
{dogname}
66-
</Text>
67-
<Text fontSize="sm" color="gray.500">
68-
Grad Age: {calculateDogAgeAtGraduation(graddate, age)}
69-
</Text>
70-
<Text fontSize="sm" color="gray.500">
71-
Breed: {breed}
72-
</Text>
32+
<Flex justifyContent="center" alignItems="center" width="100%">
33+
<SimpleGrid minChildWidth={225} spacing={3} mt={10} mb={10} width="100%">
34+
{dogs.map(
35+
({
36+
dogid,
37+
dogname,
38+
graddate,
39+
age,
40+
breed,
41+
adoptername,
42+
adoptemail,
43+
adopterphone,
44+
addrline,
45+
adoptcity,
46+
adoptstate,
47+
zip,
48+
image,
49+
...rest
50+
}) => {
51+
const tags = Object.keys(possibleDogTags).filter(tag => rest[tag]);
52+
return (
53+
<Card width={225} key={dogid} marginX="auto">
54+
<CardHeader>
55+
<Flex direction="column">
56+
<Flex justifyContent="space-between">
57+
<Flex direction="row" gap={1}>
58+
<Image
59+
boxSize={10}
60+
borderRadius="500px"
61+
src={image || 'http://via.placeholder.com/250x250'}
62+
alt="Segun Adebayo"
63+
/>
64+
<Flex direction="column">
65+
<Text fontWeight="bold" fontSize="md">
66+
{dogname}
67+
</Text>
68+
<Text fontSize="sm" color="gray.500">
69+
Grad Age: {calculateDogAgeAtGraduation(graddate, age)}
70+
</Text>
71+
<Text fontSize="sm" color="gray.500">
72+
Breed: {breed}
73+
</Text>
74+
</Flex>
7375
</Flex>
76+
<Checkbox
77+
marginBottom="auto"
78+
isChecked={selected.includes(dogid)}
79+
onChange={e => {
80+
e.stopPropagation();
81+
toggleCheck(dogid);
82+
}}
83+
/>
7484
</Flex>
75-
<Checkbox
76-
marginBottom="auto"
77-
isChecked={selected.includes(dogid)}
78-
onChange={e => {
79-
e.stopPropagation();
80-
toggleCheck(dogid);
81-
}}
82-
/>
85+
<SimpleGrid minChildWidth={30} spacing={1}>
86+
{tags.map(tag => (
87+
<Tag
88+
maxW={70}
89+
textAlign="center"
90+
key={tag}
91+
size="sm"
92+
variant="solid"
93+
color="white"
94+
bg={possibleDogTags[tag].color}
95+
>
96+
{possibleDogTags[tag].display}
97+
</Tag>
98+
))}
99+
</SimpleGrid>
83100
</Flex>
84-
<SimpleGrid minChildWidth={30} spacing={1}>
85-
{tags.map(tag => (
86-
<Tag
87-
maxW={70}
88-
textAlign="center"
89-
key={tag}
90-
size="sm"
91-
variant="solid"
92-
color="white"
93-
bg={possibleDogTags[tag].color}
94-
>
95-
{possibleDogTags[tag].display}
96-
</Tag>
97-
))}
98-
</SimpleGrid>
99-
</Flex>
100-
</CardHeader>
101-
<CardBody borderTopWidth={1}>
102-
<VStack spacing={1} align="stretch">
103-
<Stack direction="row">
104-
<Text fontWeight="bold" fontSize="md" textDecoration="underline">
105-
Facility:
101+
</CardHeader>
102+
<CardBody borderTopWidth={1}>
103+
<VStack spacing={1} align="stretch">
104+
<Stack direction="row">
105+
<Text fontWeight="bold" fontSize="md" textDecoration="underline">
106+
Facility:
107+
</Text>
108+
<Text fontSize="md" margin="auto">
109+
{facilityName}
110+
</Text>
111+
</Stack>
112+
<Text fontSize="md" textDecoration="underline">
113+
Adopter
114+
</Text>
115+
<Text fontSize="sm" color="gray.500">
116+
Name: {adoptername}
117+
</Text>
118+
<Text fontSize="sm" color="gray.500">
119+
Email: {adoptemail}
120+
</Text>
121+
<Text fontSize="sm" color="gray.500">
122+
Phone: {adopterphone}
106123
</Text>
107-
<Text fontSize="md" margin="auto">
108-
{facilityName}
124+
<Text fontSize="sm" color="gray.500">
125+
Address: {addrline}, {adoptcity}, {adoptstate} {zip}
109126
</Text>
110-
</Stack>
111-
<Text fontSize="md" textDecoration="underline">
112-
Adopter
113-
</Text>
114-
<Text fontSize="sm" color="gray.500">
115-
Name: {adoptername}
116-
</Text>
117-
<Text fontSize="sm" color="gray.500">
118-
Email: {adoptemail}
119-
</Text>
120-
<Text fontSize="sm" color="gray.500">
121-
Phone: {adopterphone}
122-
</Text>
123-
<Text fontSize="sm" color="gray.500">
124-
Address: {addrline}, {adoptcity}, {adoptstate} {zip}
125-
</Text>
126-
</VStack>
127-
</CardBody>
128-
<CardFooter>
129-
<Button
130-
marginLeft="auto"
131-
size="sm"
132-
onClick={e => {
133-
e.stopPropagation();
134-
Navigate(`/dog/${dogid}`);
135-
}}
136-
bg="#319795"
137-
color="white"
138-
>
139-
View More
140-
</Button>
141-
</CardFooter>
142-
</Card>
143-
);
144-
},
145-
)}
146-
</SimpleGrid>
127+
</VStack>
128+
</CardBody>
129+
<CardFooter>
130+
<Button
131+
marginLeft="auto"
132+
size="sm"
133+
onClick={e => {
134+
e.stopPropagation();
135+
Navigate(`/dog/${dogid}`);
136+
}}
137+
bg="#319795"
138+
color="white"
139+
>
140+
View More
141+
</Button>
142+
</CardFooter>
143+
</Card>
144+
);
145+
},
146+
)}
147+
</SimpleGrid>
148+
</Flex>
147149
);
148150
};
149151

‎src/pages/ViewDog/ViewDog.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ const AddDog = () => {
188188
</MenuButton>
189189
<MenuList>
190190
<TagSetup tagBoolean={serviceTag} tagName="Service" setTag={setServiceTag} />
191-
<TagSetup tagBoolean={therapyTag} tagName="Therapy" setTag={setTherapyTag} />
191+
<TagSetup tagBoolean={therapyTag} tagName="Pets" setTag={setTherapyTag} />
192192
<TagSetup tagBoolean={staffAdoptionTag} tagName="Stf Adpt" setTag={setStaffAdoptionTag} />
193193
<TagSetup tagBoolean={specialTag} tagName="Other" setTag={setSpecialTag} />
194194
<TagSetup tagBoolean={deceasedTag} tagName="Decsd" setTag={setDeceasedTag} />

0 commit comments

Comments
 (0)