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

Componentize front page better #14

Merged
merged 6 commits into from
Aug 21, 2024
Merged

Componentize front page better #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bd837cf
start componentizing bottom navbar
MaHaWo Aug 21, 2024
85c3296
add icon component, work on styling
MaHaWo Aug 21, 2024
f36ce20
Merge branch 'main' into componentize-front-page-better
MaHaWo Aug 21, 2024
b4884e7
work on styling
MaHaWo Aug 21, 2024
0b9fbc9
reorganize basic layout
MaHaWo Aug 21, 2024
2ed7a2d
remove old comment
MaHaWo Aug 21, 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
115 changes: 27 additions & 88 deletions src/lib/components/AbstractContent.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,112 +1,51 @@
<script>
import {
Avatar,
BottomNav,
BottomNavItem,
DarkMode,
Navbar,
NavBrand,
NavHamburger,
NavLi,
NavUl,
Tooltip
} from 'flowbite-svelte';
import {
CaretLeftSolid,
CaretRightSolid,
LightbulbSolid,
MoonSolid,
SunSolid
} from 'flowbite-svelte-icons';
import { BottomNav } from 'flowbite-svelte';

import { CaretLeftSolid, CaretRightSolid, LightbulbSolid } from 'flowbite-svelte-icons';
// logo
import logo_dark from '../assets/mondey_dark.svg';
import logo_light from '../assets/mondey_light.svg';
import BottomNavElement from './Navigation/BottomNavElement.svelte';

// variables for showing or hiding elements
export let showBottomNavbar = true;

// variables for communication upon hitting the page
export let userName = 'Registrieren';

// FIXME: these are placeholders and must later be changed using contexts or other better mechanisms for inter component comunication
export let lastPage = '/';
export let nextPage = '/';
export let infoPage = '/';
export let lastpage = '/';
export let nextpage = '/';
export let infopage = '/';
</script>

<!-- Top element: basic navigation-->
<Navbar class="overflow-x-auto whitespace-nowrap">
<div class="flex flex-nowrap items-center space-x-4 rtl:space-x-reverse">
<NavBrand href="/">
<img src={logo_light} class="block h-16 dark:hidden" alt="MONDEY Logo" />
<img src={logo_dark} class="hidden h-16 dark:block" alt="MONDEY Logo" />
</NavBrand>
<NavHamburger />
<NavUl ulClass="flex flex-row space-x-4 rtl:space-x-reverse md:text-lg md:font-medium">
<NavLi href="/" active={true}>Home</NavLi>
<NavLi href="/">Aktuelles</NavLi>
<NavLi href="/">Downloads</NavLi>
<NavLi href="/">Kontakt</NavLi>
<DarkMode
class="rounded-lg p-2 text-xl text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
>
<MoonSolid slot="darkIcon" />
<SunSolid slot="lightIcon" />
</DarkMode>
<Tooltip arrow={false}>Darkmode ein- oder ausschalten</Tooltip>
</NavUl>
<div class="flex items-center space-x-4 rtl:space-x-reverse">
<Avatar
class="space-y-1 text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
rounded
border
/>
<div class="flex items-center space-x-4 rtl:space-x-reverse">{userName}</div>
<Tooltip>Registrieren oder einloggen</Tooltip>
</div>
</div>
</Navbar>

<!--Page content goes here-->
<div class="mx-auto max-w-6xl flex-1 overflow-y-auto p-4 pb-20">
<slot></slot>
</div>

