Skip to content

Commit

Permalink
Add remaining cards
Browse files Browse the repository at this point in the history
  • Loading branch information
D3strukt0r committed Mar 23, 2024
1 parent 90c3a84 commit 045e0aa
Show file tree
Hide file tree
Showing 12 changed files with 216 additions and 62 deletions.
13 changes: 0 additions & 13 deletions pwa/.docker/rootfs/docker-entrypoint.d/01_fix-file-permissions.sh

This file was deleted.

Binary file added pwa/public/gallery.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added pwa/public/infos.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added pwa/public/map.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 17 additions & 1 deletion pwa/public/translations/app.de.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,21 @@
"homepage.menu.vegetarian.text": "Vorspeise: \n\nHauptgang: \n\nDessert: \n\n",
"homepage.qrScanner.activateCamera": "Kamera aktivieren",
"homepage.qrScanner.invalid": "Der QR Code ist ungültig",
"homepage.qrScanner.loggingIn": "QR Code gescannt, Login im gange ..."
"homepage.qrScanner.loggingIn": "QR Code gescannt, Login im gange ...",
"homepage.map.title1": "Adresse",
"homepage.map.address": "Wasserschloss Inzlingen\nRiehenstraße 5\n79594 Inzlingen\nDeutschland",
"homepage.map.addressInfo": "Parkmöglichkeiten gibt es direkt beim Schloss. Es sollte genug für alle haben, aber für alle Fälle wäre es super, wenn ihr euch überlegt, ob eine Fahrgemeinschaft Sinn macht.",
"homepage.map.title2": "Ablauf",
"homepage.map.plan": "Wir werden den Tag um 14:00 Uhr vor dem Schloss mit der Trauung im Freien beginnen. Sollte das Wetter nicht mitspielen, werden wir die Trauung in einen kleinen Raum im Schloss verlegen. Bitte stattet euch dem Wetter entsprechend mit Sonnencreme oder einer Jacke aus.\nSollte sich doch noch etwas am Plan ändern, werdet ihr das frühzeitig von uns erfahren. Untenstehend findet ihr noch eine grobe Timeline von unserem Tag:",
"homepage.info.title": "Wichtigste Infos",
"homepage.info.date": "Datum: Samstag, 21.09.2024\nTrauung: 14:00 Uhr\nOrt: Wasserschloss Inzlingen",
"homepage.info.dresscode.title": "Dresscode",
"homepage.info.dresscode.text": "Wir würden uns freuen, Euch in festlicher Abendgarderobe begrüßen zu dürfen.",
"homepage.info.gifts.title": "Geschenke",
"homepage.info.gifts.text": "Vielen Dank, dass ihr etwas zu unserer Hochzeit beisteuern wollt! Da wir nach unserer Hochzeit erst mal eine Auszeit nehmen, würdet ihr uns mit einem kleinen Beitrag an unsere Ferienkasse am meisten helfen.",
"homepage.info.games.title": "Ideen Spiele",
"homepage.info.games.text": "Wir haben ein super Team, das sich um den Ablauf und die Spiele an diesem Tag kümmert. Bitte meldet euch für Ideen und Anregungen direkt bei ihnen. Die Email dafür könnt ihr in eurer Einladung finden oder einfach unter [email protected].",
"homepage.gallery.title": "Fotogalerie",
"homepage.gallery.text": "Wir freuen uns schon auf die vielen tollen Bilder, die es geben wird. Bitte lasst doch alle daran teilhaben und ladet diese hier hoch, wo sie jeder ansehen und herunterladen kann. Zu einem späteren Zeitpunkt werden wir hier auch die Bilder von unserem Fotografen hochladen.",
"footer.copyright": "Images by Sacha Kocher and Pexels\n© 2024"
}
27 changes: 27 additions & 0 deletions pwa/src/components/homepage/Gallery.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import {useTranslation} from "react-i18next";
import gallery from '/gallery.jpeg';
import AlignedCard from "../../layout/AlignedCard.tsx";

