Skip to content

Commit b0f7f98

Browse files
luccas-spechtMatheusDubin
luccas-specht
authored and
MatheusDubin
committed
Fix: mobile UI has broken for mobile devices (#22)
*Fix: mobile UI has broken for mobile devices * fix: remove chip as fixed as no wrap property * chore: add shelter card clickable * chore: remove Fragment component * build: add set sm as max mobile dimension sm: 425px * style: add responsive layout
1 parent 3e749ee commit b0f7f98

File tree

7 files changed

+95
-74
lines changed

7 files changed

+95
-74
lines changed

‎src/components/CardAboutShelter/CardAboutShelter.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,16 @@ const CardAboutShelter = (props: ICardAboutShelter) => {
2323
<div className="text-[#646870] font-medium">Sobre o abrigo</div>
2424
<div className="flex flex-col flex-wrap gap-3">
2525
<InfoRow icon={<Home />} label={shelter.address} />
26+
<InfoRow
27+
icon={<PawPrint />}
28+
label={
29+
check(shelter.petFriendly)
30+
? shelter.petFriendly
31+
? 'O abrigo aceita animais'
32+
: 'O abrigo não aceita animais'
33+
: 'Não informado se aceita animais'
34+
}
35+
/>
2636
<InfoRow
2737
icon={<HandHeart />}
2838
label="Pessoas abrigadas:"
@@ -41,16 +51,6 @@ const CardAboutShelter = (props: ICardAboutShelter) => {
4151
: 'Não informado'
4252
}
4353
/>
44-
<InfoRow
45-
icon={<PawPrint />}
46-
label={
47-
check(shelter.petFriendly)
48-
? shelter.petFriendly
49-
? 'O abrigo aceita animais'
50-
: 'O abrigo não aceita animais'
51-
: 'Não informado se aceita animais'
52-
}
53-
/>
5454
<InfoRow
5555
icon={<Smartphone />}
5656
label="Contato:"

‎src/components/CardAboutShelter/components/InfoRow/InfoRow.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { Fragment } from 'react';
2-
3-
import { IInfoRowProps } from './types';
42
import { cn } from '@/lib/utils';
3+
import { IInfoRowProps } from './types';
54

65
const InfoRow = React.forwardRef<HTMLDivElement, IInfoRowProps>(
76
(props, ref) => {
@@ -23,16 +22,22 @@ const InfoRow = React.forwardRef<HTMLDivElement, IInfoRowProps>(
2322
return (
2423
<div
2524
ref={ref}
26-
className={cn('flex items-start gap-2 font-medium w-full', className)}
25+
className={cn(
26+
'flex items-start gap-2 font-medium w-full',
27+
'md:flex',
28+
className
29+
)}
2730
{...rest}
2831
>
2932
{React.cloneElement(icon as any, {
3033
className: 'min-w-5 min-h-5 w-5 h-5 stroke-muted-foreground',
3134
})}
32-
<h1 className={cn('font-normal', value ? 'text-nowrap' : '')}>
33-
{label}
34-
</h1>
35-
{ValueComp}
35+
<div className={cn('flex flex-col gap-2 items-start', 'sm:flex-row')}>
36+
<span className={cn('font-normal', value ? 'text-nowrap' : '')}>
37+
{label}
38+
</span>
39+
<span className="md:flex">{ValueComp}</span>
40+
</div>
3641
</div>
3742
);
3843
}

‎src/components/Chip/Chip.tsx‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,20 @@ import { cva } from 'class-variance-authority';
55
const Chip = React.forwardRef<HTMLDivElement, IChipProps>((props, ref) => {
66
const { label, className, variant = 'info', ...rest } = props;
77

8-
const variants = cva(
9-
'px-4 py-1 text-nowrap font-normal text-sm md:text-md rounded-3xl',
10-
{
11-
variants: {
12-
variant: {
13-
warn: 'bg-light-yellow',
14-
success: 'bg-light-green',
15-
danger: 'bg-light-red',
16-
alert: 'bg-light-orange',
17-
info: 'bg-light-blue',
18-
},
8+
const variants = cva('px-4 py-1 font-normal text-sm md:text-md rounded-3xl', {
9+
variants: {
10+
variant: {
11+
warn: 'bg-light-yellow',
12+
success: 'bg-light-green',
13+
danger: 'bg-light-red',
14+
alert: 'bg-light-orange',
15+
info: 'bg-light-blue',
1916
},
20-
defaultVariants: {
21-
variant: 'info',
22-
},
23-
}
24-
);
17+
},
18+
defaultVariants: {
19+
variant: 'info',
20+
},
21+
});
2522

2623
return (
2724
<div ref={ref} {...rest} className={variants({ className, variant })}>

‎src/components/ShelterListItem/ShelterListItem.tsx‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -45,25 +45,18 @@ const ShelterListItem = (props: IShelterListItemProps) => {
4545

4646

4747
return (
48-
<div className="flex flex-col p-4 w-full border-2 border-border rounded-md gap-1 relative">
49-
<Button
50-
size="sm"
51-
variant="ghost"
52-
className="absolute top-4 right-4"
53-
onClick={() => navigate(`/abrigo/${data.id}`)}
54-
>
48+
<div
49+
className="flex flex-col p-4 w-full border-2 border-border rounded-md gap-1 relative"
50+
onClick={() => navigate(`/abrigo/${data.id}`)}
51+
>
52+
<Button size="sm" variant="ghost" className="absolute top-4 right-4">
5553
<ChevronRight className="h-5 w-5" />
5654
</Button>
5755
<div className="flex items-center gap-1">
58-
<h3
59-
className="font-semibold text-lg hover:cursor-pointer hover:text-slate-500"
60-
onClick={() => navigate(`/abrigo/${data.id}`)}
61-
>
56+
<h3 className="font-semibold text-lg hover:cursor-pointer hover:text-slate-500">
6257
{data.name}
6358
</h3>
64-
{data.verified && (
65-
<VerifiedBadge />
66-
)}
59+
{data.verified && <VerifiedBadge />}
6760
</div>
6861
<h6 className={cn('font-semibold text-md', availabilityClassName)}>
6962
{availability}

‎src/pages/Home/Home.tsx‎

Lines changed: 42 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
import { Fragment, useCallback, useContext, useMemo, useState } from 'react';
2-
import { RotateCw, CircleAlert, Search, Loader, ListFilter, LogOutIcon, Heart } from 'lucide-react';
2+
import {
3+
RotateCw,
4+
CircleAlert,
5+
Search,
6+
Loader,
7+
ListFilter,
8+
LogOutIcon,
9+
Heart,
10+
} from 'lucide-react';
311

412
import { Alert, Header, NoFoundSearch, ShelterListItem } from '@/components';
513
import { Input } from '@/components/ui/input';
@@ -32,7 +40,7 @@ const Home = () => {
3240
perPage: shelters.perPage,
3341
};
3442

35-
search({
43+
search({
3644
params: params,
3745
});
3846
},
@@ -43,7 +51,7 @@ const Home = () => {
4351
const clearSearch = () => {
4452
setSearchValue('');
4553
resetSearch();
46-
}
54+
};
4755

4856
const hasMore = useMemo(
4957
() => shelters.page * shelters.perPage < shelters.count,
@@ -52,17 +60,17 @@ const Home = () => {
5260

5361
const closeModal = () => {
5462
setOpenModal(false);
55-
}
63+
};
5664

5765
const handleSearch = (values: IUseShelterSearchParams) => {
5866
setOpenModal(false);
5967
setSearchValue(values.search ?? '');
6068
search({
6169
params: {
62-
...values
63-
}
70+
...values,
71+
},
6472
});
65-
}
73+
};
6674

6775
const handleFetchMore = useCallback(() => {
6876
const params = {
@@ -72,15 +80,24 @@ const Home = () => {
7280
search: searchValue ? searchValue : '',
7381
};
7482

75-
search({
76-
params: params,
77-
}, true);
78-
83+
search(
84+
{
85+
params: params,
86+
},
87+
true
88+
);
7989
}, [search, searchValue, shelters.filters, shelters.page, shelters.perPage]);
8090

8191
return (
8292
<div className="flex flex-col h-screen items-center">
83-
{isModalOpen && <Filter handleSearch={handleSearch} isModalOpen={isModalOpen} closeModal={closeModal} filters={shelters.filters} />}
93+
{isModalOpen && (
94+
<Filter
95+
handleSearch={handleSearch}
96+
isModalOpen={isModalOpen}
97+
closeModal={closeModal}
98+
filters={shelters.filters}
99+
/>
100+
)}
84101
<Header
85102
title="SOS Rio Grande do Sul"
86103
endAdornment={
@@ -141,17 +158,21 @@ const Home = () => {
141158
</div>
142159
</div>
143160
<div className="flex flex-row">
144-
<Button variant="ghost" size="sm"
145-
className="flex gap-2 items-center [&_svg]:stroke-blue-500"
146-
onClick={() => setOpenModal(true)}>
161+
<Button
162+
variant="ghost"
163+
size="sm"
164+
className="flex gap-2 items-center [&_svg]:stroke-blue-500"
165+
onClick={() => setOpenModal(true)}
166+
>
147167
<ListFilter className="h-5 w-5" />
148-
<h1 className="font-semibold text-[16px] text-blue-500">
149-
Filtros
150-
</h1>
168+
<h1 className="font-semibold text-[16px] text-blue-500">Filtros</h1>
151169
</Button>
152-
<Button variant="ghost" size="sm"
153-
className="flex gap-2 items-center [&_svg]:stroke-blue-500"
154-
onClick={() => clearSearch()}>
170+
<Button
171+
variant="ghost"
172+
size="sm"
173+
className="flex gap-2 items-center [&_svg]:stroke-blue-500"
174+
onClick={() => clearSearch()}
175+
>
155176
<CircleAlert className="h-5 w-5" />
156177
<h1 className="font-semibold text-[16px] text-blue-500">
157178
Limpar Filtros

‎src/pages/Shelter/Shelter.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,7 @@ const Shelter = () => {
6464
<h1 className="text-[#2f2f2f] font-semibold text-2xl">
6565
{shelter.name}
6666
</h1>
67-
{shelter.verified && (
68-
<VerifiedBadge />
69-
)}
67+
{shelter.verified && <VerifiedBadge />}
7068
</div>
7169
<div className="flex flex-1 items-center justify-between">
7270
<h1 className={cn(availabilityClassName, 'font-semibold')}>

‎tailwind.config.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -92,10 +92,17 @@ module.exports = {
9292
animation: {
9393
'accordion-down': 'accordion-down 0.2s ease-out',
9494
'accordion-up': 'accordion-up 0.2s ease-out',
95-
slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
96-
slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
95+
slideDownAndFade:
96+
'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
97+
slideLeftAndFade:
98+
'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
9799
slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
98-
slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
100+
slideRightAndFade:
101+
'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
102+
},
103+
screens: {
104+
// max mobile dimension
105+
sm: '425px',
99106
},
100107
},
101108
},

0 commit comments

Comments
 (0)