Skip to content

Commit d76c61b

Browse files
YuvalYuval
Yuval
authored and
Yuval
committed
enhance responsive design and layout adjustments across multiple components
1 parent e2f8f7d commit d76c61b

7 files changed

Lines changed: 175 additions & 49 deletions

File tree

‎03-Client/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
"build": "vite build",
88
"dev": "vite",
99
"test": "vitest run",
10-
"test:watch": "vitest"
10+
"test:watch": "vitest",
11+
"build:android": "vite build && cap sync android",
12+
"run:android": "vite build && cap sync android && cap run android",
13+
"open:android": "vite build && cap sync android && cap open android"
1114
},
1215
"dependencies": {
1316
"@capacitor/android": "^8.3.1",

‎03-Client/src/app/components/LoginScreen.tsx‎

Lines changed: 63 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -63,34 +63,55 @@ export function LoginScreen() {
6363
<BackgroundDecorations />
6464

6565
{/* Logo */}
66-
<div className="relative z-10 flex justify-center mt-[60px]">
67-
<div className="w-[128px] h-[150px]">
68-
<img src={imgLogo} alt="Logo" className="object-contain" />
66+
<div
67+
className="relative z-10 flex justify-center shrink-0"
68+
style={{ marginTop: "clamp(16px, 5dvh, 60px)" }}
69+
>
70+
<div
71+
className="flex items-center justify-center"
72+
style={{
73+
width: "clamp(88px, 16dvh, 128px)",
74+
height: "clamp(103px, 18.75dvh, 150px)",
75+
}}
76+
>
77+
<img src={imgLogo} alt="Logo" className="w-full h-full object-contain" />
6978
</div>
7079
</div>
7180

7281
{/* Header */}
73-
<div className="relative z-10 text-center mt-2">
74-
<h1 className="text-[#063c55] font-['Heebo',sans-serif]" style={{ fontSize: "30px", fontWeight: 700 }}>
82+
<div className="relative z-10 text-center mt-2 shrink-0">
83+
<h1
84+
className="text-[#063c55] font-['Heebo',sans-serif]"
85+
style={{ fontSize: "clamp(22px, 3.5dvh, 30px)", fontWeight: 700 }}
86+
>
7587
התחברו ל-GroundShare
7688
</h1>
77-
<p className="text-[#f68d1e] font-['Heebo',sans-serif] mt-1" style={{ fontSize: "20px", fontWeight: 600 }}>
89+
<p
90+
className="text-[#f68d1e] font-['Heebo',sans-serif] mt-1"
91+
style={{ fontSize: "clamp(16px, 2.4dvh, 20px)", fontWeight: 600 }}
92+
>
7893
התגעגענו!
7994
</p>
8095
</div>
8196

82-
{/* Form */}
83-
<div className="relative z-10 flex flex-col gap-[20px] px-8 mt-[60px]">
97+
{/* Form */}
98+
<div
99+
className="relative z-10 flex flex-col px-8 shrink-0"
100+
style={{
101+
marginTop: "clamp(18px, 5.5dvh, 60px)",
102+
gap: "clamp(10px, 2.2dvh, 20px)",
103+
}}
104+
>
84105
<div className="relative">
85106
<input
86107
type="email"
87108
value={email}
88109
onChange={(e) => setEmail(e.target.value)}
89110
placeholder="מייל"
90111
dir="rtl"
91-
// The email input already has a solid border, but you can add focus/hover here too if you ever change the default state
92-
className="w-full bg-[#f3fbfd] border-2 border-transparent hover:border-[#063c55] focus:border-[#063c55] transition-colors duration-200 rounded-[10px] py-[18px] px-[35px] text-right font-['Heebo',sans-serif] text-[#626262] text-[16px] outline-none shadow-[inset_4px_14px_16.2px_0px_rgba(0,0,0,0.04)]"
93-
/>
112+
className="w-full bg-[#f3fbfd] border-2 border-transparent hover:border-[#063c55] focus:border-[#063c55] transition-colors duration-200 rounded-[10px] px-[35px] text-right font-['Heebo',sans-serif] text-[#626262] text-[16px] outline-none shadow-[inset_4px_14px_16.2px_0px_rgba(0,0,0,0.04)]"
113+
style={{ paddingTop: "clamp(12px, 2dvh, 18px)", paddingBottom: "clamp(12px, 2dvh, 18px)" }}
114+
/>
94115
</div>
95116
<div className="relative">
96117
<input
@@ -99,8 +120,8 @@ export function LoginScreen() {
99120
onChange={(e) => setPassword(e.target.value)}
100121
placeholder="סיסמא"
101122
dir="rtl"
102-
// Added: hover:border-[#063c55] focus:border-[#063c55] transition-colors duration-200
103-
className="w-full bg-[#f3fbfd] border-2 border-transparent hover:border-[#063c55] focus:border-[#063c55] transition-colors duration-200 rounded-[10px] py-[18px] px-[35px] text-right font-['Heebo',sans-serif] text-[#626262] text-[16px] outline-none shadow-[inset_4px_14px_16.2px_0px_rgba(0,0,0,0.04)]"
123+
className="w-full bg-[#f3fbfd] border-2 border-transparent hover:border-[#063c55] focus:border-[#063c55] transition-colors duration-200 rounded-[10px] px-[35px] text-right font-['Heebo',sans-serif] text-[#626262] text-[16px] outline-none shadow-[inset_4px_14px_16.2px_0px_rgba(0,0,0,0.04)]"
124+
style={{ paddingTop: "clamp(12px, 2dvh, 18px)", paddingBottom: "clamp(12px, 2dvh, 18px)" }}
104125
/>
105126
<button
106127
type="button"
@@ -114,28 +135,39 @@ export function LoginScreen() {
114135
</div>
115136

116137
{/* Forgot Password */}
117-
<div className="relative z-10 px-8 mt-3">
138+
<div className="relative z-10 px-8 mt-3 shrink-0">
118139
<p className="text-right font-['Heebo',sans-serif] text-[#626262] text-[14px] cursor-pointer" style={{ fontWeight: 600 }}>
119140
שכחת סיסמא?
120141
</p>
121142
</div>
122143

123144
{/* Error */}
124145
{error && (
125-
<div className="relative z-10 px-8 mt-3">
146+
<div className="relative z-10 px-8 mt-3 shrink-0">
126147
<p className="text-center font-['Heebo',sans-serif] text-[#FF616D] text-[14px]" style={{ fontWeight: 600 }}>
127148
{error}
128149
</p>
129150
</div>
130151
)}
131152

132153
{/* Actions */}
133-
<div className="relative z-10 flex flex-col items-center gap-[20px] px-8 mt-[30px]">
154+
<div
155+
className="relative z-10 flex flex-col items-center px-8 shrink-0"
156+
style={{
157+
marginTop: "clamp(14px, 3dvh, 30px)",
158+
gap: "clamp(10px, 2.2dvh, 20px)",
159+
}}
160+
>
134161
<button
135162
onClick={handleLogin}
136163
disabled={loading}
137-
className="w-full py-[15px] bg-[#063c55] text-white rounded-[10px] font-['Heebo',sans-serif] cursor-pointer transition-transform active:scale-[0.98] shadow-[0px_10px_20px_0px_rgba(6,60,85,0.15)] disabled:opacity-60"
138-
style={{ fontSize: "20px", fontWeight: 600 }}
164+
className="w-full bg-[#063c55] text-white rounded-[10px] font-['Heebo',sans-serif] cursor-pointer transition-transform active:scale-[0.98] shadow-[0px_10px_20px_0px_rgba(6,60,85,0.15)] disabled:opacity-60"
165+
style={{
166+
fontSize: "clamp(17px, 2.3dvh, 20px)",
167+
fontWeight: 600,
168+
paddingTop: "clamp(11px, 1.7dvh, 15px)",
169+
paddingBottom: "clamp(11px, 1.7dvh, 15px)",
170+
}}
139171
>
140172
{loading ? "מתחבר..." : "התחברות"}
141173
</button>
@@ -146,17 +178,26 @@ export function LoginScreen() {
146178
</div>
147179
<button
148180
onClick={() => navigate("/register")}
149-
className="w-full py-[13px] bg-white text-[#063c55] rounded-[10px] font-['Heebo',sans-serif] cursor-pointer transition-transform active:scale-[0.98] hover:bg-[#f3fbfd]"
150-
style={{ fontSize: "16px", fontWeight: 600, border: "2px solid #063c55" }}
181+
className="w-full bg-white text-[#063c55] rounded-[10px] font-['Heebo',sans-serif] cursor-pointer transition-transform active:scale-[0.98] hover:bg-[#f3fbfd]"
182+
style={{
183+
fontSize: "clamp(14px, 1.9dvh, 16px)",
184+
fontWeight: 600,
185+
border: "2px solid #063c55",
186+
paddingTop: "clamp(9px, 1.5dvh, 13px)",
187+
paddingBottom: "clamp(9px, 1.5dvh, 13px)",
188+
}}
151189
>
152190
אני רוצה להירשם
153191
</button>
154192
</div>
155193

156-
<div className="flex-1" />
194+
<div className="flex-1 min-h-[8px]" />
157195

158196
{/* Social Login */}
159-
<div className="relative z-10 mb-[40px]">
197+
<div
198+
className="relative z-10 shrink-0"
199+
style={{ marginBottom: "clamp(16px, 4.5dvh, 40px)" }}
200+
>
160201
<SocialLoginButtons label="התחברות באמצעות" />
161202
</div>
162203
</div>

‎03-Client/src/app/components/MainScreen.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState, useCallback, useEffect } from "react";
1+
import { useState, useCallback, useEffect, useRef } from "react";
22
import { useNavigate, useLocation } from "react-router";
33
import { AnimatePresence, motion } from "motion/react";
44
import { Check } from "lucide-react";
@@ -41,6 +41,7 @@ export function MainScreen() {
4141
}, [routeState?.showEventSuccess]);
4242

4343
const center = position ? { lat: position.lat, lng: position.lng } : TEL_AVIV;
44+
const hasAutoCenteredRef = useRef(false);
4445

4546
// Pin state
4647
const [droppedPin, setDroppedPin] = useState<{ lat: number; lng: number } | null>(null);
@@ -93,16 +94,24 @@ export function MainScreen() {
9394
});
9495
}, [homeLat, homeLng, homeCity, homeStreet, homeHouse, navigate]);
9596

