yash
/
recipes-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mobile recipe version

This commit is contained in:
yyasha 2023-11-14 16:16:44 +03:00
parent 29354c6ba0
commit f03f9f9114
5 changed files with 95 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/+page.svelte
View File

@ -59,6 +59,8 @@
{/each} {/each}
</div> </div>
<InfiniteLoading on:infinite={infiniteHandler} /> <InfiniteLoading on:infinite={infiniteHandler} />
{:catch error}
Ошибка {error}
{/await} {/await}
</div> </div>
</div> </div>

7
src/routes/Header.svelte
View File

@ -1,8 +1,6 @@
<script> <script>
let mobileMenuOpen = false let mobileMenuOpen = false
$: console.log(mobileMenuOpen)
function changeMenuState() { function changeMenuState() {
mobileMenuOpen = !mobileMenuOpen mobileMenuOpen = !mobileMenuOpen
} }
@ -67,10 +65,9 @@
<!-- todo: <!-- todo:
при переходе по категории перекидывать на страницу категории
дозагрузка страниц в категориях
отредактировать категории
мобильная вёрстка мобильная вёрстка
донат донат
поиск поиск
красивая ошибка при загрузке
настроить robots.txt
--> -->

32
src/routes/categories/+page.svelte
View File

@ -1,19 +1,23 @@
<script> <script>
let category_list = [ let category_list = [
{
title: "Основные блюда",
img: "d6960f87-4936-439a-86fe-54d5508f06f8.jpg"
},
{ {
title: "На сковороде", title: "На сковороде",
img: "1b0dc44c-5dc3-4a74-9bb8-1a079999caa9.jpg" img: "1b0dc44c-5dc3-4a74-9bb8-1a079999caa9.jpg"
}, },
{ {
title: "Коктейли", title: "Домашняя кухня",
img: "0334e507-d2c2-4ca5-9aea-c144fbcafb76.jpg" img: "0334e507-d2c2-4ca5-9aea-c144fbcafb76.jpg"
}, },
{ {
title: "Закуски", title: "Итальянская кухня",
img: "00651793-d00c-4f39-aa07-3d5d5911aa8c.jpg" img: "00651793-d00c-4f39-aa07-3d5d5911aa8c.jpg"
}, },
{ {
title: "Салаты", title: "Китайская кухня",
img: "039b0932-56fc-47da-83c9-62c95f227412.jpg" img: "039b0932-56fc-47da-83c9-62c95f227412.jpg"
}, },
{ {
@ -25,15 +29,11 @@
img: "07bcfe9b-d44a-47b1-adfb-3afa0694eda2.jpg" img: "07bcfe9b-d44a-47b1-adfb-3afa0694eda2.jpg"
}, },
{ {
title: "Выпечка", title: "В духовке",
img: "06f68dda-2949-41e2-a307-efaaf5eecbbf.jpg" img: "06f68dda-2949-41e2-a307-efaaf5eecbbf.jpg"
}, },
{ {
title: "Основные блюда", title: "Еврейская кухня",
img: "d6960f87-4936-439a-86fe-54d5508f06f8.jpg"
},
{
title: "Супы",
img: "08c99a7f-66ef-4651-b26b-c2e48e901294.jpg" img: "08c99a7f-66ef-4651-b26b-c2e48e901294.jpg"
}, },
] ]
@ -62,20 +62,6 @@
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
} }
@font-face {
font-family: 'RobotoRegular';
font-style: normal;
font-weight: 400;
src: url('/fonts/Roboto-Regular.ttf');
}
@font-face {
font-family: 'AlegreyaSansSC';
font-style: normal;
font-weight: 800;
src: url('/fonts/Alegreyasansscextrabold.ttf');
}
#category { #category {
font-size: 3dvh; font-size: 3dvh;
} }

67
src/routes/categories/[category]/+page.svelte
View File

