sina_sajjadi
/
marriage
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix input autofill code

master
mortezaei 4 days ago
parent
0443604714
commit
e98b405416
1 changed files with 177 additions and 143 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 98
      src/app/new-match/new-match-client.tsx

98
src/app/new-match/new-match-client.tsx
View File

@ -520,36 +520,44 @@ export default function NewMatchClient() {
return (
<>
<PageBackground />
<main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(20px+var(--safe-bottom))] text-center">
<PageHeader className="-mx-[6px]" profile={profile} />
<main
style={{
paddingBottom: `${profile?.can_edit_profile === false ? 76 + bottom : 16 + bottom}px`,
paddingTop: `${Math.max(12, top + 4)}px`,
}}
className="-mx-[17px] flex h-dvh flex-col overflow-hidden px-4 text-center"
>
<div className="shrink-0">
<PageHeader profile={profile} />
</div>
<div className="flex flex-1 flex-col justify-between gap-4 pt-2">
<div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain flex flex-col justify-between">
{/* Header Section Skeleton */}
<section className="flex flex-col items-center">
<section className="flex flex-col items-center mt-3.5 sm:mt-5 shrink-0">
<LoadingSkeleton className="h-[60px] w-[60px] rounded-full" />
<LoadingSkeleton className="h-6 w-[220px] mt-3" />
<LoadingSkeleton className="h-6 w-[220px] mt-2.5 sm:mt-3" />
<LoadingSkeleton className="h-4 w-[280px] mt-2" />
<LoadingSkeleton className="h-4 w-[240px] mt-1" />
</section>
<div className="flex flex-col justify-between shrink-0">
{/* Match Card Skeleton */}
<section className="rounded-[15px] border border-white/80 bg-white px-[17px] pt-[18px] pb-[17px] shadow-[0_18px_45px_rgba(15,23,42,0.06)] flex flex-col items-center">
<section className="mt-4 sm:mt-6 rounded-[15px] border border-white/80 bg-white px-[17px] pt-[16px] pb-[16px] shadow-[0_18px_45px_rgba(15,23,42,0.06)] flex flex-col items-center">
{/* Name line */}
<LoadingSkeleton className="h-5 w-[140px]" />
{/* Subtitle / Details lines */}
<div className="mt-3 w-full flex flex-col items-center gap-2 min-h-[48px]">
<div className="mt-2 w-full flex flex-col items-center gap-2 min-h-[40px]">
<LoadingSkeleton className="h-3 w-[180px]" />
<LoadingSkeleton className="h-3 w-[120px]" />
<LoadingSkeleton className="h-3 w-[150px]" />
</div>
{/* Button skeleton */}
<LoadingSkeleton className="mt-[15px] h-[40px] w-full rounded-[10px]" />
<LoadingSkeleton className="mt-3 sm:mt-3.5 h-[40px] w-full rounded-[10px]" />
</section>
{/* Advisor Card Skeleton */}
<section>
<section className="mt-4 sm:mt-6">
<div className="rounded-[13px] border border-white/80 bg-white px-3 py-3.5 text-left shadow-[0_18px_45px_rgba(15,23,42,0.06)] backdrop-blur-sm">
<LoadingSkeleton className="h-[16px] w-[140px]" />
<div className="mt-2 space-y-1">
@ -570,10 +578,17 @@ export default function NewMatchClient() {
</div>
</section>
</div>
</div>
</main>
</>
);
}
const pairedPersonalFields = [
matchDisplay.age,
matchDisplay.residence,
].filter((field): field is DisplayField => Boolean(field));
const pairedEduFields = [
matchDisplay.educationLevel,
matchDisplay.fieldOfStudy,
@ -602,11 +617,19 @@ export default function NewMatchClient() {
<>
<PageBackground />
<main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(20px+var(--safe-bottom))] text-center">
<PageHeader className="-mx-[6px]" profile={profile} />
<main
style={{
paddingBottom: `${profile?.can_edit_profile === false ? 76 + bottom : 16 + bottom}px`,
paddingTop: `${Math.max(12, top + 4)}px`,
}}
className="-mx-[17px] flex h-dvh flex-col overflow-hidden px-4 text-center"
>
<div className="shrink-0">
<PageHeader profile={profile} />
</div>
<div className="flex flex-1 flex-col justify-between gap-4 pt-2">
<section className="flex flex-col items-center">
<div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain flex flex-col justify-between">
<section className="flex flex-col items-center mt-3.5 sm:mt-5 shrink-0">
<div
aria-hidden="true"
className="relative flex h-[60px] w-[60px] items-center justify-center rounded-full bg-[#FF4E67] shadow-[0_12px_28px_rgba(240,68,91,0.22)]"
@ -618,35 +641,35 @@ export default function NewMatchClient() {
alt="notification"
/>
</div>
<h1 className="mt-3 text-center text-[20px] font-bold leading-[1.25] text-[#1A1A1A]">
<h2 className="text-[22px] font-bold mt-2.5 sm:mt-3">
{matchHeadingTitle}
</h1>
<p className="mt-2 max-w-[315px] text-center text-[12px] leading-[1.35] font-semibold text-[#7C7C7C]">
</h2>
<p className="mt-2 max-w-[322px] text-[12px] leading-[1.35] font-semibold text-[#7C7C7C]">
{matchHeadingDescription}
</p>
</section>
<div className="flex flex-col justify-between shrink-0">
{isLoading ? (
<section className="rounded-[15px] border border-white/80 bg-white px-[17px] pt-[18px] pb-[17px] shadow-[0_18px_45px_rgba(15,23,42,0.06)]">
<section className="mt-4 sm:mt-6 rounded-[15px] border border-white/80 bg-white px-[17px] pt-[16px] pb-[16px] shadow-[0_18px_45px_rgba(15,23,42,0.06)]">
<div className="flex flex-col items-center py-2">
{/* Name line */}
<LoadingSkeleton className="h-5 w-[140px]" />
{/* Subtitle / Details lines */}
<div className="mt-3 w-full flex flex-col items-center gap-2 min-h-[48px]">
<div className="mt-2 w-full flex flex-col items-center gap-2 min-h-[40px]">
<LoadingSkeleton className="h-3 w-[180px]" />
<LoadingSkeleton className="h-3 w-[120px]" />
<LoadingSkeleton className="h-3 w-[150px]" />
</div>
{/* Button skeleton */}
<LoadingSkeleton className="mt-[15px] h-[40px] w-full rounded-[10px]" />
<LoadingSkeleton className="mt-3 sm:mt-3.5 h-[40px] w-full rounded-[10px]" />
</div>
</section>
) : (
<section className="rounded-[15px] bg-[linear-gradient(180deg,#F0445B_0%,#F4556E_100%)] px-[17px] pt-[16px] pb-[16px] text-white shadow-[0_18px_38px_rgba(240,68,91,0.25)]">
<section className="mt-4 sm:mt-6 rounded-[15px] bg-[linear-gradient(180deg,#F0445B_0%,#F4556E_100%)] px-[17px] pt-[16px] pb-[16px] text-white shadow-[0_18px_38px_rgba(240,68,91,0.25)]">
{isError ? (
<p className="py-6 text-[13px] font-semibold">
<p className="py-8 text-[13px] font-semibold">
Unable to load match summary.
</p>
) : matchSummary ? (
@ -655,13 +678,21 @@ export default function NewMatchClient() {
<span>{matchDisplay.name}</span>
</h2>
<div className="mt-[6px] min-h-[44px] space-y-0.5 text-left">
{matchDisplay.age ? (
<FieldLine field={matchDisplay.age} />
<div className="mt-1.5 min-h-[40px] space-y-0.5 text-left">
{pairedPersonalFields.length ? (
<p className="break-words text-[11px] leading-[1.65] font-medium text-white">
{pairedPersonalFields.map((field, index) => (
<span key={field.id}>
{index > 0 ? (
<span className="opacity-75"> | </span>
) : null}
{matchDisplay.residence ? (
<FieldLine field={matchDisplay.residence} />
<span className="font-semibold">
{field.label}:{" "}
</span>
<span>{field.value}</span>
</span>
))}
</p>
) : null}
{pairedEduFields.length ? (
@ -705,20 +736,21 @@ export default function NewMatchClient() {
openProfile();
}
}}
className="mt-[14px] inline-flex w-full items-center justify-center rounded-[10px] border-none bg-white h-[40px] text-[16px] font-semibold text-[#F0445B] no-underline shadow-none hover:bg-white/95 transition-colors cursor-pointer"
className="mt-3 sm:mt-3.5 inline-flex w-full items-center justify-center rounded-[10px] border-none bg-white h-[40px] text-[16px] font-semibold text-[#F0445B] no-underline shadow-none hover:bg-white/95 transition-colors cursor-pointer"
>
{t["View more details"]}
</button>
</>
) : (
<p className="py-6 text-[13px] font-semibold">
<p className="py-8 text-[13px] font-semibold">
No match summary is available yet.
</p>
)}
</section>
)}
<div className="w-full space-y-3">
<AdvisorActionsCard
className="mt-4 sm:mt-6"
title={t["Get an advisor"]}
description={
t[
@ -731,6 +763,8 @@ export default function NewMatchClient() {
onGetAdvisor={openAdvisors}
/>
</div>
</div>
</div>
</main>
{profile?.can_edit_profile === false && (

Write Preview
Loading…
Cancel
Save