prehistoric-systems/itty-bitty
1
0
Fork 0
mirror of https://github.com/arfct/itty-bitty.git synced 2026-03-11 08:54:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

updated handling for recipe thumbnails

Browse source
This commit is contained in:
Nicholas Jitkoff 2022-06-16 18:50:12 -07:00
parent dad7603612
commit 587985fc1c
2 changed files with 25 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
docs/render/recipe.css
View file

@ -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;

16
docs/render/recipe.js
View file

@ -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();