Icon route added
This commit is contained in:
parent
c7b257180f
commit
e4e153fe1b
@ -191,7 +191,7 @@ if(icon_override){
|
||||
</style>
|
||||
<a class="card {search}" href="/rezepte/{recipe.short_name}" data-tags=[{recipe.tags}]>
|
||||
{#if icon_override || recipe.season.includes(current_month)}
|
||||
<a class=icon href="/rezepte/season/{current_month}">{recipe.icon}</a>
|
||||
<a class=icon href="/rezepte/icon/{recipe.icon}">{recipe.icon}</a>
|
||||
{/if}
|
||||
<img width=300px height=300px src="/images/{recipe.images[0].mediapath}" alt="{recipe.alt}" />
|
||||
<div class=title>
|
||||
|
74
src/lib/components/IconLayout.svelte
Normal file
74
src/lib/components/IconLayout.svelte
Normal file
@ -0,0 +1,74 @@
|
||||
<script lang="ts">
|
||||
import '$lib/components/nordtheme.css';
|
||||
import Recipes from '$lib/components/Recipes.svelte';
|
||||
import Search from './Search.svelte';
|
||||
export let icons
|
||||
</script>
|
||||
|
||||
<style>
|
||||
a{
|
||||
font-size: 2rem;
|
||||
text-decoration: none;
|
||||
padding: 0.5em;
|
||||
background-color: var(--nord4);
|
||||
border-radius: 1000px;
|
||||
box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
a:hover{
|
||||
--angle: 15deg;
|
||||
animation: shake 0.5s ease forwards;
|
||||
}
|
||||
.flex{
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap: 1rem;
|
||||
max-width: 1000px;
|
||||
justify-content: center;
|
||||
margin:4rem auto;
|
||||
}
|
||||
|
||||
@keyframes shake{
|
||||
0%{
|
||||
transform: rotate(0)
|
||||
scale(1,1);
|
||||
}
|
||||
25%{
|
||||
box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
|
||||
transform: rotate(var(--angle))
|
||||
scale(1.2,1.2)
|
||||
;
|
||||
}
|
||||
50%{
|
||||
|
||||
box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
|
||||
transform: rotate(calc(-1* var(--angle)))
|
||||
scale(1.2,1.2);
|
||||
}
|
||||
74%{
|
||||
|
||||
box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
|
||||
transform: rotate(var(--angle))
|
||||
scale(1.2, 1.2);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(0)
|
||||
scale(1.2,1.2);
|
||||
box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<slot name="test"></slot>
|
||||
|
||||
<div class=flex>
|
||||
{#each icons as icon}
|
||||
<a href="/rezepte/icon/{icon}">{icon}</a>
|
||||
{/each}
|
||||
</div>
|
||||
<section>
|
||||
<Search></Search>
|
||||
</section>
|
||||
<section>
|
||||
<slot name=recipes></slot>
|
||||
</section>
|
@ -5,7 +5,7 @@ import type {BriefRecipeType} from '../../../../../types/types';
|
||||
|
||||
export const GET: RequestHandler = async ({params}) => {
|
||||
await dbConnect();
|
||||
let recipes = (await Recipe.find({tags: params.icon}, 'name short_name images tags category icon description season').lean()) as BriefRecipeType[];
|
||||
let recipes = (await Recipe.find({icon: params.icon}, 'name short_name images tags category icon description season').lean()) as BriefRecipeType[];
|
||||
await dbDisconnect();
|
||||
|
||||
recipes = JSON.parse(JSON.stringify(recipes));
|
||||
|
@ -8,7 +8,8 @@ import Header from '$lib/components/Header.svelte'
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/rezepte">Alle Rezepte</a></li>
|
||||
<li><a href="/rezepte/season">In Saison</a></li>
|
||||
<li><a href="/rezepte/category">Nach Kategorie</a></li>
|
||||
<li><a href="/rezepte/category">Kategorie</a></li>
|
||||
<li><a href="/rezepte/icon">Icon</a></li>
|
||||
<li><a href="/rezepte/tag">Stichwörter</a></li>
|
||||
</ul>
|
||||
<slot></slot>
|
||||
|
@ -1,12 +1,12 @@
|
||||
<script lang="ts">
|
||||
import type { PageData } from './$types';
|
||||
import MediaScroller from '$lib/components/MediaScroller.svelte';
|
||||
import Recipes from '$lib/components/Recipes.svelte';
|
||||
import AddButton from '$lib/components/AddButton.svelte';
|
||||
import Card from '$lib/components/Card.svelte';
|
||||
import Search from '$lib/components/Search.svelte';
|
||||
export let data: PageData;
|
||||
export let current_month = new Date().getMonth() + 1
|
||||
import type { PageData } from './$types';
|
||||
import MediaScroller from '$lib/components/MediaScroller.svelte';
|
||||
import AddButton from '$lib/components/AddButton.svelte';
|
||||
import Card from '$lib/components/Card.svelte';
|
||||
import Search from '$lib/components/Search.svelte';
|
||||
export let data: PageData;
|
||||
export let current_month = new Date().getMonth() + 1
|
||||
const all_categories = [ ...new Set (data.all_brief.map(item => item.category))];
|
||||
</script>
|
||||
<style>
|
||||
h1{
|
||||
@ -26,9 +26,13 @@ h1{
|
||||
</MediaScroller>
|
||||
</section>
|
||||
<Search></Search>
|
||||
<Recipes title="Alle Rezepte:">
|
||||
{#each data.all_brief as recipe}
|
||||
<Card {recipe} {current_month}></Card>
|
||||
|
||||
{#each all_categories as category}
|
||||
<MediaScroller title={category}>
|
||||
{#each data.all_brief.filter(recipe => recipe.category == category) as recipe}
|
||||
<Card {recipe} {current_month}></Card>
|
||||
{/each}
|
||||
</Recipes>
|
||||
</MediaScroller>
|
||||
{/each}
|
||||
<p>{data.all_brief.length}</p>
|
||||
<AddButton></AddButton>
|
||||
|
@ -4,7 +4,6 @@
|
||||
|
||||
import type { PageData } from './$types';
|
||||
import "$lib/components/nordtheme.css"
|
||||
import MultiImgWrapper from './MultiImgWrapper.svelte'
|
||||
import EditButton from '$lib/components/EditButton.svelte';
|
||||
import InstructionsPage from '$lib/components/InstructionsPage.svelte';
|
||||
import IngredientsPage from '$lib/components/IngredientsPage.svelte';
|
||||
@ -188,7 +187,7 @@ h4{
|
||||
|
||||
<TitleImgParallax src=/images/{data.images[0].mediapath}>
|
||||
<div class=title>
|
||||
<a class="icon" href='/rezepte/season/{data.season[0]}'>{data.icon}</a>
|
||||
<a class="icon" href='/rezepte/icon/{data.icon}'>{data.icon}</a>
|
||||
<h1>{@html data.name}</h1>
|
||||
{#if data.description && ! data.preamble}
|
||||
<p>{data.description}</p>
|
||||
|
@ -1,10 +0,0 @@
|
||||
<script>
|
||||
export let wrap = false
|
||||
</script>
|
||||
{#if wrap}
|
||||
<div {...$$restProps}>
|
||||
<slot />
|
||||
</div>
|
||||
{:else}
|
||||
<slot />
|
||||
{/if}
|
69
src/routes/rezepte/icon/+page.svelte
Normal file
69
src/routes/rezepte/icon/+page.svelte
Normal file
@ -0,0 +1,69 @@
|
||||
<script lang="ts">
|
||||
import type { PageData } from './$types';
|
||||
import '$lib/components/nordtheme.css';
|
||||
import Recipes from '$lib/components/Recipes.svelte';
|
||||
import MediaScroller from '$lib/components/MediaScroller.svelte';
|
||||
import SeasonLayout from '$lib/components/SeasonLayout.svelte'
|
||||
import Card from '$lib/components/Card.svelte';
|
||||
import Search from '$lib/components/Search.svelte';
|
||||
export let data: PageData;
|
||||
</script>
|
||||
<style>
|
||||
a{
|
||||
font-size: 3rem;
|
||||
text-decoration: none;
|
||||
padding: 0.5em;
|
||||
background-color: var(--nord4);
|
||||
border-radius: 1000px;
|
||||
box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
a:hover{
|
||||
--angle: 15deg;
|
||||
animation: shake 0.5s ease forwards;
|
||||
}
|
||||
.flex{
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap: 1rem;
|
||||
max-width: 500px;
|
||||
justify-content: center;
|
||||
margin:4rem auto;
|
||||
}
|
||||
|
||||
@keyframes shake{
|
||||
0%{
|
||||
transform: rotate(0)
|
||||
scale(1,1);
|
||||
}
|
||||
25%{
|
||||
box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
|
||||
transform: rotate(var(--angle))
|
||||
scale(1.2,1.2)
|
||||
;
|
||||
}
|
||||
50%{
|
||||
|
||||
box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
|
||||
transform: rotate(calc(-1* var(--angle)))
|
||||
scale(1.2,1.2);
|
||||
}
|
||||
74%{
|
||||
|
||||
box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
|
||||
transform: rotate(var(--angle))
|
||||
scale(1.2, 1.2);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(0)
|
||||
scale(1.2,1.2);
|
||||
box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class=flex>
|
||||
{#each data.icons as icon}
|
||||
<a href="/rezepte/icon/{icon}">{icon}</a>
|
||||
{/each}
|
||||
</div>
|
10
src/routes/rezepte/icon/+page.ts
Normal file
10
src/routes/rezepte/icon/+page.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import type { PageLoad } from "./$types";
|
||||
|
||||
export async function load({ fetch }) {
|
||||
let current_month = new Date().getMonth() + 1
|
||||
const res_icons = await fetch(`/api/items/icon`);
|
||||
const item = await res_icons.json();
|
||||
return {
|
||||
icons: item,
|
||||
};
|
||||
};
|
1
src/routes/rezepte/icon/.jukit/.jukit_info.json
Normal file
1
src/routes/rezepte/icon/.jukit/.jukit_info.json
Normal file
@ -0,0 +1 @@
|
||||
{"terminal": "nvimterm"}
|
17
src/routes/rezepte/icon/[icon]/+page.svelte
Normal file
17
src/routes/rezepte/icon/[icon]/+page.svelte
Normal file
@ -0,0 +1,17 @@
|
||||
<script lang="ts">
|
||||
import type { PageData } from './$types';
|
||||
import Recipes from '$lib/components/Recipes.svelte';
|
||||
import IconLayout from '$lib/components/IconLayout.svelte';
|
||||
import MediaScroller from '$lib/components/MediaScroller.svelte';
|
||||
import Card from '$lib/components/Card.svelte';
|
||||
import Search from '$lib/components/Search.svelte';
|
||||
export let data: PageData;
|
||||
</script>
|
||||
<IconLayout icons={data.icons}>
|
||||
<h2 slot=test>Rezepte mit {data.icon}</h2>
|
||||
<Recipes slot=recipes>
|
||||
{#each data.season as recipe}
|
||||
<Card {recipe} icon_override=true></Card>
|
||||
{/each}
|
||||
</Recipes>
|
||||
</IconLayout>
|
13
src/routes/rezepte/icon/[icon]/+page.ts
Normal file
13
src/routes/rezepte/icon/[icon]/+page.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import type { PageLoad } from "./$types";
|
||||
|
||||
export async function load({ fetch, params }) {
|
||||
const res_season = await fetch(`/api/items/icon/` + params.icon);
|
||||
const res_icons = await fetch(`/api/items/icon`);
|
||||
const icons = await res_icons.json();
|
||||
const item_season = await res_season.json();
|
||||
return {
|
||||
icons: icons,
|
||||
icon: params.icon,
|
||||
season: item_season,
|
||||
};
|
||||
};
|
Loading…
Reference in New Issue
Block a user