Skip to content

Commit

Permalink
opening hours tooltip & correctly use runes
Browse files Browse the repository at this point in the history
  • Loading branch information
@NinaHahne
NinaHahne committed Feb 7, 2025
1 parent 0700cfb commit f20ce29
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 126 deletions.
5 changes: 5 additions & 0 deletions src/lib/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,8 @@ export type NavigationData = {
navLinks: NavLink[];
footerLinks: { title: string; url: string }[];
};

export type OpeningHours = {
day: string;
hours: string;
}[];
50 changes: 25 additions & 25 deletions src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@
$effect(() => {
async function fetchNavigation() {
navigation = await client.fetch(`
*[_type == "navigation"][0] {
logo,
navLinks,
footerLinks
}
`);
*[_type == "navigation"][0] {
logo,
navLinks,
footerLinks
}
`);
}
fetchNavigation();
});
Expand All @@ -38,25 +38,25 @@
<nav>
<ul class="space-y-4 text-[46px] leading-none">
<!-- <li>
<a href="{base}/" class="block text-stem-green hover:text-bluebell transition-colors duration-300">
Blumenladen
</a>
</li>
<li>
<a href="{base}/himmelblau" class="block text-navy hover:text-gold transition-colors duration-300">
himmelblau
</a>
</li>
<li>
<a href="{base}/bluetenspuren" class="block text-navy hover:text-gold transition-colors duration-300">
BlütenSpuren
</a>
</li>
<li>
<a href="{base}/bildergalerie" class="block text-navy hover:text-gold transition-colors duration-300">
Bildergalerie
</a>
</li> -->
<a href="{base}/" class="block text-stem-green hover:text-bluebell transition-colors duration-300">
Blumenladen
</a>
</li>
<li>
<a href="{base}/himmelblau" class="block text-navy hover:text-gold transition-colors duration-300">
himmelblau
</a>
</li>
<li>
<a href="{base}/bluetenspuren" class="block text-navy hover:text-gold transition-colors duration-300">
BlütenSpuren
</a>
</li>
<li>
<a href="{base}/bildergalerie" class="block text-navy hover:text-gold transition-colors duration-300">
Bildergalerie
</a>
</li> -->
{#each navigation?.navLinks ?? [] as { title, url, color, hoverColor }}
<li>
<a
Expand Down
232 changes: 131 additions & 101 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,18 @@
import { base } from "$app/paths"; // Dynamically get the base path
import client from "$lib/sanityClient";
import { weekdayTranslations } from "$lib/weekdays";
import type { OpeningHours } from "$lib/types";
const lang = "de"; // TODO: Change dynamically based on URL or user preference
let openingHours: { day: string; hours: string }[] = [];
// ✅ Correct Svelte 5 runes usage:
let openingHours = $state<OpeningHours | null>(null);
let groupedHours = $state<{ days: string[]; hours: string }[]>([]);
let isTooltipVisible = $state(false);
const weekdays = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"];
async function fetchOpeningHours() {
openingHours = await client.fetch(`
*[_type == "openingHours"] {
day,
hours
}
`);
}
fetchOpeningHours();
// sort opening hours by day
// Montag, Dienstag, Mittwoch, Donnerstag, Freitag, Samstag, Sonntag
// Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday
$: openingHours.sort((a, b) => {
const dayIndexA = weekdays.indexOf(a.day);
const dayIndexB = weekdays.indexOf(b.day);
return dayIndexA - dayIndexB;
});
// $: console.log("openingHours", openingHours);
// Group opening hours by hours, if days with the same hours follow each other:
function groupOpeningHours(openingHours: { day: string; hours: string }[]): { hours: string; days: string[] }[] {
const grouped: { hours: string; days: string[] }[] = [];
let currentGroup: { hours: string; days: string[] } | null = null;
Expand All @@ -51,88 +31,126 @@
return grouped;
}
// 🛠️ This will automatically update when `openingHours` is fetched
$: groupedHours = groupOpeningHours(openingHours);
$effect(() => {
async function fetchOpeningHours() {
openingHours = await client.fetch(`
*[_type == "openingHours"] {
day,
hours
}
`);
}
fetchOpeningHours();
// sort opening hours by day
// Montag, Dienstag, Mittwoch, Donnerstag, Freitag, Samstag, Sonntag
// Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday
if (!openingHours) return;
openingHours.sort((a, b) => {
const dayIndexA = weekdays.indexOf(a.day);
const dayIndexB = weekdays.indexOf(b.day);
return dayIndexA - dayIndexB;
});
// 🛠️ This will automatically update when `openingHours` is fetched
groupedHours = groupOpeningHours(openingHours);
});
</script>

<div class="flex flex-col items-center">
<p class="text-center text-deep-moss">
Im kleinen
<a
class="text-stem-green transition-colors duration-300 hover:text-bluebell"
href="https://www.stadtteilzeitung-schoeneberg.de/2009/oktober/19.htm"
target="_blank"
<section class="flex h-full flex-row justify-center">
<div class="flex flex-col items-center justify-center">
<p class="text-center text-deep-moss">
Im kleinen
<a
class="text-stem-green transition-colors duration-300 hover:text-bluebell"
href="https://www.stadtteilzeitung-schoeneberg.de/2009/oktober/19.htm"
target="_blank"
>
Blumenladen
</a>
himmelblau
<br />
gibt es schöne Blumen für
<br />
Liebeserklärungen, Hochzeiten und
<br />
auch für die einfachen kleinen Anlässe.
</p>

<div class="door-frame m-8">
<img src="{base}/images/Tuer.webp" alt="himmelblaue Ladentür" class="door" />
</div>
<!-- prettier-ignore -->
<p
class="opening-hours text-center text-bluebell tooltip-trigger"
onmouseenter={() => (isTooltipVisible = true)}
onmouseleave={() => (isTooltipVisible = false)}
>
Blumenladen
</a>
himmelblau
<br />
gibt es schöne Blumen für
<br />
Liebeserklärungen, Hochzeiten und
<br />
auch für die einfachen kleinen Anlässe.
</p>

<div class="door-frame m-8">
<img src="{base}/images/Tuer.webp" alt="himmelblaue Ladentür" class="door" />
</div>
<p class="opening-hours text-center text-bluebell">
Die himmelblaue Ladentür
<br />
öffnet sich in dieser Woche <strong class="text-coral">*)</strong>
<br />
{#each groupedHours as { days, hours }, i}
am
{#if days.length === 1}
{days[0]}
{:else if days.length === 2}
<strong>{days[0]} & {days[1]}</strong>
{:else}
{days.slice(0, -1).join(", ")} & {days[days.length - 1]}
{/if}
Die himmelblaue Ladentür
<br />
öffnet sich in dieser Woche
<strong class="text-coral"> * </strong>
<br />
<strong>{hours}</strong>
{#if i < groupedHours.length - 1}
{#each groupedHours as { days, hours }, i}
am
{#if days.length === 1}
{days[0]}
{:else if days.length === 2}
<strong>{days[0]} & {days[1]}</strong>
{:else}
{days.slice(0, -1).join(", ")} & {days[days.length - 1]}
{/if}
<br />
{/if}
{/each}
<!--
am Freitag & Samstag
12°° – 18°°
-->
</p>
<p id="adress" class="m-2 text-center text-deep-moss">
Markelstraße 13<br />
12163 Berlin Steglitz
</p>
<p id="mona" class="m-2 text-center text-deep-moss">
Mona Hahne<br />
"Frau Himmelblau"
</p>
<div id="contact" class="text-center text-deep-moss">
<a class="text-stem-green transition-colors duration-300 hover:text-bluebell" href="mailto:blumen@himmelblau.de">
blumen@himmelblau.de
</a>
<strong>{hours}</strong>
{#if i < groupedHours.length - 1}
<br />
{/if}
{/each}
<!--
am Freitag & Samstag
12°° – 18°°
-->
</p>
<p id="adress" class="m-2 text-center text-deep-moss">
Markelstraße 13<br />
12163 Berlin Steglitz
</p>
<p id="mona" class="m-2 text-center text-deep-moss">
Mona Hahne<br />
"Frau Himmelblau"
</p>
<div id="contact" class="text-center text-deep-moss">
<a class="text-stem-green transition-colors duration-300 hover:text-bluebell" href="mailto:blumen@himmelblau.de">
blumen@himmelblau.de
</a>
</div>
</div>

<div class="flex flex-col items-center justify-center">
<p
id="opening_hours-details"
class="tooltip m-4 w-full text-right text-sm text-deep-moss"
class:visible={isTooltipVisible}
>
<strong class="text-base text-coral">*</strong> Die Öffnungszeiten<br />
des kleinen Blumenladens<br />
wechseln manchmal ein wenig,<br />
denn es gibt viele Orte<br />
und oft auch schöne Feste,<br />
die Frau Himmelblau mit<br />
himmelblauen & bunten Blumen<br />
schmücken darf.<br />
<br /><br />
Raumdekorationen <br />
und besondere Bestellungen<br />
für Hochzeiten, Geburtstage,<br />
Taufen und Trauerfeiern<br />
sind -nach Absprache- an<br />
allen Tagen der Woche möglich!
</p>
</div>
<p id="opening_hours-details" class="m-4 w-full text-sm text-deep-moss">
<strong class="text-base text-coral">*)</strong> Die Öffnungszeiten<br />
des kleinen Blumenladens<br />
wechseln manchmal ein wenig,<br />
denn es gibt viele Orte<br />
und oft auch schöne Feste,<br />
die Frau Himmelblau mit<br />
himmelblauen & bunten Blumen<br />
schmücken darf.<br />
<br /><br />
Raumdekorationen <br />
und besondere Bestellungen<br />
für Hochzeiten, Geburtstage,<br />
Taufen und Trauerfeiern<br />
sind -nach Absprache- an<br />
allen Tagen der Woche möglich!
</p>
</div>
</section>

<style>
.door-frame {
Expand All @@ -151,4 +169,16 @@
.door-frame:hover .door {
transform: rotateY(24deg);
}
.tooltip-trigger {
cursor: pointer;
}
.tooltip {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.tooltip.visible {
opacity: 1;
}
</style>

0 comments on commit f20ce29

Please sign in to comment.