export default function Gallery({id}: {id?: string}) {
const {t} = useTranslation('app')

return (
<AlignedCard
id={id}
image={gallery}
topContent={(
<>
<h2 className="uppercase text-3xl mb-6 philosopher-regular">{t('homepage.gallery.title')}</h2>
<p className="whitespace-pre-line noto-sans-regular">{t('homepage.gallery.text')}</p>
</>
)}
bottomContent={(
<>
</>
)}
align="right"
backgroundColor="red-light"
imageShadowColor="white"
/>
)
}
63 changes: 63 additions & 0 deletions pwa/src/components/homepage/ImportantInfo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import {useTranslation} from "react-i18next";
import infos from '/infos.png';
import AlignedCard from "../../layout/AlignedCard.tsx";
import Collapsible from "../../layout/Collapsible.tsx";

export default function ImportantInfo({id}: {id?: string}) {
const {t} = useTranslation('app')

return (
<AlignedCard
id={id}
image={infos}
topContent={(
<>
<h2 className="uppercase text-3xl mb-6 philosopher-regular">{t('homepage.info.title')}</h2>
<p className="whitespace-pre-line noto-sans-regular">{t('homepage.info.date')}</p>
</>
)}
bottomContent={(
<>
<div className="md:hidden">
<Collapsible
menuOptions={[
{
key: 'dresscode',
title: t('homepage.info.dresscode.title'),
text: t('homepage.info.dresscode.text')
},
{
key: 'gifts',
title: t('homepage.info.gifts.title'),
text: t('homepage.info.gifts.text')
},
{
key: 'games',
title: t('homepage.info.games.title'),
text: t('homepage.info.games.text')
}
]}
/>
</div>
<div className="hidden md:grid grid-rows-2 grid-flow-col gap-8">
<div>
<h3 className="text-2xl mb-4 philosopher-regular">{t('homepage.info.dresscode.title')}</h3>
<p className="whitespace-pre-line noto-sans-regular">{t('homepage.info.dresscode.text')}</p>
</div>
<div>
<h3 className="text-2xl mb-4 philosopher-regular">{t('homepage.info.gifts.title')}</h3>
<p className="whitespace-pre-line noto-sans-regular">{t('homepage.info.gifts.text')}</p>
</div>
<div>
<h3 className="text-2xl mb-4 philosopher-regular">{t('homepage.info.games.title')}</h3>
<p className="whitespace-pre-line noto-sans-regular">{t('homepage.info.games.text')}</p>
</div>
</div>
</>
)}
align="left"
backgroundColor="white"
imageShadowColor="gray-dark"
/>
)
}
30 changes: 30 additions & 0 deletions pwa/src/components/homepage/MapAndPlan.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import {useTranslation} from "react-i18next";
import map from '/map.png';
import AlignedCard from "../../layout/AlignedCard.tsx";

export default function MapAndPlan({id}: {id?: string}) {
const {t} = useTranslation('app')

return (
<AlignedCard
id={id}
image={map}
topContent={(
<>
<h2 className="uppercase text-3xl mb-6 philosopher-regular">{t('homepage.map.title1')}</h2>
<p className="whitespace-pre-line philosopher-regular mb-4">{t('homepage.map.address')}</p>
<p className="noto-sans-regular">{t('homepage.map.addressInfo')}</p>
</>
)}
bottomContent={(
<>
<h2 className="uppercase text-3xl mb-6 philosopher-regular">{t('homepage.map.title2')}</h2>
<p className="noto-sans-regular">{t('homepage.map.plan')}</p>
</>
)}
align="right"
backgroundColor="gray-dark"
imageShadowColor="red-light"
/>
)
}
57 changes: 15 additions & 42 deletions pwa/src/components/homepage/MenuAndSelection.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
import {useTranslation} from "react-i18next";
import menu from '/menu.png';
import {Disclosure} from "@headlessui/react";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faChevronDown} from "@fortawesome/free-solid-svg-icons";
import clsx from "clsx";
import QrScannerCheck, {CountdownHandle} from "./QrScannerCheck.tsx";
import {useRef} from "react";
import AlignedCard from "../../layout/AlignedCard.tsx";
import Collapsible from "../../layout/Collapsible.tsx";

