Merge pull request #8 from ssciwr/create-abstract-content-page

add abstract page content skeleton
ssciwr · Aug 21, 2024 · 62f594a · 62f594a
2 parents bb734ad + c4fa445
commit 62f594a
Show file tree

Hide file tree

Showing 5 changed files with 242 additions and 30 deletions.
diff --git a/.gitignore b/.gitignore
@@ -19,3 +19,6 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# packaging
+package-lock.json
diff --git a/src/lib/components/AbstractContent.svelte b/src/lib/components/AbstractContent.svelte
@@ -0,0 +1,112 @@
+<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';
+	// logo
+	import logo_dark from '../assets/mondey_dark.svg';
+	import logo_light from '../assets/mondey_light.svg';
+
+	// variables for showing or hiding elements
+	export let showBottomNavbar = true;
+
+	// variables for communication upon hitting the page
+	// 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 userName = 'Registrieren';
+</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
+			href={lastpage}
+			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"
+		>
+			<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
+			href={infopage}
+			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"
+		>
+			<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
+			href={nextpage}
+			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"
+		>
+			<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>
+	</BottomNav>
+{/if}
diff --git a/src/lib/components/Frontpage.svelte b/src/lib/components/Frontpage.svelte
@@ -0,0 +1,107 @@
+<script>
+	import { Button, Card, Gallery } from 'flowbite-svelte';
+	import { ArrowRightOutline } from 'flowbite-svelte-icons';
+</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 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 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 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 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">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 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 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 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 class="w-fit">dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
+	</Card>
+</Gallery>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,31 +1,8 @@
 <script>
-	import {
-		P,
-		Banner,
-		Navbar,
-		NavBrand,
-		NavLi,
-		NavUl,
-		NavHamburger,
-		DarkMode
-	} from 'flowbite-svelte';
-	import logo_light from '$lib/assets/mondey_light.svg';
-	import logo_dark from '$lib/assets/mondey_dark.svg';
+	import AbstractContent from '$lib/components/AbstractContent.svelte';
+	import Frontpage from '$lib/components/Frontpage.svelte';
 </script>
 
-<Banner><P>This is a work-in-progress prototype frontend for the MONDEY website</P></Banner>
-<Navbar>
-	<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>
-		<NavLi href="/" active={true}>Home</NavLi>
-		<NavLi href="/">Downloads</NavLi>
-		<NavLi href="/">Aktuelles</NavLi>
-		<NavLi href="/">Kontakt</NavLi>
-	</NavUl>
-	<DarkMode />
-</Navbar>
-<div class="flex flex-col items-center justify-center"></div>
+<AbstractContent showBottomNavbar={true}>
+	<Frontpage />
+</AbstractContent>
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,5 +1,5 @@
-import flowbitePlugin from 'flowbite/plugin';
 import typographyPlugin from '@tailwindcss/typography';
+import flowbitePlugin from 'flowbite/plugin';
 
 import type { Config } from 'tailwindcss';
 
@@ -25,7 +25,20 @@ export default {
 					800: '#CC4522',
 					900: '#A5371B'
 				}
-			}
+			}, 
+            fontSize: {
+                'xs': '.75rem',
+                'sm': '.875rem',
+                'base': '1rem',
+                'lg': '1.125rem',
+                'xl': '1.25rem',
+                '2xl': '1.5rem',
+                '3xl': '1.875rem',
+                '4xl': '2.25rem',
+                '5xl': '3rem',
+                '6xl': '4rem',
+                '7xl': '5rem'
+            }
 		}
 	},