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

feat: update layout and styling for responsive design across multiple components

master
sina_sajjadi 2 months ago
parent
e266a1dfdd
commit
ad121581d3
12 changed files with 17 additions and 70 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/app/candidate-contact/page.tsx
  2. 8
      src/app/globals.css
  3. 43
      src/app/layout.tsx
  4. 16
      src/app/loading.tsx
  5. 2
      src/app/new-match/profile/page.tsx
  6. 2
      src/components/questions/question-progress-tracker.tsx
  7. 4
      src/components/sliders/slider-page.tsx
  8. 2
      src/components/ui/call-result-sheet.tsx
  9. 2
      src/components/ui/dismiss-reason-sheet.tsx
  10. 2
      src/components/ui/female-consent-sheet.tsx
  11. 2
      src/components/ui/information-sheet.tsx
  12. 2
      src/components/ui/report-actions-sheet.tsx

2
src/app/candidate-contact/page.tsx
View File

@ -50,7 +50,7 @@ export default function CandidateContactPage() {
</div> </div>
</section> </section>
<section className="fixed right-0 bottom-0 left-0 z-20 mx-auto flex max-w-[375px] gap-3 rounded-t-[30px] bg-white px-[17px] pt-6 pb-8 shadow-[0_-18px_50px_rgba(15,23,42,0.08)]">
<section className="fixed right-0 bottom-0 left-0 z-20 mx-auto flex w-full sm:max-w-[375px] gap-3 rounded-t-[30px] bg-white px-[17px] pt-6 pb-8 shadow-[0_-18px_50px_rgba(15,23,42,0.08)]">
<Button className="" onClick={() => setIsCallResultSheetOpen(true)}> <Button className="" onClick={() => setIsCallResultSheetOpen(true)}>
{t.candidateContact.contacted} {t.candidateContact.contacted}
</Button> </Button>

8
src/app/globals.css
View File

@ -47,7 +47,7 @@ html:lang(ar) body,
} }
.app-shell { .app-shell {
width: min(100%, 375px);
width: 100%;
min-height: 100vh; min-height: 100vh;
padding-inline: 17px; padding-inline: 17px;
box-sizing: border-box; box-sizing: border-box;
@ -58,6 +58,12 @@ html:lang(ar) body,
background-size: cover; background-size: cover;
} }
@media (min-width: 640px) {
.app-shell {
width: 375px;
}
}
body[data-page-background="none"] .app-shell { body[data-page-background="none"] .app-shell {
background-image: none; background-image: none;
} }

43
src/app/layout.tsx
View File

@ -143,54 +143,11 @@ export default function RootLayout({
`, `,
}} }}
/> />
<script
dangerouslySetInnerHTML={{
__html: `
if (typeof window !== 'undefined') {
var REDIRECT_SESSION_KEY = 'redirect';
function renderRedirectDebug() {
var badge = document.getElementById('redirect-debug-badge');
if (!badge) {
return;
}
var redirectValue = window.sessionStorage.getItem(REDIRECT_SESSION_KEY);
badge.textContent =
redirectValue === null
? 'redirect: missing'
: 'redirect: ' + redirectValue;
}
var originalSetItem = window.sessionStorage.setItem.bind(window.sessionStorage);
var originalRemoveItem = window.sessionStorage.removeItem.bind(window.sessionStorage);
window.sessionStorage.setItem = function(key, value) {
originalSetItem(key, value);
renderRedirectDebug();
};
window.sessionStorage.removeItem = function(key) {
originalRemoveItem(key);
renderRedirectDebug();
};
window.addEventListener('load', renderRedirectDebug);
window.addEventListener('pageshow', renderRedirectDebug);
window.setTimeout(renderRedirectDebug, 0);
}
`,
}}
/>
</head> </head>
<body className={`${faminela.variable} ${amiri.variable}`}> <body className={`${faminela.variable} ${amiri.variable}`}>
<Providers> <Providers>
<div className="app-shell">{children}</div> <div className="app-shell">{children}</div>
</Providers> </Providers>
<div
id="redirect-debug-badge"
className="fixed bottom-3 right-3 z-[9999] rounded bg-black/75 px-2 py-1 text-xs text-white"
/>
{process.env.NODE_ENV === "development" ? ( {process.env.NODE_ENV === "development" ? (
<DevClickToComponent /> <DevClickToComponent />
) : null} ) : null}

16
src/app/loading.tsx
View File

@ -1,16 +0,0 @@
export default function Loading() {
return (
<div className="min-h-screen bg-white p-4 animate-pulse">
<div className="h-8 bg-gray-200 rounded-lg w-3/4 mb-6"></div>
<div className="space-y-3">
<div className="h-4 bg-gray-200 rounded w-full"></div>
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
<div className="h-4 bg-gray-200 rounded w-4/6"></div>
</div>
<div className="mt-8 space-y-4">
<div className="h-24 bg-gray-200 rounded-lg"></div>
<div className="h-24 bg-gray-200 rounded-lg"></div>
</div>
</div>
);
}

2
src/app/new-match/profile/page.tsx
View File