@ -1,25 +1,42 @@
<script> <script>
import { page } from '$app/stores'; import { page } from '$app/stores';
import axios from 'axios'; import axios from 'axios';
import InfiniteLoading from '/src/lib/InfiniteLoading.svelte';
console.log($page.params.category) let serverurl = 'http://192.168.0.105:3000';
let serverurl = 'http://192.168.0.105:3000'; let recipes_list = [];
let last_page = 1
let last_page = 1 // First loading
let recipes = axios.get(serverurl+"/category_recipes?page=" + last_page + "&category=" + $page.params.category);
recipes.then(function (response) {
recipes_list = response.data.recipes;
})
.catch(function (error) {
// handle error
console.log(error);
})
let recipes = axios.get(serverurl+"/category_recipes?page=" + last_page + "&category=" + $page.params.category); // Inf loading
recipes.then(function (response) { function infiniteHandler({ detail: { loaded, complete } }) {
console.log(response); last_page += 1;
}) axios.get(serverurl+"/category_recipes?page=" + last_page + "&category=" + $page.params.category).then(
.catch(function (error) { function (response) {
// handle error if (response.data.recipes != null) {
console.log(error); recipes_list = [...recipes_list, ...response.data.recipes];
}) loaded();
} else {
complete();
}
}
)
}
</script> </script>
<div> <div>
<div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8"> <h5 class="text-center mt-14">Все рецепты в категории<br/>"{$page.params.category.toLowerCase()}"</h5>
<div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 lg:max-w-7xl lg:px-8">
<h2 class="sr-only">Категории</h2> <h2 class="sr-only">Категории</h2>
{#await recipes} {#await recipes}
<div class="text-center flex items-center justify-center h-screen"> <div class="text-center flex items-center justify-center h-screen">
@ -33,7 +50,7 @@
</div> </div>
{:then data} {:then data}
<div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"> <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
{#each data.data.recipes as recipe (recipe.id)} {#each recipes_list as recipe (recipe.id)}
<a href="/recipe/{recipe.id}" class="group transition duration-300 hover:scale-110"> <a href="/recipe/{recipe.id}" class="group transition duration-300 hover:scale-110">
<div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7"> <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">
<img src="{serverurl}/recipe_image?filename={recipe.img}" alt="{recipe.title}" class="h-full w-full object-cover object-center transition duration-700 group-hover:opacity-90"> <img src="{serverurl}/recipe_image?filename={recipe.img}" alt="{recipe.title}" class="h-full w-full object-cover object-center transition duration-700 group-hover:opacity-90">
@ -43,8 +60,24 @@
</a> </a>
{/each} {/each}
</div> </div>
{:catch} <InfiniteLoading on:infinite={infiniteHandler} />
Ошибка {:catch error}
Ошибка {error}
{/await} {/await}
</div> </div>
</div> </div>
<style>
@font-face {
font-family: 'AlegreyaSansSC';
font-style: normal;
font-weight: 800;
src: url('/fonts/Alegreyasansscextrabold.ttf');
}
h5 {
font-family: 'AlegreyaSansSC', sans-serif;
font-size: 1.4em;
margin-bottom: 1vh;
}
</style>

56
src/routes/recipe/[recipeid]/+page.svelte
View File

@ -14,7 +14,7 @@
}) })
</script> </script>
<div class="mx-20 px-4 py-8"> <div class="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-12 lg:max-w-7xl lg:px-8">
<!-- await --> <!-- await -->
{#await recipe_p} {#await recipe_p}
<div class="text-center flex items-center justify-center h-screen"> <div class="text-center flex items-center justify-center h-screen">
@ -29,33 +29,39 @@
{:then data} {:then data}
<div> <div>
<!-- time / cals / protions --> <!-- time / cals / protions -->
<div id="info" class="mt-4 flex"> <div id="info" class="mt-4 flex flex-col md:flex-row">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <div class="flex flex-row">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
</svg> <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
<p><b>Время приготовления:</b> {data.data.recipe.ctime}</p> </svg>
<p>|</p> <p><b>Время приготовления:</b> {data.data.recipe.ctime}</p>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> </div>
<path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3" /> <p class="invisible md:visible">|</p>
</svg> <div class="flex flex-row">
<p><b>Количество порций:</b> {data.data.recipe.snum}</p> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<p>|</p> <path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3" />
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> </svg>
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971z" /> <p><b>Количество порций:</b> {data.data.recipe.snum}</p>
</svg> </div>
<p><b>Калорийность:</b> {data.data.recipe.cal}</p> <p class="invisible md:visible">|</p>
<div class="flex flex-row">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971z" />
</svg>
<p><b>Калорийность:</b> {data.data.recipe.cal}</p>
</div>
</div> </div>
<div id="tags" class="mt-8"> <div id="tags" class="mt-8">
<!-- <h5><b>Tags:</b></h5> --> <!-- <h5><b>Tags:</b></h5> -->
{#each data.data.recipe.categories as category} {#each data.data.recipe.categories as category}
<a href="#" class="text-gray-50 text-center">{category}</a> <a href="/categories/{category}" class="text-gray-50 text-center">{category}</a>
{/each} {/each}
</div> </div>
<!-- title --> <!-- title -->
<h1 class="pt-8 pb-5 text-3xl font-bold font-title"> <h1 class="pt-8 pb-5 text-3xl font-bold font-title">
{data.data.recipe.title} {data.data.recipe.title}
</h1> </h1>
<div class="desc_container"> <div class="desc_container flex-col gap-5 lg:flex-row text-lg">
<!-- image --> <!-- image -->
<div class="mainimg"> <div class="mainimg">
<img class="rounded-lg h-full w-auto" alt={data.data.recipe.title} src="{serverurl}/recipe_image?filename={data.data.recipe.img}" /> <img class="rounded-lg h-full w-auto" alt={data.data.recipe.title} src="{serverurl}/recipe_image?filename={data.data.recipe.img}" />
@ -65,9 +71,9 @@
{data.data.recipe.desc} {data.data.recipe.desc}
</div> </div>
</div> </div>
<div class="recipe_container"> <div class="recipe_container flex-col lg:flex-row">
<!-- ingredients --> <!-- ingredients -->
<div id="ingredients"> <div id="ingredients" class="content-center">
<!-- ing --> <!-- ing -->
{#each data.data.recipe.ingredients as ingredients} {#each data.data.recipe.ingredients as ingredients}
<div> <div>
@ -136,14 +142,13 @@
.desc_container { .desc_container {
display: flex; display: flex;
flex-direction: row;
align-items: center; align-items: center;
font-size: 1.3em; /* font-size: 1.3em; */
/* gap: 14px; */ /* gap: 14px; */
} }
.mainimg { .mainimg {
flex: 1 1; flex: 1 0;
border: dashed blue 1px; border: dashed blue 1px;
} }
@ -155,7 +160,7 @@
.recipedesc { .recipedesc {
flex: 1; flex: 1;
box-sizing: border-box; box-sizing: border-box;
padding: 0px 20px 0px 20px; /* padding: 0px 20px 0px 20px; */
} }
#info svg { #info svg {
@ -167,10 +172,12 @@
} }
#tags { #tags {
/* display: flex; */
align-items: flex-start; align-items: flex-start;
} }
#tags a { #tags a {
margin-top: 5px;
min-width: 3em; min-width: 3em;
border-radius: 13px; border-radius: 13px;
font-size: 0.9em; font-size: 0.9em;
@ -183,7 +190,6 @@
.recipe_container { .recipe_container {
display: flex; display: flex;
flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
box-sizing: border-box; box-sizing: border-box;
gap: 5vw; gap: 5vw;