96-
// Configure shared map on mount
97+
// Configure shared map on mount.
98+
// Why: useGeolocation uses watchPosition, so `position` updates continuously as
99+
// GPS refines. Panning on every update snaps the map back to the user and
100+
// prevents manual panning — especially visible on Android. Auto-pan only once
101+
// on the first meaningful center; GPS updates after that refresh the marker
102+
// (via the overlays effect below) without yanking the viewport.
97103
useEffect(() => {
98104
setConfig({
99105
center,
100106
zoom: 15,
101107
onClick: handleMapClick,
102108
onDrag: handleMapDrag,
103109
});
104-
panTo(center);
105-
}, [center.lat, center.lng, handleMapClick, handleMapDrag]);
110+
if (!hasAutoCenteredRef.current) {
111+
panTo(center);
112+
if (position) hasAutoCenteredRef.current = true;
113+
}
114+
}, [center.lat, center.lng, handleMapClick, handleMapDrag, position, panTo, setConfig]);
106115

107116
// Set overlays
108117
useEffect(() => {

‎03-Client/src/app/components/NearbyReportsScreen.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ export function NearbyReportsScreen() {
9696
}, [position?.lat, position?.lng, displayAddress]);
9797

9898
const center = position ? { lat: position.lat, lng: position.lng } : TEL_AVIV;
99+
const hasAutoCenteredRef = useRef(false);
99100

100101
// Fetch real events, disruptions, and parcel when position is available
101102
useEffect(() => {
@@ -184,12 +185,24 @@ export function NearbyReportsScreen() {
184185
});
185186
}, [homeLat, homeLng, homeCity, homeStreet, homeHouse, navigate]);
186187

