Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changing the card gallery to one card on the main page #145

Merged
merged 5 commits into from
Nov 15, 2024
Merged

Changing the card gallery to one card on the main page #145

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5db4581
add a card to the home page as a separate element
Majapur1 Nov 14, 2024
cd8cb71
Update frontend/src/lib/components/Frontpage.svelte
Majapur1 Nov 14, 2024
31e5ff4
renaming of FrontPageCard
Majapur1 Nov 14, 2024
570bd3a
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Nov 14, 2024
9d5bf33
renaming of FrontPageCard
Majapur1 Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions frontend/src/lib/components/Card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<script>
import { Button, Card, Tooltip } from "flowbite-svelte";
import { _ } from "svelte-i18n";
</script>

<Card class="flex justify-center mr-4 text-center max-w-prose bg-additional-color min-w-full">
<h5 class="mb-2 mt-4 text-2xl font-bold text-gray-700 dark:text-white tracking-wide">{$_("frontpage.heading")}</h5>
<p class="mb-5 text-base text-gray-600 sm:text-lg dark:text-gray-400">{$_("frontpage.summary")}</p>
<div class="justify-center mb-1 items-center mt-2">
<Button class="text-bold text-md w-44 hover:text-white dark:text-white bg-white text-gray-700">{$_("frontpage.buttonLabel")}</Button>
<Tooltip>{$_("frontpage.toolTip")}</Tooltip>
</div>
</Card>
66 changes: 8 additions & 58 deletions frontend/src/lib/components/Frontpage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,72 +3,22 @@
import { base } from "$app/paths";

import CardDisplay from "$lib/components//DataDisplay/CardDisplay.svelte";
import Card from "$lib/components/Card.svelte";
import GalleryDisplay from "$lib/components/DataDisplay/GalleryDisplay.svelte";

export let getStarted = "";

export let items = [
{
header: "Was ist Mondey?",
summary:
"Mondey ist ein wissentschaftlich geprüftes Programm zure Dokumentation der Entwicklung von Kindern bis 6 Jahren.",
href: `${base}/info`,
button: "Mehr Info",
},
{
header: "Wozu ist Mondey gut?",
summary:
"Anhand ihrer Bewertungen der Fähigkeiten des Kindes erhalten sie Feedback zum Entwicklungsstand des Kindes und können so frühzeitig Fördermaßnahmen einleiten. Dies folgt einem übersichtlichen Ampelsystem.",
href: `${base}/info`,
button: "Mehr Info",
},
{
header: "Was umfasst Mondey?",
summary:
"Mondey umfasst unterschiedliche Entwicklungsbereiche wie von Kindern im Alter von 0 bis 6 Jahren. Dazu gehören unter anderem Grob-und feinmotorik, Wahrnehmung, Denkne, Sprache und Soziale Beziehungen.",
href: `${base}/info`,
button: "Mehr Info",
},
{
header: "Wie funktioniert Mondey?",
summary:
"Sie bewerten wie gut das Kind bestimmte Alltagshandlungen durchführen kann mit Hilfe einer Liste von Fragen.",
href: `${base}/info`,
button: "Mehr Info",
},
{
header: "Wo fange ich an?",
summary:
"Um zu beginnen, müssen sie sich registrieren und ein Profil für ihr Kind anlegen.",
href: getStarted,
button: "Los geht´s",
},
{
header: "dummy?",
summary:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.",
href: `${base}/info`,
button: "Mehr Info",
},
{
header: "dummy?",
summary:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.",
href: `${base}/info`,
button: "Mehr Info",
},
{
header: "dummy?",
summary:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.",
href: `${base}/info`,
button: "Mehr Info",
},
];
export let items = [];

const props = {};
</script>

<Card
lkeegan marked this conversation as resolved.
Show resolved Hide resolved
withSearch={false}
itemComponent={Card}
componentProps={props}
Majapur1 marked this conversation as resolved.
Show resolved Hide resolved
/>

<GalleryDisplay
withSearch={false}
itemComponent={CardDisplay}
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/locales/de.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,5 +172,11 @@
"formatError": "Die angegebene email Adresse hat ein falsches Format",
"mailSentMessage": "Bitte überprüfen sie ihr E-Mail Postfach",
"sendError": "Beim Senden der Daten ist ein Fehler aufgetreten. Bitte versuchen sie es erneut"
},
"frontpage": {
"heading": "Möchten Sie die Entwicklung von Kindern begleiten und fördern?",
"summary": "Hier sind Sie genau richtig!",
"buttonLabel": "Anmeldung",
"toolTip": "Anmelden oder ein neues Konto erstellen"
}
}
3 changes: 3 additions & 0 deletions frontend/tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ export default {
800: "#4D5B8B",
900: "#46537E",
},

"additional-color": "#a4d2d0",

"milestone-answer": {
0: "#f2e8cf",
1: "#cdd993",
Expand Down