mobile recipe version
This commit is contained in:
parent
29354c6ba0
commit
f03f9f9114
|
|
@ -59,6 +59,8 @@
|
|||
{/each}
|
||||
</div>
|
||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
||||
{:catch error}
|
||||
Ошибка {error}
|
||||
{/await}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
<script>
|
||||
let mobileMenuOpen = false
|
||||
|
||||
$: console.log(mobileMenuOpen)
|
||||
|
||||
function changeMenuState() {
|
||||
mobileMenuOpen = !mobileMenuOpen
|
||||
}
|
||||
|
|
@ -67,10 +65,9 @@
|
|||
|
||||
|
||||
<!-- todo:
|
||||
при переходе по категории перекидывать на страницу категории
|
||||
дозагрузка страниц в категориях
|
||||
отредактировать категории
|
||||
мобильная вёрстка
|
||||
донат
|
||||
поиск
|
||||
красивая ошибка при загрузке
|
||||
настроить robots.txt
|
||||
-->
|
||||
|
|
@ -1,19 +1,23 @@
|
|||
<script>
|
||||
let category_list = [
|
||||
{
|
||||
title: "Основные блюда",
|
||||
img: "d6960f87-4936-439a-86fe-54d5508f06f8.jpg"
|
||||
},
|
||||
{
|
||||
title: "На сковороде",
|
||||
img: "1b0dc44c-5dc3-4a74-9bb8-1a079999caa9.jpg"
|
||||
},
|
||||
{
|
||||
title: "Коктейли",
|
||||
title: "Домашняя кухня",
|
||||
img: "0334e507-d2c2-4ca5-9aea-c144fbcafb76.jpg"
|
||||
},
|
||||
{
|
||||
title: "Закуски",
|
||||
title: "Итальянская кухня",
|
||||
img: "00651793-d00c-4f39-aa07-3d5d5911aa8c.jpg"
|
||||
},
|
||||
{
|
||||
title: "Салаты",
|
||||
title: "Китайская кухня",
|
||||
img: "039b0932-56fc-47da-83c9-62c95f227412.jpg"
|
||||
},
|
||||
{
|
||||
|
|
@ -25,15 +29,11 @@
|
|||
img: "07bcfe9b-d44a-47b1-adfb-3afa0694eda2.jpg"
|
||||
},
|
||||
{
|
||||
title: "Выпечка",
|
||||
title: "В духовке",
|
||||
img: "06f68dda-2949-41e2-a307-efaaf5eecbbf.jpg"
|
||||
},
|
||||
{
|
||||
title: "Основные блюда",
|
||||
img: "d6960f87-4936-439a-86fe-54d5508f06f8.jpg"
|
||||
},
|
||||
{
|
||||
title: "Супы",
|
||||
title: "Еврейская кухня",
|
||||
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);
|
||||
}
|
||||
|
||||
@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 {
|
||||
font-size: 3dvh;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,42 @@
|
|||
<script>
|
||||
import { page } from '$app/stores';
|
||||
import axios from 'axios';
|
||||
import { page } from '$app/stores';
|
||||
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);
|
||||
recipes.then(function (response) {
|
||||
console.log(response);
|
||||
})
|
||||
.catch(function (error) {
|
||||
// handle error
|
||||
console.log(error);
|
||||
})
|
||||
// Inf loading
|
||||
function infiniteHandler({ detail: { loaded, complete } }) {
|
||||
last_page += 1;
|
||||
axios.get(serverurl+"/category_recipes?page=" + last_page + "&category=" + $page.params.category).then(
|
||||
function (response) {
|
||||
if (response.data.recipes != null) {
|
||||
recipes_list = [...recipes_list, ...response.data.recipes];
|
||||
loaded();
|
||||
} else {
|
||||
complete();
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
{#await recipes}
|
||||
<div class="text-center flex items-center justify-center h-screen">
|
||||
|
|
@ -33,7 +50,7 @@
|
|||
</div>
|
||||
{: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">
|
||||
{#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">
|
||||
<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">
|
||||
|
|
@ -43,8 +60,24 @@
|
|||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{:catch}
|
||||
Ошибка
|
||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
||||
{:catch error}
|
||||
Ошибка {error}
|
||||
{/await}
|
||||
</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>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
})
|
||||
</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 recipe_p}
|
||||
<div class="text-center flex items-center justify-center h-screen">
|
||||
|
|
@ -29,33 +29,39 @@
|
|||
{:then data}
|
||||
<div>
|
||||
<!-- time / cals / protions -->
|
||||
<div id="info" class="mt-4 flex">
|
||||
<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 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<p><b>Время приготовления:</b> {data.data.recipe.ctime}</p>
|
||||
<p>|</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">
|
||||
<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>
|
||||
<p><b>Количество порций:</b> {data.data.recipe.snum}</p>
|
||||
<p>|</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">
|
||||
<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 id="info" class="mt-4 flex flex-col md:flex-row">
|
||||
<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 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<p><b>Время приготовления:</b> {data.data.recipe.ctime}</p>
|
||||
</div>
|
||||
<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="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>
|
||||
<p><b>Количество порций:</b> {data.data.recipe.snum}</p>
|
||||
</div>
|
||||
<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 id="tags" class="mt-8">
|
||||
<!-- <h5><b>Tags:</b></h5> -->
|
||||
{#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}
|
||||
</div>
|
||||
<!-- title -->
|
||||
<h1 class="pt-8 pb-5 text-3xl font-bold font-title">
|
||||
{data.data.recipe.title}
|
||||
</h1>
|
||||
<div class="desc_container">
|
||||
<div class="desc_container flex-col gap-5 lg:flex-row text-lg">
|
||||
<!-- image -->
|
||||
<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}" />
|
||||
|
|
@ -65,9 +71,9 @@
|
|||
{data.data.recipe.desc}
|
||||
</div>
|
||||
</div>
|
||||
<div class="recipe_container">
|
||||
<div class="recipe_container flex-col lg:flex-row">
|
||||
<!-- ingredients -->
|
||||
<div id="ingredients">
|
||||
<div id="ingredients" class="content-center">
|
||||
<!-- ing -->
|
||||
{#each data.data.recipe.ingredients as ingredients}
|
||||
<div>
|
||||
|
|
@ -136,14 +142,13 @@
|
|||
|
||||
.desc_container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: 1.3em;
|
||||
/* font-size: 1.3em; */
|
||||
/* gap: 14px; */
|
||||
}
|
||||
|
||||
.mainimg {
|
||||
flex: 1 1;
|
||||
flex: 1 0;
|
||||
border: dashed blue 1px;
|
||||
}
|
||||
|
||||
|
|
@ -155,7 +160,7 @@
|
|||
.recipedesc {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
padding: 0px 20px 0px 20px;
|
||||
/* padding: 0px 20px 0px 20px; */
|
||||
}
|
||||
|
||||
#info svg {
|
||||
|
|
@ -167,10 +172,12 @@
|
|||
}
|
||||
|
||||
#tags {
|
||||
/* display: flex; */
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
#tags a {
|
||||
margin-top: 5px;
|
||||
min-width: 3em;
|
||||
border-radius: 13px;
|
||||
font-size: 0.9em;
|
||||
|
|
@ -183,7 +190,6 @@
|
|||
|
||||
.recipe_container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
gap: 5vw;
|
||||
|
|
|
|||
Loading…
Reference in New Issue