@ -325,7 +325,7 @@ export default function NewMatchProfilePage() {
</section> </section>
<div className="fixed inset-x-0 bottom-0 z-30 px-[17px]"> <div className="fixed inset-x-0 bottom-0 z-30 px-[17px]">
<div className="mx-auto max-w-[375px] rounded-t-[24px] bg-white px-4 py-4 shadow-[0_12px_30px_rgba(0,0,0,0.14)]">
<div className="mx-auto w-full sm:max-w-[375px] rounded-t-[24px] bg-white px-4 py-4 shadow-[0_12px_30px_rgba(0,0,0,0.14)]">
<div className="flex gap-3"> <div className="flex gap-3">
<button <button
type="button" type="button"

2
src/components/questions/question-progress-tracker.tsx
View File

@ -101,7 +101,7 @@ export function QuestionProgressTracker({
onInput={updateProgress} onInput={updateProgress}
> >
<div className="mb-5 h-[68px]" aria-hidden="true" /> <div className="mb-5 h-[68px]" aria-hidden="true" />
<div className="fixed top-[100px] left-1/2 z-20 w-full max-w-[375px] -translate-x-1/2 px-[17px]">
<div className="fixed top-[100px] left-1/2 z-20 w-full sm:max-w-[375px] -translate-x-1/2 px-[17px]">
<div <div
aria-label={`Answered questions: ${answered} of ${safeTotal}`} aria-label={`Answered questions: ${answered} of ${safeTotal}`}
aria-valuemax={safeTotal} aria-valuemax={safeTotal}

4
src/components/sliders/slider-page.tsx
View File

@ -204,8 +204,8 @@ export default function SliderPage() {
</div> </div>
</main> </main>
<div className="pointer-events-none fixed bottom-0 left-1/2 z-20 w-full max-w-[375px] -translate-x-1/2 bg-[#F5F5F5]">
<div className="mx-auto w-full max-w-[375px] px-[17px] pt-2.5 pb-6">
<div className="pointer-events-none fixed bottom-0 left-1/2 z-20 w-full sm:max-w-[375px] -translate-x-1/2 bg-[#F5F5F5]">
<div className="mx-auto w-full sm:max-w-[375px] px-[17px] pt-2.5 pb-6">
<div className="pointer-events-auto"> <div className="pointer-events-auto">
{activeSlide === 0 ? ( {activeSlide === 0 ? (
<SliderSlideOneActions onAccept={goToNextSlide} /> <SliderSlideOneActions onAccept={goToNextSlide} />

2
src/components/ui/call-result-sheet.tsx
View File

@ -121,7 +121,7 @@ export function CallResultSheet({
<section <section
{...props} {...props}
className={[ className={[
"w-full max-w-[375px] rounded-t-[34px] bg-[#F9F8F8] p-3.5 text-center shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out will-change-transform",
"w-full sm:max-w-[375px] rounded-t-[34px] bg-[#F9F8F8] p-3.5 text-center shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out will-change-transform",
isClosing || isEntering ? "translate-y-full" : "translate-y-0", isClosing || isEntering ? "translate-y-full" : "translate-y-0",
className, className,
] ]

2
src/components/ui/dismiss-reason-sheet.tsx
View File

@ -119,7 +119,7 @@ export function DismissReasonSheet({
<section <section
{...props} {...props}
className={[ className={[
"w-full max-w-[375px] rounded-t-[34px] bg-[#F9F8F8] p-3.5 text-center shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out will-change-transform",
"w-full sm:max-w-[375px] rounded-t-[34px] bg-[#F9F8F8] p-3.5 text-center shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out will-change-transform",
isClosing || isEntering ? "translate-y-full" : "translate-y-0", isClosing || isEntering ? "translate-y-full" : "translate-y-0",
className, className,
] ]

2
src/components/ui/female-consent-sheet.tsx
View File

@ -123,7 +123,7 @@ export function FemaleConsentSheet({
<section <section
{...props} {...props}
className={[ className={[
"w-full max-w-[375px] rounded-t-[15px] bg-[#F9F8F8] py-5 px-4 text-left shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out will-change-transform",
"w-full sm:max-w-[375px] rounded-t-[15px] bg-[#F9F8F8] py-5 px-4 text-left shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out will-change-transform",
isClosing || isEntering ? "translate-y-full" : "translate-y-0", isClosing || isEntering ? "translate-y-full" : "translate-y-0",
className, className,
] ]

2
src/components/ui/information-sheet.tsx
View File

@ -238,7 +238,7 @@ export function InformationSheet({
<section <section
{...props} {...props}
className={[ className={[
"w-full max-w-[375px] rounded-t-[15px] bg-[#F9F8F8] p-3.5 text-center shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out will-change-transform",
"w-full sm:max-w-[375px] rounded-t-[15px] bg-[#F9F8F8] p-3.5 text-center shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out will-change-transform",
isClosing || isEntering ? "translate-y-full" : "translate-y-0", isClosing || isEntering ? "translate-y-full" : "translate-y-0",
className, className,
] ]

2
src/components/ui/report-actions-sheet.tsx
View File

@ -101,7 +101,7 @@ export function ReportActionsSheet({ onClose }: ReportActionsSheetProps) {
> >
<section <section
className={[ className={[
"w-full max-w-[375px] rounded-t-[15px] bg-[#F9F8F8] p-3.5 shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out",
"w-full sm:max-w-[375px] rounded-t-[15px] bg-[#F9F8F8] p-3.5 shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out",
isClosing || isEntering ? "translate-y-full" : "translate-y-0", isClosing || isEntering ? "translate-y-full" : "translate-y-0",
] ]
.filter(Boolean) .filter(Boolean)

Write Preview
Loading…
Cancel
Save