Skip to content

Commit

Permalink
[Web]: Fix mobile view Issues on "recipient selection page" (#966)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssandino
ssandino authored Dec 3, 2024
1 parent c0b90fc commit 3880920
Show file tree
Hide file tree
Showing 6 changed files with 60 additions and 92 deletions.
8 changes: 3 additions & 5 deletions shared/locales/de/website-selection.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
],
"population": "8,104,666,773",
"potential": "potenzielle",
"scope": "Empfänger:innen leben auf der Erde.",
"scope": "Empfänger:innen leben auf der Erde",
"continue": "Jedoch"
},
"section-2": {
Expand All @@ -43,11 +43,9 @@
}
],
"amount": "USD 300,000+",
"amount-context": "an Spenden erhalten",
"amount-context": "Spenden erhalten ↗",
"scope": "Mehr ",
"transparency-page": "Zahlen und Transparenz ↗",
"continue-1": "Unsere Auswahlprinzipien sind",
"continue-2": "Fairness und Transparenz"
"continue-1": "Auswahlverfahren"
},
"section-3": {
"preselection-title": "Faire Vorauswahl",
Expand Down
8 changes: 3 additions & 5 deletions shared/locales/en/website-selection.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,19 +32,17 @@
"text": "Due to limited resources, "
},
{
"text": "we focus on those",
"text": "we focus on those ",
"color": "accent"
},
{
"text": "who need Social Income the most."
}
],
"amount": "USD 300,000+",
"amount-context": "raised to date",
"amount-context": "raised to date ↗",
"scope": "visit our ",
"transparency-page": "transparency page ↗",
"continue-1": "For us, selecting is about",
"continue-2": "fairness and transparency"
"continue-1": "Selection Process"
},
"section-3": {
"preselection-title": "Fair Preselection",
Expand Down
8 changes: 3 additions & 5 deletions shared/locales/fr/website-selection.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"subtitle": "Notre réalité",
"title": [
{
"text": "Nos ressources étant limitées, "
"text": "Nos ressources étant limitées, "
},
{
"text": "nous concentrons nos efforts ",
Expand All @@ -40,11 +40,9 @@
}
],
"amount": "USD 300,000+",
"amount-context": "reçus à ce jour",
"amount-context": "reçus à ce jour ↗",
"scope": "Plus de ",
"transparency-page": "transparence et chiffres ↗",
"continue-1": "Pour nous, la sélection est une",
"continue-2": "question d'équité et de transparence"
"continue-1": "Processus de sélection"
},
"section-3": {
"preselection-title": "Une présélection équitable",
Expand Down
8 changes: 3 additions & 5 deletions shared/locales/it/website-selection.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"subtitle": "La nostra realtà",
"title": [
{
"text": "A causa delle risorse limitate che abbiamo a disposizione,"
"text": "A causa delle risorse limitate che abbiamo a disposizione, "
},
{
"text": "ci concentriamo su coloro ",
Expand All @@ -40,11 +40,9 @@
}
],
"amount": "USD 300,000+",
"amount-context": "raccolti fino a oggi",
"amount-context": "raccolti fino a oggi ↗",
"scope": "Più ",
"transparency-page": "trasparenza e numeri ↗",
"continue-1": "Per noi, scegliere significa",
"continue-2": "equità e trasparenza"
"continue-1": "Processo di selezione"
},
"section-3": {
"preselection-title": "Preselezione Equa",
Expand Down
49 changes: 21 additions & 28 deletions ...pp/[lang]/[region]/(website)/transparency/recipient-selection/(sections)/hero-section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,14 @@ export async function HeroSection({ lang }: DefaultParams) {
});

