Compare commits

...

2 Commits

6 changed files with 35 additions and 30 deletions

View File

@ -3,6 +3,7 @@
import Recipes from '$lib/components/Recipes.svelte'; import Recipes from '$lib/components/Recipes.svelte';
import Search from './Search.svelte'; import Search from './Search.svelte';
export let icons export let icons
export let active_icon
</script> </script>
<style> <style>
@ -15,10 +16,12 @@
box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2); box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
} }
a:hover, a:hover,
a:focus-visible a:focus-visible,
.active
{ {
--angle: 15deg; --angle: 15deg;
animation: shake 0.5s ease forwards; animation: shake 0.5s ease forwards;
background-color: var(--nord2);
} }
.flex{ .flex{
display:flex; display:flex;
@ -61,11 +64,10 @@
} }
</style> </style>
<slot name="test"></slot>
<div class=flex> <div class=flex>
{#each icons as icon} {#each icons as icon, i}
<a href="/rezepte/icon/{icon}">{icon}</a> <a class:active={active_icon == icon} href="/rezepte/icon/{icon}">{icon}</a>
{/each} {/each}
</div> </div>
<section> <section>

View File

@ -58,18 +58,22 @@ function findGCD(a, b) {
return findGCD(b, a % b); return findGCD(b, a % b);
} }
// For portions, not sure whether to keep or let it be // "1-2 Kuchen (Durchmesser: 26cm", constant=2 -> "2-4 Kuchen (Durchmesser: 26cm)"
function multiplyFirstNumberInString(inputString, constant) { function multiplyFirstAndSecondNumbers(inputString, constant) {
const firstNumberRegex = /\d+(?:[\.,]\d+)?/; const regex = /(\d+(?:[\.,]\d+)?)(\s*-\s*\d+(?:[\.,]\d+)?)?/;
const match = inputString.match(firstNumberRegex); return inputString.replace(regex, (match, firstNumber, secondNumber) => {
if (match) { const numbersToMultiply = [firstNumber];
const number = match[0].includes(',') ? match[0].replace(/\./g, '').replace(',', '.') : match[0]; if (secondNumber) {
numbersToMultiply.push(secondNumber.replace(/-\s*/, ''));
}
const multipliedNumbers = numbersToMultiply.map(number => {
const multiplied = (parseFloat(number) * constant).toString(); const multiplied = (parseFloat(number) * constant).toString();
const rounded = parseFloat(multiplied).toString(); const rounded = parseFloat(multiplied).toString();
const result = match[0].includes(',') ? rounded.replace('.', ',') : rounded; const result = number.includes(',') ? rounded.replace('.', ',') : rounded;
return inputString.replace(firstNumberRegex, result); return result;
} });
return inputString; return multipliedNumbers.join('-')
});
} }
function adjust_amount(string, multiplier){ function adjust_amount(string, multiplier){
@ -130,7 +134,7 @@ button.selected{
<div class=ingredients> <div class=ingredients>
{#if data.portions} {#if data.portions}
<h3>Portionen:</h3> <h3>Portionen:</h3>
{@html convertFloatingPointToFraction(multiplyFirstNumberInString(data.portions, multiplier))} {@html convertFloatingPointToFraction(multiplyFirstAndSecondNumbers(data.portions, multiplier))}
{/if} {/if}
<h3>Menge anpassen:</h3> <h3>Menge anpassen:</h3>

View File

@ -4,8 +4,10 @@
import Search from './Search.svelte'; import Search from './Search.svelte';
let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"] let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
let month : number; let month : number;
</script> export let active_index;
console.log(active_index)
</script>
<style> <style>
a.month{ a.month{
text-decoration: unset; text-decoration: unset;
@ -18,9 +20,11 @@ a.month{
min-width: 4em; min-width: 4em;
text-align: center; text-align: center;
} }
a.month:hover{ a.month:hover,
transform: scale(1.1,1.1); .active
background-color: var(--red); {
transform: scale(1.1,1.1) !important;
background-color: var(--red) !important;
} }
.months{ .months{
display:flex; display:flex;
@ -32,11 +36,9 @@ a.month:hover{
} }
</style> </style>
<slot name="test"></slot>
<div class=months> <div class=months>
{#each months as month, i} {#each months as month, i}
<a class=month href="/rezepte/season/{i+1}">{month}</a> <a class:active={i == active_index} class=month href="/rezepte/season/{i+1}">{month}</a>
{/each} {/each}
</div> </div>
<section> <section>

View File

@ -8,8 +8,7 @@
export let data: PageData; export let data: PageData;
import { rand_array } from '$lib/js/randomize'; import { rand_array } from '$lib/js/randomize';
</script> </script>
<IconLayout icons={data.icons}> <IconLayout icons={data.icons} active_icon={data.icon} >
<h2 slot=test>Rezepte mit {data.icon}</h2>
<Recipes slot=recipes> <Recipes slot=recipes>
{#each rand_array(data.season) as recipe} {#each rand_array(data.season) as recipe}
<Card {recipe} icon_override=true></Card> <Card {recipe} icon_override=true></Card>

View File

@ -11,8 +11,7 @@
import { rand_array } from '$lib/js/randomize'; import { rand_array } from '$lib/js/randomize';
</script> </script>
<SeasonLayout> <SeasonLayout active_index={current_month-1}>
<h2 slot=test>Rezepte des Monats </h2>
<Recipes slot=recipes> <Recipes slot=recipes>
{#each rand_array(data.season) as recipe} {#each rand_array(data.season) as recipe}
<Card {recipe} {current_month}></Card> <Card {recipe} {current_month}></Card>

View File

@ -9,8 +9,7 @@
let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"] let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
import { rand_array } from '$lib/js/randomize'; import { rand_array } from '$lib/js/randomize';
</script> </script>
<SeasonLayout> <SeasonLayout active_index={data.month -1}>
<h2 slot=test>Rezepte die im {months[data.month-1]} in Saison sind</h2>
<Recipes slot=recipes> <Recipes slot=recipes>
{#each rand_array(data.season) as recipe} {#each rand_array(data.season) as recipe}
<Card {recipe} icon_override=true></Card> <Card {recipe} icon_override=true></Card>