187-
// Configure shared map — re-pan when navigated here (ts changes on each nav tap)
188+
// Configure shared map — re-pan on explicit nav (ts) or when route supplies a
189+
// target pin (routeState.lat/lng). For GPS-only centers, pan once on the first
190+
// fix and then leave the viewport alone. Why: useGeolocation uses watchPosition,
191+
// so depending the effect on center.lat/lng re-ran it on every GPS update and
192+
// yanked the map back to the user — especially visible on Android where GPS
193+
// refines continuously. The user-location marker still refreshes via the
194+
// overlays effect below.
188195
useEffect(() => {
189196
setConfig({ center, zoom: 16, onClick: handleMapClick, onDrag: handleMapDrag });
190-
panTo(center);
197+
const hasNavTarget = routeState?.ts !== undefined || routeState?.lat !== undefined;
198+
if (hasNavTarget) {
199+
panTo(center);
200+
} else if (!hasAutoCenteredRef.current && position) {
201+
panTo(center);
202+
hasAutoCenteredRef.current = true;
203+
}
191204
setAddressBarOpen(true);
192-
}, [center.lat, center.lng, routeState?.ts, handleMapClick, handleMapDrag]);
205+
}, [routeState?.ts, routeState?.lat, routeState?.lng, handleMapClick, handleMapDrag, position?.lat, position?.lng]);
193206

