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.

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

Display multiple images in Milestone component #58

Merged
merged 1 commit into from
Sep 17, 2024
Merged
Changes from all commits
Commits
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
Display multiple images in Milestone component
- milestone component cycles through available images for that milestone
- transition via opacity every 5secs
- provide list of image urls in demo data instead of a single image
- remove padding on mobile devices to use more of the screen
- increase max width of Milestone component on large screens
- resolves #51
  • Loading branch information
lkeegan committed Sep 16, 2024
commit 1deeebbb01229361b9595a7873571c0a4c3ef292
21 changes: 16 additions & 5 deletions frontend/src/lib/components/Milestone.svelte
Original file line number Diff line number Diff line change
@@ -11,12 +11,18 @@
let autoGoToNextMilestone: boolean = false;

// build list of possible image urls at build time to be able to dynamically use them at run time:
const images: Record<string, string> = import.meta.glob('$lib/assets/*.jpg', {
const img_urls: Record<string, string> = import.meta.glob('$lib/assets/*.jpg', {
eager: true,
query: '?url',
import: 'default'
});

let currentImageIndex:number = 0;
const imageInterval = 5000;
lkeegan marked this conversation as resolved.
Show resolved Hide resolved
setInterval(() => {
currentImageIndex = (currentImageIndex + 1) % data.milestones[currentMilestoneIndex].imgs.length;
}, imageInterval);

function prevMilestone() {
if (currentMilestoneIndex === 0) {
console.log("prevMilestone: Already at first milestone, ignoring");
@@ -54,8 +60,8 @@

</script>

<div class="flex flex-col bg-white border border-1 border-gray-200 rounded-lg shadow dark:border-gray-700 dark:bg-gray-800 md:max-w-5xl">
<div class="bg-gray-100 dark:bg-gray-600 rounded-t-lg">
<div class="flex flex-col bg-white border border-1 border-gray-200 md:rounded-lg shadow dark:border-gray-700 dark:bg-gray-800 md:max-w-7xl">
<div class="bg-gray-100 dark:bg-gray-600 md:rounded-t-lg">
<Breadcrumb olClass="inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse flex-wrap" navClass="m-2">
<BreadcrumbItem href="#" home>Start</BreadcrumbItem>
<BreadcrumbItem href="#">MEIKE</BreadcrumbItem>
@@ -67,8 +73,13 @@
</div>
<div>
<div class="w-full flex flex-col md:flex-row">
<img class="object-cover h-48 md:h-96 md:rounded-bl-lg w-full md:w-64 lg:w-96"
src={images[`/src/lib/assets/${data.milestones[currentMilestoneIndex].img}`]} alt="">
<div>
{#each data.milestones[currentMilestoneIndex].imgs as img, imgIndex}
<img class={`absolute object-cover h-48 md:h-96 md:rounded-bl-lg w-full md:w-48 lg:w-72 xl:w-96 transition duration-1000 ease-in-out ${imgIndex===currentImageIndex ? 'opacity-100' : 'opacity-0'}`}
src={img_urls[`/src/lib/assets/${img}`]} alt="">
{/each}
<div class="h-48 md:h-96 md:rounded-bl-lg w-full md:w-48 lg:w-72 xl:w-96"></div>
</div>
<div class="m-2 md:m-4">
<h2 class="mb-2 text-2xl font-bold text-gray-700 dark:text-gray-400">{data.milestones[currentMilestoneIndex].title}</h2>
<P>{data.milestones[currentMilestoneIndex].desc}</P>
2 changes: 1 addition & 1 deletion frontend/src/routes/+layout.svelte
Original file line number Diff line number Diff line change
@@ -41,7 +41,7 @@
</Navbar>

<div
class="mx-[max(10vw,2rem)] my-[max(2vw,2rem)] flex-auto items-center justify-center overflow-y-auto pb-20"
class="md:mx-[max(10vw,2rem)] md:my-[max(2vw,2rem)] flex-auto items-center justify-center overflow-y-auto pb-20"
>
<slot></slot>
</div>
16 changes: 8 additions & 8 deletions frontend/src/routes/milestone/+page.svelte
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@
"desc": "Kind springt mit beiden Beinen gleichzeitig hoch und überwindet im Sprung freihändig einen (kleinen) Absatz oder eine Stufe. Es kommt sicher wieder im Stand auf.",
"observation": "Beobachten Sie, ob das Kind spontan oder nach Aufforderung von einer Treppenstufe oder einem ähnlich hohen Absatz springt! Es sollte tatsächlich mit beiden Beinen gleichzeitig losspringen, sich nirgends festhalten und beim Landen nicht mit der Hand abfangen. Sie sollten es beim Springen auch nicht an die Hand nehmen müssen. Wurde dieses Verhalten mehrmals sicher ausgeführt, gilt der Meilenstein zuverlässig gekonnt. Ist das Kind noch leicht unsicher, springt meist mit beiden Beinen versetzt los, oder berührt beim Landen mit der Hand den Boden, ist das Verhalten weitgehend gekonnt. Wagt es den Sprung nur, wenn man seine Hand hält und/oder führt es den Sprung noch unsauber aus, ist das Verhalten in Ansätzen gekonnt. In allen anderen Fällen gilt der Meilenstein als noch nicht gekonnt.",
"help": "Beim Treppengehen im Haus, beim Spazierengehen oder auf dem Spielplatz bieten sich vielfältige Gelegenheiten, Kinder zum Springen von einem Absatz (z.B. einem höheren Bordstein. einem Holzstamm, oder einem Stein) zu ermutigen. Machen Sie Ihrem Kind die Bewegung vor oder führen Sie sie gemeinsam mit dem Kind durch. Nehmen Sie das Kind dafür zunächst bei an die Hand. Später können sie die Hand immer lockerer mitführen und die Eigenbewegung des Kindes nur noch passiv begleiten. So kann das Kind am besten selbst herausfinden, wie es seine Arme einsetzen muss, um Schwung zu holen und beim Landen das Gleichgewicht zu finden. Ist das Springen an der Hand sicher, lösen Sie die Hand ganz und stellen Sie sich gegenüber dem Kind hin, damit es weiß, dass es im Notfall aufgefangen wird.",
"img": "baby0.jpg",
"imgs": ["baby0.jpg", "baby1.jpg", "baby2.jpg"],
"answer": null
},
{
@@ -23,7 +23,7 @@
"desc": "Kind liegt auf dem Bauch, hält die Arme angewinkelt neben dem Körper und hebt sein Köpfchen aus eigener Kraft so hoch, dass das Kinn nicht mehr die Auflage berührt. Diese Position kann es mehr als 3 Sekunden halten.",
"observation": "Hier kommt der Beobachtungshilfetext hin",
"help": "Hier kommt der Förderhilfetext hin",
"img": "baby1.jpg",
"imgs": ["baby1.jpg"],
"answer": null
},
{
@@ -32,7 +32,7 @@
"desc": "Kind kann seinen Kopf frei halten und bewegen, wenn es z.B. auf dem Schoß sitzt. Wenn man seinen Körper ein wenig schräg hält, gleicht es diese Bewegung mit dem Kopf aus. Der Kopf wackelt kaum oder gar nicht, wenn das Kind ihn dreht.",
"observation": "Hier kommt der Beobachtungshilfetext hin",
"help": "Hier kommt der Förderhilfetext hin",
"img": "baby2.jpg",
"imgs": ["baby2.jpg"],
"answer": null
},
{
@@ -41,7 +41,7 @@
"desc": "Kind liegt auf dem Bauch. Es stützt sich mit beiden Armen gestreckt von der Unterlage ab und hebt seinen Rücken an, um den Kopf aufrecht zu halten. Schultern und Brust liegen für mehr als 3 Sekunden nicht mehr auf der Unterlage.",
"observation": "Hier kommt der Beobachtungshilfetext hin",
"help": "Hier kommt der Förderhilfetext hin",
"img": "baby3.jpg",
"imgs": ["baby3.jpg"],
"answer": null
}
]
@@ -56,7 +56,7 @@
"desc": "The child jumps up with both legs at the same time, overcomes a (small) ledge or step without using their hands, and lands back on their feet.",
"observation": "Observe whether the child jumps spontaneously or when asked to do so from a step or similarly high ledge! They should actually jump off with both legs at the same time, not holding on to anything and not catching themselves with their hand when landing. You shouldn't have to hold them while jumping either. If this behavior has been carried out safely several times, the milestone is considered to have been reliably accomplished. If the child is still slightly unsteady, usually jumps with both legs offset, or touches the ground with their hand when landing, the behavior is largely skillful. If they only dare to jump when you hold their hand and/or if they does not perform the jump properly, then the behavior is rudimentary. In all other cases, the milestone is considered not yet achieved.",
"help": "When climbing stairs in the house, when taking a walk, or on the playground, there are many opportunities to encourage children to jump from a step (e.g. a higher curb, a log, or a stone). Show your child the movement or do it together with them. To begin with, hold the child by the hand. Later, you can move your hand more loosely and only passively accompany the child's movement. This is the best way for the child to find out for themselves how to use their arms to gain momentum and find balance when landing. Once it is safe to jump holding your hand, release your hand completely and stand opposite the child so that they know that they will be caught in an emergency.",
"img": "baby0.jpg",
"imgs": ["baby0.jpg", "baby1.jpg", "baby2.jpg"],
"answer": null
},
{
@@ -65,7 +65,7 @@
"desc": "The child lies on their stomach, holds their arms bent beside their body and lifts their head up under their own power until their chin no longer touches the support. They can hold this position for more than 3 seconds.",
"observation": "Observation text goes here",
"help": "Help text goes here",
"img": "baby1.jpg",
"imgs": ["baby1.jpg"],
"answer": null
},
{
@@ -74,7 +74,7 @@
"desc": "The child can hold and move their head freely, for example when they are sitting on your lap. If you hold their body at a slight angle, they will compensate for this movement with their head. The head hardly wobbles or does not wobble at all when the child turns it.",
"observation": "Observation text goes here",
"help": "Help text goes here",
"img": "baby2.jpg",
"imgs": ["baby2.jpg"],
"answer": null
},
{
@@ -83,7 +83,7 @@
"desc": "Child lies on their stomach. They support themselves with both arms stretched out from the surface and lift their back to keep their head upright. Shoulders and chest are no longer on the surface for more than 3 seconds.",
"observation": "Observation text goes here",
"help": "Help text goes here",
"img": "baby3.jpg",
"imgs": ["baby3.jpg"],
"answer": null
}
]