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

fixing the alignment of elements on the front page #179

Merged
merged 2 commits into from
Nov 20, 2024
Merged

fixing the alignment of elements on the front page #179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
52bb586
fixing the alignment of elements on the front page
Majapur1 Nov 20, 2024
9ca59cf
Update frontend/src/lib/components/FrontPageAbout.svelte
Majapur1 Nov 20, 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
9 changes: 6 additions & 3 deletions frontend/src/lib/components/FrontPageAbout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,13 @@ import { Card } from "flowbite-svelte";
import { _ } from "svelte-i18n";
</script>

<div class="flex mt-4 justify-center min-w-full">
<Card img={babyFlower} horizontal size="full" class="shadow-none border-none">
<h5 class="mb-8 mt-2 text-2xl font-bold tracking-tight text-gray-700 dark:text-white">{$_("frontpageAbout.heading")}</h5>
<div class="flex mt-6 justify-center min-w-full">
<Card horizontal class="max-w-4xl shadow-none border-none flex items-start space-x-6">
<img src={babyFlower} alt="{$_("frontpageAbout.alt")}" class="rounded-lg md:w-1/3 max-md:aspect-[16/8] max-md:object-cover">
<div class="flex items-start flex-col">
<h5 class="mb-8 mt-5 text-2xl font-bold tracking-tight text-gray-700 dark:text-white">{$_("frontpageAbout.heading")}</h5>
<p class="mb-3 font-normal max-w-prose text-gray-700 dark:text-gray-400">{$_("frontpageAbout.summary1")}</p>
<p class="mb-3 font-normal max-w-prose text-gray-700 dark:text-gray-400">{$_("frontpageAbout.summary2")}</p>
</div>
</Card>
</div>
6 changes: 4 additions & 2 deletions frontend/src/lib/components/FrontPageCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@ import { Button, Card, Tooltip } from "flowbite-svelte";
import { _ } from "svelte-i18n";
</script>

<div class="flex justify-center px-4 mt-6">
<Card class="flex justify-center 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>
<h5 class="mb-2 mt-4 text-xl font-bold text-gray-700 dark:text-white tracking-wide">{$_("frontpage.heading")}</h5>
<p class="mb-5 text-base text-gray-600 sm:text-md 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" onclick ={() => {
goto("/userLand/userRegistration");
}}>{$_("frontpage.buttonLabel")}</Button>
<Tooltip>{$_("frontpage.toolTip")}</Tooltip>
</div>
</Card>
</div>
3 changes: 2 additions & 1 deletion frontend/src/locales/de.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,7 @@
"frontpageAbout": {
"heading": "Was ist MONDEY?",
"summary1": "Ein mit Eltern und Fachkräften entwickeltes, wissenschaftlich geprüftes Program zur Beobachtung und Dokumentation der Entwicklung von Kindern bis 6 Jahre.",
"summary2": "Sie bewerten, wie gut das Kind bestimmte Alltagshandlungen ausführen kann. Auf dieser Basis bietet MONDEY Ihnen Feedback zum Entwicklungsstand des Kindes."
"summary2": "Sie bewerten, wie gut das Kind bestimmte Alltagshandlungen ausführen kann. Auf dieser Basis bietet MONDEY Ihnen Feedback zum Entwicklungsstand des Kindes.",
"alt": "Ein kleines Kind hält ein Gänseblümchen in der Hand"
}
}