194207
// ---------------------------------------------------------------------------
195208
// Map overlays

‎03-Client/src/app/components/RegisterSuccess.tsx‎

Lines changed: 41 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,31 +17,64 @@ export function RegisterSuccess() {
1717
<BackgroundDecorations />
1818

1919
{/* Logo */}
20-
<div className="relative z-10 mt-[70px] w-[119px] h-[169px]">
20+
<div
21+
className="relative z-10 shrink-0"
22+
style={{
23+
marginTop: "clamp(28px, 8dvh, 70px)",
24+
width: "clamp(82px, 14.5dvh, 119px)",
25+
height: "clamp(116px, 20.5dvh, 169px)",
26+
}}
27+
>
2128
<img src={imgLogo} alt="GroundShare Logo" className="w-full h-full object-contain" />
2229
</div>
2330

2431
{/* Success Card */}
25-
<div className="relative z-10 mt-[80px] w-[340px] rounded-[10px] backdrop-blur-[5px] bg-[rgba(6,60,85,0.37)] flex flex-col items-center py-10 px-6">
32+
<div
33+
className="relative z-10 w-[340px] max-w-[90%] rounded-[10px] backdrop-blur-[5px] bg-[rgba(6,60,85,0.37)] flex flex-col items-center px-6 shrink-0"
34+
style={{
35+
marginTop: "clamp(48px, 9.5dvh, 80px)",
36+
paddingTop: "clamp(24px, 4dvh, 40px)",
37+
paddingBottom: "clamp(24px, 4dvh, 40px)",
38+
}}
39+
>
2640
{/* Check icon */}
27-
<div className="w-[90px] h-[90px] rounded-full bg-[#3AC0A0] flex items-center justify-center -mt-[65px]">
41+
<div
42+
className="rounded-full bg-[#3AC0A0] flex items-center justify-center shrink-0"
43+
style={{
44+
width: "clamp(64px, 11dvh, 90px)",
45+
height: "clamp(64px, 11dvh, 90px)",
46+
marginTop: "clamp(-46px, -7.7dvh, -65px)",
47+
}}
48+
>
2849
<Check size={42} className="text-white" strokeWidth={3} />
2950
</div>
30-
<p className="text-white font-['Heebo',sans-serif] text-center mt-6" style={{ fontSize: "24px", fontWeight: 700 }}>
51+
<p
52+
className="text-white font-['Heebo',sans-serif] text-center mt-6"
53+
style={{ fontSize: "clamp(18px, 2.8dvh, 24px)", fontWeight: 700 }}
54+
>
3155
הרשמה בוצעה בהצלחה!
3256
<br />
3357
מעבירים להתחברות...
3458
</p>
3559
</div>
3660

37-
<div className="flex-1" />
61+
<div className="flex-1 min-h-[8px]" />
3862

3963
{/* Brand */}
40-
<div className="relative z-10 text-center mb-[120px]">
41-
<p className="text-[#063c55] font-['Heebo',sans-serif]" style={{ fontSize: "48px", fontWeight: 400 }}>
64+
<div
65+
className="relative z-10 text-center shrink-0"
66+
style={{ marginBottom: "clamp(40px, 14dvh, 120px)" }}
67+
>
68+
<p
69+
className="text-[#063c55] font-['Heebo',sans-serif]"
70+
style={{ fontSize: "clamp(34px, 5.5dvh, 48px)", fontWeight: 400 }}
71+
>
4272
GroundShare
4373
</p>
44-
<p className="text-[#f68d1e] font-['Heebo',sans-serif]" style={{ fontSize: "20px", fontWeight: 600 }}>
74+
<p
75+
className="text-[#f68d1e] font-['Heebo',sans-serif]"
76+
style={{ fontSize: "clamp(16px, 2.4dvh, 20px)", fontWeight: 600 }}
77+
>
4578
עוד רגע ומתחילים לשתף...
4679
</p>
4780
</div>

‎03-Client/src/app/components/WelcomeScreen.tsx‎

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,33 +9,60 @@ export function WelcomeScreen() {
99
<div className="relative w-full h-full bg-white overflow-hidden flex flex-col items-center" dir="rtl">
1010
<BackgroundDecorations />
1111

12-
<div className="relative z-10 mt-[100px] w-[300px] h-[250px] flex items-center justify-center">
12+
<div
13+
className="relative z-10 flex items-center justify-center shrink-0"
14+
style={{
15+
marginTop: "clamp(40px, 11dvh, 100px)",
16+
width: "clamp(200px, 36dvh, 300px)",
17+
height: "clamp(167px, 30dvh, 250px)",
18+
}}
19+
>
1320
<img src={imgLogo} alt="GroundShare Logo" className="w-full h-full object-contain" />
1421
</div>
1522

16-
<div className="relative z-10 mt-8 text-center px-10">
17-
<h1 className="text-[#0c435a] font-['Heebo',sans-serif]" style={{ fontSize: "35px", fontWeight: 600 }}>
23+
<div className="relative z-10 mt-8 text-center px-10 shrink-0">
24+
<h1
25+
className="text-[#0c435a] font-['Heebo',sans-serif]"
26+
style={{ fontSize: "clamp(26px, 4dvh, 35px)", fontWeight: 600 }}
27+
>
1828
ברוך הבא!
1929
</h1>
20-
<p className="text-black font-['Poppins','Arimo',sans-serif] mt-2" style={{ fontSize: "14px", fontWeight: 400 }}>
30+
<p
31+
className="text-black font-['Poppins','Arimo',sans-serif] mt-2"
32+
style={{ fontSize: "clamp(12px, 1.8dvh, 14px)", fontWeight: 400 }}
33+
>
2134
הנגשת מידע תכנוני עלינו, שיתוף בזמן אמת עליכם.
2235
</p>
2336
</div>
2437

25-
<div className="flex-1" />
38+
<div className="flex-1 min-h-[8px]" />
2639

27-
<div className="relative z-10 flex flex-col items-center gap-4 mb-[120px]">
40+
<div
41+
className="relative z-10 flex flex-col items-center gap-4 shrink-0"
42+
style={{ marginBottom: "clamp(40px, 14dvh, 120px)" }}
43+
>
2844
<button
2945
onClick={() => navigate("/login")}
30-
className="w-[160px] py-[15px] px-[20px] bg-[#063c55] text-white rounded-[10px] font-['Heebo',sans-serif] cursor-pointer transition-transform active:scale-95"
31-
style={{ fontSize: "20px", fontWeight: 600, boxShadow: "0px 10px 20px 0px rgba(6,60,85,0.15)" }}
46+
className="w-[160px] px-[20px] bg-[#063c55] text-white rounded-[10px] font-['Heebo',sans-serif] cursor-pointer transition-transform active:scale-95"
47+
style={{
48+
fontSize: "clamp(17px, 2.3dvh, 20px)",
49+
fontWeight: 600,
50+
paddingTop: "clamp(11px, 1.7dvh, 15px)",
51+
paddingBottom: "clamp(11px, 1.7dvh, 15px)",
52+
boxShadow: "0px 10px 20px 0px rgba(6,60,85,0.15)",
53+
}}
3254
>
3355
כניסה
3456
</button>
3557
<button
3658
onClick={() => navigate("/register")}
37-
className="w-[160px] py-[15px] px-[20px] bg-[#65cae7] text-white rounded-[10px] font-['Heebo',sans-serif] cursor-pointer transition-transform active:scale-95"
38-
style={{ fontSize: "20px", fontWeight: 600 }}
59+
className="w-[160px] px-[20px] bg-[#65cae7] text-white rounded-[10px] font-['Heebo',sans-serif] cursor-pointer transition-transform active:scale-95"
60+
style={{
61+
fontSize: "clamp(17px, 2.3dvh, 20px)",
62+
fontWeight: 600,
63+
paddingTop: "clamp(11px, 1.7dvh, 15px)",
64+
paddingBottom: "clamp(11px, 1.7dvh, 15px)",
65+
}}
3966
>
4067
הרשמה
4168
</button>

‎03-Client/src/app/components/shared/ImageUploadModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export function ImageUploadModal({ onClose, onUpload }: ImageUploadModalProps) {
9696
/>
9797

9898
{/* Modal */}
99-
<div className="relative bg-[#daf8ff] rounded-[16px] w-[320px] p-[20px] flex flex-col items-center">
99+
<div className="relative bg-[#daf8ff] rounded-[16px] w-[320px] max-w-[92%] max-h-[92dvh] overflow-y-auto p-[20px] flex flex-col items-center">
100100
<button
101101
onClick={onClose}
102102
className="absolute top-[12px] left-[12px] cursor-pointer text-[#063c55]"

0 commit comments

Comments
 (0)