{#if showBottomNavbar}
<!-- bottom element: back, info and next buttons-->
<BottomNav
class="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
classInner="grid-cols-3"
>
<BottomNavItem
btnName="Zurück"
btnClass="text-gray-500 dark:text-gray-400 hover:text-primary-800 dark:hover:text-primary-500 group-hover:text-primary-800 dark:group-hover:text-primary-500"
href={lastPage}
>
<CaretLeftSolid
class="mb-1 h-8 w-8 text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
/>
<Tooltip arrow={false}>Zur letzten Seite</Tooltip>
</BottomNavItem>
<BottomNavItem
btnName="Hilfe"
btnClass="text-gray-500 dark:text-gray-400 hover:text-primary-800 dark:hover:text-primary-500 group-hover:text-primary-800 dark:group-hover:text-primary-500"
href={infoPage}
>
<LightbulbSolid
class="mb-1 h-8 w-8 text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
/>
<Tooltip arrow={false}>Hilfe</Tooltip>
</BottomNavItem>
<BottomNavItem
btnName="Weiter"
btnClass="text-gray-500 dark:text-gray-400 hover:text-primary-800 dark:hover:text-primary-500 group-hover:text-primary-800 dark:group-hover:text-primary-500"
href={nextPage}
>
<CaretRightSolid
class="mb-1 h-8 w-8 text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
/>
<Tooltip arrow={false}>Zur nächsten Seite</Tooltip>
</BottomNavItem>
<BottomNavElement
href={lastpage}
description={'Zurück'}
Icon={CaretLeftSolid}
tooltip={'Zur letzten Seite'}
/>

<BottomNavElement
href={infopage}
description={'Hilfe'}
Icon={LightbulbSolid}
tooltip={'Zusätzliche Informationen'}
/>

<BottomNavElement
href={nextpage}
description={'Weiter'}
Icon={CaretRightSolid}
tooltip={'Zur nächsten Seite'}
/>
</BottomNav>
{/if}
20 changes: 20 additions & 0 deletions src/lib/components/DataDisplay/CardDisplay.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<script>
import { Button, Card } from 'flowbite-svelte';
import { ArrowRightOutline } from 'flowbite-svelte-icons';
export let header = 'header';
export let summary = 'summary';
export let button = 'button';
export let link = '/';
</script>

<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
{header}
</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
{summary}
</p>
<Button href={link} class="w-fit"
>{button} <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
>
</Card>
186 changes: 68 additions & 118 deletions src/lib/components/Frontpage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,126 +1,76 @@
<script>
import { Button, Card, Gallery } from 'flowbite-svelte';
import { ArrowRightOutline } from 'flowbite-svelte-icons';
import CardDisplay from '$lib/components/DataDisplay/CardDisplay.svelte';
import { Gallery } from 'flowbite-svelte';
export let getStarted = '/';
console.log('get started: ', 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.',
link: '/info',
buttonName: '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.',
link: '/info',
buttonName: '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.',
link: '/info',
buttonName: 'Mehr Info'
},
{
header: 'Wie funktioniert Mondey?',
summary:
'Sie bewerten wie gut das Kind bestimmte Alltagshandlungen durchführen kann mit Hilfe einer Liste von Fragen.',
link: '/info',
buttonName: 'Mehr Info'
},
{
header: 'Wo fange ich an?',
summary: 'Um zu beginnen, müssen sie sich registrieren und ein Profil für ihr Kind anlegen.',
link: '/firstdropdown',
buttonName: '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.',
link: '/info',
buttonName: '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.',
link: '/info',
buttonName: '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.',
link: '/info',
buttonName: 'Mehr Info'
}
];
</script>

<!-- This is a dummy landing page that is only there to check that the AbstractComponent works as it should-->
<Gallery class="grid-cols-1 gap-y-12 md:grid-cols-2">
<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
Was ist Mondey?
</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
<i>Mondey</i> ist ein wissentschaftlich geprüftes Programm zure Dokumentation der Entwicklung von
Kindern bis 6 Jahren.
</p>
<Button href="/info" class="w-fit"
>Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
>
</Card>

<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
Wozu ist Mondey gut?
</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
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.
</p>
<Button href="/info" class="w-fit"
>Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
>
</Card>

<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
Was umfasst Mondey?
</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
<i>Mondey</i> 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.
</p>
<Button href="/info" class="w-fit"
>Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
>
</Card>
<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
Wie funktioniert Mondey?
</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
Sie bewerten wie gut das Kind bestimmte Alltagshandlungen durchführen kann mit Hilfe einer
Liste von Fragen.
</p>
<Button href="/info" class="w-fit"
>Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
>
</Card>

<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
Wo fange ich an?
</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
Um zu beginnen, müssen sie sich registrieren und ein Profil für ihr Kind anlegen.
</p>
<Button class="w-fit" href={getStarted}
>Los geht's <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
>
</Card>

<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">dummy?</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
<i
>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio
facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.
</i>
</p>
<Button href="/info" class="w-fit"
>dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
>
</Card>

<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">dummy?</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
<i
>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio
facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.
</i>
</p>
<Button href="/info" class="w-fit"
>dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
>
</Card>

<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">dummy?</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
<i
>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio
facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.
</i>
</p>
<Button href="/info" class="w-fit"
>dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
>
</Card>

<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">dummy?</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
<i
>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio
facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.
</i>
</p>
<Button href="/info" class="w-fit"
>dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
>
</Card>
{#each items as item}
<CardDisplay
header={item.header}
summary={item.summary}
link={item.link}
button={item.buttonName}
/>
{/each}
</Gallery>
17 changes: 17 additions & 0 deletions src/lib/components/Navigation/BottomNavElement.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<script>
import { BottomNavItem, Tooltip } from 'flowbite-svelte';

export let description;
export let href;
export let Icon;
export let tooltip;
</script>

<BottomNavItem
{href}
btnName={description}
btnClass="text-gray-500 dark:text-gray-400 hover:text-primary-800 dark:hover:text-primary-500 group-hover:text-primary-800 dark:group-hover:text-primary-500"
>
<svelte:component this={Icon} />
<Tooltip arrow={false}>{tooltip}</Tooltip>
</BottomNavItem>
Loading