Compare commits
2 Commits
90895fb957
...
52858e46ff
Author | SHA1 | Date | |
---|---|---|---|
52858e46ff | |||
f8b5160f2d |
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user