return (
<div className="theme-blue bg-background relative flex h-[calc(100svh)] items-center justify-center">
<div className="text-center">
<div className="mb-2">
<Typography size="xl" className="mb-8 opacity-50">
<div className="theme-blue flex h-[calc(100svh)] min-h-[600px] flex-col">
<div className="mt-[80px] flex flex-grow flex-col items-center justify-center p-6 text-center">
<div className="pb-4">
<Typography size="xl" className="opacity-60">
{translator.t('section-1.subtitle')}
</Typography>
</div>

<div className="mx-auto mb-20 max-w-2xl">
<div className="max-w-3xl">
{translator.t<{ text: string; color?: FontColor }[]>('section-1.title').map((title, index) => (
<Typography
key={index}
Expand All @@ -34,32 +33,26 @@ export async function HeroSection({ lang }: DefaultParams) {
</Typography>
))}
</div>
</div>

<div className="mt-20 flex flex-col items-center justify-center md:flex-row">
<div className="mb-4 mr-3 mt-1 flex-shrink-0 md:mb-0">
<Image className="h-16 w-16" src={globeRotating} alt="Globe" />
</div>

<div className="text-center md:text-left">
<div className="mx-auto max-w-4xl whitespace-pre text-white">
<Typography as="span" color="accent" className="inline-block whitespace-pre text-xl">
{translator.t('section-1.population')} {translator.t('section-1.potential')}
</Typography>

<Typography as="span" className="block whitespace-pre text-xl">
{translator.t('section-1.scope')}
</Typography>
</div>
<div className="flex flex-grow items-start justify-center">
<div className="flex flex-col items-center sm:flex-row sm:space-x-4">
<Image className="h-12 w-12 md:h-20 md:w-20" src={globeRotating} alt="Globe Icon" />
<div className="mx-auto my-4 max-w-4xl whitespace-pre text-center sm:text-left">
<Typography as="span" color="accent" className="inline-block text-xl sm:text-2xl">
{translator.t('section-1.population')} {translator.t('section-1.potential')}
</Typography>
<Typography as="span" className="block text-xl sm:text-2xl">
{translator.t('section-1.scope')}
</Typography>
</div>
</div>
</div>

<div className="absolute bottom-[20px] left-1/2 -translate-x-1/2 transform text-center">
<Typography size="xl" className="mb-2">
{translator.t('section-1.continue')}
</Typography>
<div className="flex justify-center">
<ScrollToChevron elementId="resources-section" />
</div>
<div className="flex flex-col items-center py-4 text-center">
<Typography size="xl">{translator.t('section-1.continue')}</Typography>
<div className="flex justify-center">
<ScrollToChevron elementId="resources-section" />
</div>
</div>
</div>
Expand Down
71 changes: 27 additions & 44 deletions ...c/app/[lang]/[region]/(website)/transparency/recipient-selection/(sections)/resources.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { DefaultParams } from '@/app/[lang]/[region]';
import ScrollToChevron from '@/app/[lang]/[region]/(website)/transparency/recipient-selection/(components)/scroll-to-chevron';
import { Translator } from '@socialincome/shared/src/utils/i18n';
import { BaseContainer, Button, Typography } from '@socialincome/ui';
import { Button, Typography } from '@socialincome/ui';
import { FontColor } from '@socialincome/ui/src/interfaces/color';
import Image from 'next/image';
import transparency from '../(assets)/transparency.svg';
Expand All @@ -13,17 +13,12 @@ export async function Resources({ lang }: DefaultParams) {
});

return (
<BaseContainer
id="resources-section"
className="bg-background relative flex h-[calc(100svh)] items-center justify-center"
>
<div className="text-center">
<div className="mb-2">
<Typography size="xl" className="mb-8">
{translator.t('section-2.subtitle')}
</Typography>
<div id="resources-section" className="flex h-[calc(100svh)] min-h-[600px] flex-col">
<div className="mt-[80px] flex flex-grow flex-col items-center justify-center p-6 text-center">
<div className="pb-4">
<Typography size="xl">{translator.t('section-2.subtitle')}</Typography>
</div>
<div className="mx-auto mb-20 max-w-2xl">
<div className="max-w-3xl">
{translator.t<{ text: string; color?: FontColor }[]>('section-2.title').map((title, index) => (
<Typography
key={index}
Expand All @@ -32,47 +27,35 @@ export async function Resources({ lang }: DefaultParams) {
color={title.color}
className="text-3xl sm:text-4xl md:text-4xl"
>
{title.text}{' '}
{title.text}
</Typography>
))}
</div>
<div className="mt-20 flex flex-col items-center justify-center md:flex-row">
<div className="mb-4 mr-3 mt-1 flex-shrink-0 md:mb-0">
<Image className="h-16 w-16" src={transparency} alt="Globe" />
</div>
</div>

<div className="text-center md:text-left">
<div className="mx-auto max-w-4xl">
<Typography as="span" color="accent" className="block text-xl">
{translator.t('section-2.amount')} {translator.t('section-2.amount-context')}
</Typography>
<div className="flex items-center justify-center space-x-1 md:justify-start">
<Typography as="span" className="text-xl">
{translator.t('section-2.scope')}
</Typography>
<Button variant="link">
<a href="../transparency/finances" target="_blank" rel="noopener noreferrer">
<Typography as="span" className="text-xl">
{translator.t('section-2.transparency-page')}
</Typography>
</a>
</Button>
</div>
<div className="flex flex-grow items-start justify-center">
<div className="flex flex-col items-center sm:flex-row sm:space-x-4">
<Image className="h-12 w-12 md:h-20 md:w-20" src={transparency} alt="Transparency Icon" />
<div className="mx-auto my-4 max-w-4xl text-center sm:text-left">
<div>
<Button variant="link">
<a href="../transparency/finances" target="_blank" rel="noopener noreferrer">
<Typography as="span" className="text-xl sm:text-2xl">
{translator.t('section-2.amount')} {translator.t('section-2.amount-context')}
</Typography>
</a>
</Button>
</div>
</div>
</div>
<div className="absolute bottom-[20px] left-0 right-0 text-center">
<Typography size="xl" className="mb-1">
{translator.t('section-2.continue-1')}
</Typography>
<Typography size="xl" className="mb-2">
{translator.t('section-2.continue-2')}
</Typography>
<div className="flex justify-center">
<ScrollToChevron elementId="selection-process-section" />
</div>
</div>

<div className="flex flex-col items-center py-4 text-center">
<Typography size="xl">{translator.t('section-2.continue-1')}</Typography>
<div className="flex justify-center">
<ScrollToChevron elementId="selection-process-section" />
</div>
</div>
</BaseContainer>
</div>
);
}

0 comments on commit 3880920

Please sign in to comment.