From 587985fc1c6c9b26516deb187768c1291d63c0e5 Mon Sep 17 00:00:00 2001
From: Nicholas Jitkoff <nicholas@jitkoff.com>
Date: Thu, 16 Jun 2022 18:50:12 -0700
Subject: [PATCH] updated handling for recipe thumbnails

---
 docs/render/recipe.css | 18 +++++++++++++++---
 docs/render/recipe.js  | 16 ++++++++++------
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/docs/render/recipe.css b/docs/render/recipe.css
index c4e3482..de455e8 100644
--- a/docs/render/recipe.css
+++ b/docs/render/recipe.css
@@ -19,13 +19,14 @@ body {
 
 .thumbnail {
   width: 100%;
-  padding-top: 77%;
+  padding-top: 61.8%;
   max-height:1vh;
   background-color: gray;
   background-size: cover;
   background-position: center;
   margin-bottom:2em;
   box-sizing: border-box;
+  transition:background-image 1s;
   /* margin: 0 -2em; */
   }
 
@@ -333,6 +334,7 @@ a.action .icon {
   }
   #thumbnail-container {
     margin: 0 -8vw;
+
   }
   #thumbnail {
       padding-top: 56.25%;
@@ -401,7 +403,14 @@ img.qr {
   width:100%;
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (max-width: 1199px) {
+  #thumbnail {
+  filter:none !important;
+  transform: none !important;
+  }
+}
+
+@media screen and (min-width: 1200px) {
   body {
     width:auto;
     margin:0;
@@ -412,7 +421,10 @@ img.qr {
     max-width: unset;
   }
 
-  #thumbnail-container {width: 100%;height: 100vh;position: sticky;top: 0;}
+  #thumbnail-container {
+    width: 100%;height: 100vh;position: sticky;top: 0;
+    overflow:hidden;
+  }
 
   .thumbnail {
     max-height: 100vh;
diff --git a/docs/render/recipe.js b/docs/render/recipe.js
index c1fa2a5..f7ff71b 100644
--- a/docs/render/recipe.js
+++ b/docs/render/recipe.js
@@ -283,15 +283,20 @@ function render() {
   
   var bgImg = new Image();
   bgImg.onload = function(){
-    // console.log(bgImg, bgImg.naturalHeight, bgImg.naturalWidth)
-    document.querySelector("#thumbnail").style.backgroundImage = 'url(' + bgImg.src + ')';
+    console.log("bgImg", bgImg, bgImg.naturalHeight, bgImg.naturalWidth)
+    let thumbnail = document.querySelector("#thumbnail");
+    let thumbnailContainer = document.querySelector("#thumbnail-container");
+    thumbnail.style.backgroundImage = 'url(' + bgImg.src + ')';
+    console.log("bgImg.naturalHeight / window.innerHeight", bgImg.naturalHeight, thumbnailContainer.offsetHeight, thumbnailContainer.offsetHeight / bgImg.naturalHeight)
+    thumbnail.style.filter = `blur(${thumbnailContainer.offsetHeight / bgImg.naturalHeight}px)`;
+    thumbnail.style.transform = `scale(1.1)`;  
   };
   bgImg.src = image;
 
 
   document.body.appendChild(
     m(".recipe", {},
-      image ? m("#thumbnail-container", m("#thumbnail.thumbnail.noprint", { style: "background-image:url(" + ");", onload: imgload })) : null,
+      image ? m("#thumbnail-container", m("#thumbnail.thumbnail.noprint", { style: "background-image:url(" + ");" })) : null,
       m("article",
         m("header",
           m("img.publisher", { src: json.publisher?.image ?.[0]?.url ?? json.publisher ?.logo ?.url }),
@@ -348,8 +353,7 @@ function render() {
 
 var path = script.src.substring(0, script.src.lastIndexOf("."));
 var cssURL = path + ".css";
+loadSyle("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined")
+.then(() => loadSyle(cssURL)).then(render);
 
-document.head.appendChild(m("link", { rel: "stylesheet", type: "text/css", href: cssURL }));
-document.head.appendChild(m("link", { rel: "stylesheet", href: "https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" }));
 
-render();
\ No newline at end of file