mobile recipe version

src/routes/+page.svelte

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

src/routes/Header.svelte

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

src/routes/categories/+page.svelte

@@ -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: "Основные блюда",
+            title: "Еврейская кухня",
-            img: "d6960f87-4936-439a-86fe-54d5508f06f8.jpg"
-        },
-        {
-            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;
     }

src/routes/categories/[category]/+page.svelte

@@ -1,25 +1,42 @@
 <script>
   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 recipes_list = [];
   let last_page = 1
 
+  // First loading
   let recipes = axios.get(serverurl+"/category_recipes?page=" + last_page + "&category=" + $page.params.category);
   recipes.then(function (response) {
-        console.log(response);
+      recipes_list = response.data.recipes;
   })
   .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>
+
+<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>

src/routes/recipe/[recipeid]/+page.svelte

@@ -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">
+            <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>
-                <p>|</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>
-                <p>|</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;