From 7ec94246f032db26c55d107d980300ba4a721dee Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Mon, 22 Jan 2024 14:13:56 +0100
Subject: [PATCH] Card is now fully loaded in itself

No longer do we have this weird shift of the description to the right of
the Card until some magical JS is loaded to fix it.
Not yet perfect: The now wrapping a-tag is for some reason still weirdly
sent to client until some js cleans it up. Currently results in a too
large gap which is fixed by local js.

Still TODO: do not blur images if no js present
---
 src/lib/components/Card.svelte | 71 +++++++++++++++++++---------------
 1 file changed, 39 insertions(+), 32 deletions(-)

diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index ea2ad87..616287b 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -14,22 +14,27 @@ if(icon_override){
 let isloaded = false
 
 import { onMount } from "svelte";
-	onMount(() => {
-		isloaded = document.querySelector("img")?.complete ? true : false
-	})
+
+onMount(() => {
+	isloaded = document.querySelector("img")?.complete ? true : false
+})
+
 </script>
 <style>
-#card{
+.card_anchor{
+	border-radius: 20px;
+}
+.card{
 	--card-width: 300px;
+	position: relative;
 	flex-shrink: 0;
 	transition: 200ms;
 	text-decoration: none;
-	position: relative;
 	box-sizing: border-box;
 	font-family: sans-serif;
 	cursor: pointer;
-	height: calc(7/4 * var(--card-width)); /* otherwise card is not initialized at correct size and readjusts when populated*/
-	width: var(--card-width);
+	height: 525px;
+	width: 300px;
 	border-radius: 20px;
 	background-size: contain;
 	display: flex;
@@ -39,8 +44,8 @@ import { onMount } from "svelte";
 	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.3);
 }
 #image{
-	width: var(--card-width);
-	height: calc(var(--card-width)*0.85);
+	width: 300px;
+	height: 255px;
 	object-fit: cover;
 	transition: 200ms;
 	filter: blur(10px);
@@ -49,9 +54,9 @@ import { onMount } from "svelte";
 .unblur{
 	filter: blur(0px) !important;
 }
-#div_image,
-#div_div_image{
-	width: var(--card-width);
+.div_image,
+.div_div_image{
+	width: 300px;
 	background-repeat: no-repeat;
 	background-size: cover;
 	background-position: center;
@@ -59,27 +64,28 @@ import { onMount } from "svelte";
 	border-top-left-radius: inherit;
 	border-top-right-radius: inherit;
 }
-#div_div_image{
-	height: calc(var(--card-width)*0.85);
+.div_div_image{
+	height: 255px;
 	position: absolute;
-	width: var(--card-width);
+	width: 300px;
 	top: 0;
 }
 
-#card:hover,
-#card:focus-within{
+.card:hover,
+.card:focus-within{
 	transform: scale(1.02,1.02);
 	background-color: var(--red);
 	box-shadow: 0.2em 0.2em 2em 1em rgba(0, 0, 0, 0.3);
 }
-#card:focus{
+.card:focus{
 	scale: 0.95 0.95;
 }
-.title {
-	position: relative;
+.card_title {
+	position: absolute;
 	padding-top: 0.5em;
-	height: 50%;
-	width: 100% ;
+	height: 262.5px;
+	width: 300px;
+	top: 262.5px;
 	border-bottom-left-radius: inherit;
 	border-bottom-right-radius: inherit;
 	display: flex;
@@ -130,7 +136,7 @@ import { onMount } from "svelte";
 	transition: 100ms;
 	scale: 0.9;
 }
-.title .category{
+.card_title .category{
 	position: absolute;
 	box-shadow: 0em 0em 1em 0.1em rgba(0, 0, 0, 0.6);
 	text-decoration: none;
@@ -144,8 +150,8 @@ import { onMount } from "svelte";
 	transition: 100ms;
 
 }
-.title .category:hover,
-.title .category:focus-within
+.card_title .category:hover,
+.card_title .category:focus-within
 {
 	box-shadow: -0.2em 0.2em 1em 0.1em rgba(0, 0, 0, 0.6);
 	background-color: var(--nord3);
@@ -155,24 +161,24 @@ import { onMount } from "svelte";
 	scale: 0.9 0.9;
 }
 
-#card:hover .icon,
-#card:focus-visible .icon
+.card:hover .icon,
+.card:focus-visible .icon
 {
 	animation: shake 0.6s;
 }
 </style>
 
-<a id="card" class:search_me={search}  href="/rezepte/{recipe.short_name}" data-tags=[{recipe.tags}]>
-	<div id=div_div_image >
-		<div id=div_image style="background-image:url({'https://bocken.org/static/rezepte/placeholder/' + recipe.short_name + '.webp'})">
+<a class=card_anchor href="/rezepte/{recipe.short_name}">
+<div class="card" class:search_me={search} data-tags=[{recipe.tags}]>
+	<div class=div_div_image >
+		<div class=div_image style="background-image:url({'https://bocken.org/static/rezepte/placeholder/' + recipe.short_name + '.webp'})">
 			<img class:unblur={isloaded} id=image src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy  alt="{recipe.alt}" on:load={() => isloaded=true}/>
 		</div>
 	</div>
 	{#if icon_override || recipe.season.includes(current_month)}
 		<a class=icon href="/rezepte/icon/{recipe.icon}">{recipe.icon}</a>
 	{/if}
-
-	<div class=title>
+	<div class="card_title">
 		<a class=category href="/rezepte/category/{recipe.category}" >{recipe.category}</a>
 		<div>
 			<div class=name>{@html recipe.name}</div>
@@ -184,4 +190,5 @@ import { onMount } from "svelte";
 		{/each}
 		</div>
 	</div>
+</div>
 </a>