// https://stackoverflow.com/a/43467144/4156752
function isValidHttpUrl(string: string) {
Expand All @@ -24,19 +21,6 @@ function isValidHttpUrl(string: string) {
export default function ManuAndSelection({id}: {id?: string}) {
const {t} = useTranslation('app')

const menuOptions = [
{
key: 'meat',
title: t('homepage.menu.meat.title'),
text: t('homepage.menu.meat.text')
},
{
key: 'vegetarian',
title: t('homepage.menu.vegetarian.title'),
text: t('homepage.menu.vegetarian.text')
}
];

const qrRef = useRef<CountdownHandle | undefined>(undefined);

async function handleScan(result) {
Expand Down Expand Up @@ -83,31 +67,20 @@ export default function ManuAndSelection({id}: {id?: string}) {
<>
<h2 className="uppercase text-3xl mb-6 philosopher-regular">{t('homepage.menu.title')}</h2>
<div className="md:hidden">
{menuOptions.map((item, index) => (
<Disclosure
as="div"
key={item.key}
className={clsx('border-b-[1px] border-gray-dark', {'border-t-[1px]': index === 0})}
>
{({open}) => (
<>
<Disclosure.Button className="py-2">
<FontAwesomeIcon
icon={faChevronDown}
className={clsx(
'mr-4 transform transition-transform motion-reduce:transition-none',
{'rotate-180': open}
)}
/>
<span className="text-lg philosopher-regular">{item.title}</span>
</Disclosure.Button>
<Disclosure.Panel className="whitespace-pre-line ml-8 noto-sans-regular">
{item.text}
</Disclosure.Panel>
</>
)}
</Disclosure>
))}
<Collapsible
menuOptions={[
{
key: 'meat',
title: t('homepage.menu.meat.title'),
text: t('homepage.menu.meat.text')
},
{
key: 'vegetarian',
title: t('homepage.menu.vegetarian.title'),
text: t('homepage.menu.vegetarian.text')
}
]}
/>
</div>
<div className="hidden md:block">
<h3 className="text-2xl mb-4 philosopher-regular">{t('homepage.menu.meat.title')}</h3>
Expand Down
20 changes: 15 additions & 5 deletions pwa/src/layout/AlignedCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function AlignedCard({id, image, topContent, bottomContent, align
topContent: ReactNode;
bottomContent: ReactNode;
align: 'left' | 'right';
backgroundColor: 'red-light' | 'white';
backgroundColor: 'red-light' | 'gray-dark' | 'white';
imageShadowColor: 'red-light' | 'red-dark' | 'gray-dark' | 'white';
}) {
return (
Expand All @@ -22,10 +22,12 @@ export default function AlignedCard({id, image, topContent, bottomContent, align
'bg-gradient-to-r from-45% to-55%',
{
'from-red-light': align === 'left' && backgroundColor === 'red-light',
'from-gray-dark': align === 'left' && backgroundColor === 'gray-dark',
'from-white': align === 'left' && backgroundColor === 'white',
'to-transparent': align === 'left',
'from-transparent': align === 'right',
'to-red-light': align === 'right' && backgroundColor === 'red-light',
'to-gray-dark': align === 'right' && backgroundColor === 'gray-dark',
'to-white': align === 'right' && backgroundColor === 'white',
},
)}
Expand All @@ -44,6 +46,7 @@ export default function AlignedCard({id, image, topContent, bottomContent, align
<div
className={clsx({
'bg-red-light': backgroundColor === 'red-light',
'bg-gray-dark': backgroundColor === 'gray-dark',
'bg-white': backgroundColor === 'white',
})}
>
Expand All @@ -67,15 +70,20 @@ export default function AlignedCard({id, image, topContent, bottomContent, align
{
'md:translate-x-12': align === 'left',
'md:-translate-x-12': align === 'right',
[`md:shadow-[-1rem_1rem_0_0_${fullConfig.theme.colors['red-light']}]`]: imageShadowColor === 'red-light',
[`md:shadow-[-1rem_1rem_0_0_${fullConfig.theme.colors['red-dark']}]`]: imageShadowColor === 'red-dark',
[`md:shadow-[-1rem_1rem_0_0_${fullConfig.theme.colors['gray-dark']}]`]: imageShadowColor === 'gray-dark',
[`md:shadow-[-1rem_1rem_0_0_#dab4a7]`]: imageShadowColor === 'red-light',
[`md:shadow-[-1rem_1rem_0_0_#8c594d]`]: imageShadowColor === 'red-dark',
[`md:shadow-[-1rem_1rem_0_0_#403a37]`]: imageShadowColor === 'gray-dark',
[`md:shadow-[-1rem_1rem_0_0_#ffffff]`]: imageShadowColor === 'white',
},
)}
/>
</div>
<div className="flex-1 m-8 md:mx-0">
<div
className={clsx(
'flex-1 m-8 md:mx-0',
{'text-white': backgroundColor === 'gray-dark'}
)}
>
{topContent}
</div>
</div>
Expand All @@ -84,6 +92,7 @@ export default function AlignedCard({id, image, topContent, bottomContent, align
'md:pt-8',
{
'bg-red-light': backgroundColor === 'red-light',
'bg-gray-dark': backgroundColor === 'gray-dark',
'bg-white': backgroundColor === 'white'
},
)}
Expand All @@ -94,6 +103,7 @@ export default function AlignedCard({id, image, topContent, bottomContent, align
{
'md:pl-0': align === 'left',
'md:pr-0': align === 'right',
'text-white': backgroundColor === 'gray-dark',
},
)}
>
Expand Down
33 changes: 33 additions & 0 deletions pwa/src/layout/Collapsible.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import {Disclosure} from "@headlessui/react";
import clsx from "clsx";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faChevronDown} from "@fortawesome/free-solid-svg-icons";
import {ReactNode} from "react";

export default function Collapsible({menuOptions}: {menuOptions: {key: string, title: ReactNode, text: ReactNode}[]}) {
return menuOptions.map((item, index) => (
<Disclosure
as="div"
key={item.key}
className={clsx('border-b-[1px] border-gray-dark', {'border-t-[1px]': index === 0})}
>
{({open}) => (
<>
<Disclosure.Button className="py-2">
<FontAwesomeIcon
icon={faChevronDown}
className={clsx(
'mr-4 transform transition-transform motion-reduce:transition-none',
{'rotate-180': open}
)}
/>
<span className="text-lg philosopher-regular">{item.title}</span>
</Disclosure.Button>
<Disclosure.Panel className="whitespace-pre-line ml-8 noto-sans-regular">
{item.text}
</Disclosure.Panel>
</>
)}
</Disclosure>
));
}
17 changes: 16 additions & 1 deletion pwa/src/pages/Homepage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ import Logo from "../assets/Logo.tsx";
import {useTranslation} from "react-i18next";
import HowToWedding from "../components/homepage/HowToWedding.tsx";
import MenuAndSelection from "../components/homepage/MenuAndSelection.tsx";
import MapAndPlan from "../components/homepage/MapAndPlan.tsx";
import ImportantInfo from "../components/homepage/ImportantInfo.tsx";
import Gallery from "../components/homepage/Gallery.tsx";

export default function Homepage() {
const {t} = useTranslation("app")
Expand All @@ -26,7 +29,7 @@ export default function Homepage() {
},
{
label: t('menu.process'),
route: '#process'
route: '#address'
},
{
label: t('menu.importantInfo'),
Expand All @@ -44,6 +47,18 @@ export default function Homepage() {
<div className="md:pb-16">
<MenuAndSelection id="menu" />
</div>
<div className="md:pb-16">
<MapAndPlan id="address" />
</div>
<div className="md:pb-16">
<ImportantInfo id="important-info" />
</div>
<div className="md:pb-16">
<Gallery id="gallery" />
</div>
<footer className="bg-gray-dark text-white">
<p className="text-center whitespace-pre-line py-4 text-sm">{t('footer.copyright')}</p>
</footer>
</>
);
}

0 comments on commit 045e0aa

Please sign in to comment.