mirror of
https://github.com/arfct/itty-bitty.git
synced 2026-03-11 08:54:33 +00:00
Updated recipe renderer
This commit is contained in:
Nicholas Jitkoff
parent
7f7634a40d
commit
0c3bdf1ae3
3 changed files with 85 additions and 34 deletions
|
|
@ -64,7 +64,7 @@
|
|||
}
|
||||
|
||||
const renderers = {
|
||||
"application/ld+json": {script:"recipe", sandbox:"none"},
|
||||
"application/ld+json": {script:"recipe"},
|
||||
"text/canvas+javascript": {script:"canvas"},
|
||||
"text/javascript": {script:"script"},
|
||||
"application/bitsy": {script:"/render/bitsy.html", sandbox:"bitsy"},
|
||||
|
|
@ -210,7 +210,7 @@
|
|||
|
||||
var isIE = navigator.userAgent.match(/rv:11/);
|
||||
var isEdge = navigator.userAgent.match(/Edge\//);
|
||||
var isWatch = (window.outerWidth < 200);
|
||||
var isWatch = (window.outerWidth < 220);
|
||||
|
||||
let bittyInfo = bitty.parseBittyURL(location);
|
||||
let durl = new bitty.DataURL(bittyInfo.hashData);
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ img.publisher {
|
|||
align-content: center;
|
||||
justify-content: center;
|
||||
/* flex-direction: row-reverse; */
|
||||
margin-top: 1em;
|
||||
/* margin-top: 1em; */
|
||||
/* height: auto; */
|
||||
}
|
||||
|
||||
|
|
@ -137,8 +137,8 @@ img.publisher {
|
|||
}
|
||||
|
||||
header {
|
||||
gap: 2em;
|
||||
margin-bottom: 2em;
|
||||
/* gap: 2em; */
|
||||
/* margin-bottom: 1rem; */
|
||||
/* padding-left: 18em; */
|
||||
}
|
||||
|
||||
|
|
@ -147,6 +147,7 @@ h1 {
|
|||
margin-bottom: 0;
|
||||
line-height:125%;
|
||||
font-weight:500;
|
||||
font-size: 2em;
|
||||
}
|
||||
.noun.hovered {
|
||||
background-color:#FAC22B;
|
||||
|
|
@ -169,7 +170,7 @@ background-color:#f1f1f1;
|
|||
gap: 0.5em 1em;
|
||||
/* margin-bottom: 1em; */
|
||||
text-transform: uppercase;
|
||||
font-size: 88%;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 500;
|
||||
line-height: 0.8em;
|
||||
margin-top: 0.7em;
|
||||
|
|
@ -324,8 +325,8 @@ li:hover {
|
|||
}
|
||||
|
||||
.ingredients {
|
||||
font-weight: 600;
|
||||
font-size: 88%;
|
||||
/* font-weight: 600; */
|
||||
font-size: 100%;
|
||||
position: sticky;
|
||||
/* top: 0px; */
|
||||
/* padding-top: 1.5em; */
|
||||
|
|
@ -362,7 +363,7 @@ li:hover .noun {
|
|||
|
||||
.instructions.numbered li {
|
||||
padding-left: 2rem;
|
||||
margin-left: -0.6rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.substep {
|
||||
|
|
@ -380,6 +381,9 @@ li:hover .noun {
|
|||
.hanging .ingredient {
|
||||
/* margin-left: -3rem; */
|
||||
/* padding-left: 3rem; */
|
||||
/* padding: 0.2em; */
|
||||
/* padding-left: 2rem; */
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.ingredients .yield {
|
||||
|
|
@ -389,15 +393,16 @@ li:hover .noun {
|
|||
margin-left:2em;
|
||||
}
|
||||
.ingredients.hanging .quantity {
|
||||
/* height: 2em; */
|
||||
/* float:
|
||||
left; */
|
||||
/* margin-left: -3rem; */
|
||||
/* max-width: 1rem; */
|
||||
text-align:
|
||||
right;
|
||||
/* margin-left: -2.1rem; */
|
||||
/* max-width: 3rem; */
|
||||
text-align: right;
|
||||
color: var(--accent-color);
|
||||
width: auto;
|
||||
/* min-width: 2rem; */
|
||||
white-space: nowrap;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.ingredient:hover {
|
||||
|
|
@ -498,14 +503,19 @@ hr {
|
|||
.instructions,
|
||||
header {
|
||||
/* padding: 0 .4em; */
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-bottom:0.5em;
|
||||
border-bottom:1px solid currentColor;
|
||||
}
|
||||
.ingredients {
|
||||
border-top:0.5px solid currentColor;
|
||||
padding-top:1em;
|
||||
/* border-top:0.5px solid currentColor; */
|
||||
/* padding-top:1em; */
|
||||
padding-bottom:1em;
|
||||
border-bottom:0.5px solid currentColor;
|
||||
margin-bottom:1em;
|
||||
max-width: unset;
|
||||
}
|
||||
.instructions hr:first-child {
|
||||
display:none;
|
||||
|
|
@ -709,9 +719,11 @@ span.number:after {
|
|||
|
||||
section.ingredients caption {
|
||||
content: "Ingredients";
|
||||
display: table-caption;
|
||||
margin-bottom: calc(1.3rem - 1em);
|
||||
}
|
||||
section.ingredients.hanging caption {
|
||||
display: table-caption;
|
||||
}
|
||||
|
||||
.hanging .ingredient .quantity:after {
|
||||
content: "\00a0\00a0";
|
||||
|
|
@ -726,9 +738,9 @@ a.publisherlink,
|
|||
.ingredients caption,
|
||||
.instructions caption {
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.88rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.01rem;
|
||||
/* letter-spacing: 0.01rem; */
|
||||
user-select: none;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
|
@ -737,7 +749,6 @@ a.publisherlink,
|
|||
text-align: left;
|
||||
display: block;
|
||||
margin-bottom: 1em;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -772,6 +783,26 @@ span.timer.active.expired {
|
|||
background-color: rgb(221, 40, 0);
|
||||
}
|
||||
|
||||
/* Watches */
|
||||
@media screen and (max-width: 220px) {
|
||||
.watch-hide {
|
||||
display: none !important;
|
||||
}
|
||||
body {
|
||||
margin: 0 0vw 0 6vw;
|
||||
}
|
||||
html {
|
||||
font-size:18px;
|
||||
}
|
||||
/* .quantity, span.bullet {
|
||||
font-size:150%;
|
||||
} */
|
||||
}
|
||||
|
||||
html.watch .watch-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
font-size: 14px;
|
||||
|
|
@ -822,7 +853,6 @@ span.timer.active.expired {
|
|||
|
||||
|
||||
.ingredients {
|
||||
display: table;
|
||||
width: auto;
|
||||
/* background-color: #eee; */
|
||||
/* border: 1px solid #666666; */
|
||||
|
|
@ -832,19 +862,29 @@ span.timer.active.expired {
|
|||
height: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
.ingredients.hanging {
|
||||
display: table;
|
||||
|
||||
}
|
||||
|
||||
.ingredient {
|
||||
display: table-row;
|
||||
width: auto;
|
||||
clear: both;
|
||||
}
|
||||
.hanging .ingredient {
|
||||
}
|
||||
.hanging .ingredient > * {
|
||||
display: table-cell;
|
||||
width: 99%;
|
||||
}
|
||||
|
||||
.ingredient > * {
|
||||
/* float: left; */ /* fix for buggy browsers */
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
/* background-color: red; */
|
||||
/* padding: 0; */
|
||||
/* margin: 0; */
|
||||
/* margin-bottom: 1em; */
|
||||
/* display: block; */
|
||||
}
|
||||
|
||||
a.publisherlink:hover {
|
||||
|
|
|
|||
|
|
@ -23,6 +23,9 @@ let FRACTION_MAP = {
|
|||
}
|
||||
}
|
||||
|
||||
var isWatch = (window.outerWidth < 220);
|
||||
if (isWatch) document.documentElement.classList.add("watch")
|
||||
|
||||
let ignoredTerms = [
|
||||
"but", "broken", "pieces", "tbsp", "tsp", "peeled", "then", "can", "oz", "fresh", "out", "not", "sprig", "sprigs", "room", "temperature", "still", "see", "notes", "with", "beat", "together", "crust", "very", "cold", "hot", "top", "warm", "one", "note", "teaspoon", "teaspoons", "tablespoon", "tablespoons", "cup", "cups", "taste", "more", "melted", "into", "wide", "pound", "pounds", "gram", "grams", "you", "ounce", "ounces", "thinly", "sliced",
|
||||
"pan", "cube", "cubes", "finely", "ground", "garnish", "about", "cut", "and", "smashed", "each", "the", "medium", "large", "small", "for", "chopped", "minced", "grated", "box", "softened", "directed", "shredded", "cooked", "from", "frozen", "thawed"
|
||||
|
|
@ -175,17 +178,25 @@ const replacements = {
|
|||
"tablespoon": "Tbsp."
|
||||
}
|
||||
|
||||
let lastNoun = undefined;
|
||||
window.addEventListener("mouseover", (e) => {
|
||||
let target = e.target;
|
||||
|
||||
if (target.classList.contains("noun")) {
|
||||
let els = document.querySelectorAll("#" + e.target.id);
|
||||
|
||||
let isIngredient = target.closest(".ingredients");
|
||||
for (const noun of els) {
|
||||
noun.classList.add("hovered");
|
||||
noun.closest(".substep")?.classList.add("hovered")
|
||||
noun.closest(".ingredient")?.classList.add("hovered")
|
||||
if (noun.closest(".ingredients") != isIngredient) {
|
||||
noun.scrollIntoView({behavior:"smooth", block: "center"})
|
||||
console.log("focusing", noun)
|
||||
if (noun == lastNoun) break;
|
||||
}
|
||||
}
|
||||
lastNoun = target;
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -303,7 +314,7 @@ function ingredientEl(string, terms) {
|
|||
if (match) {
|
||||
return [m("span.quantity", match[1].replace(" ", "\u202F")), " ", m("span", {innerHTML:highlightTerms(match[2], terms)})]
|
||||
}
|
||||
return [m("span.quantity", ""), m("span", {innerHTML:string})];
|
||||
return [m("span.quantity", ""), m("span", {innerHTML:highlightTerms(string, terms)})];
|
||||
}
|
||||
|
||||
function highlightTerms(string, terms) {
|
||||
|
|
@ -572,12 +583,12 @@ function render() {
|
|||
if (blur > 1) thumbnail.style.filter = `blur(${blur/2}px)`;
|
||||
|
||||
setTimeout(() => thumbnail.style.opacity = 1.0, 0);
|
||||
if (window.scrollY == 0) setTimeout(() => {
|
||||
const yOffset = -20;
|
||||
const element = document.querySelector('.recipe-content');
|
||||
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
|
||||
window.scrollTo({top: y, behavior: 'smooth'});
|
||||
}, 1000)
|
||||
// if (window.scrollY == 0) setTimeout(() => {
|
||||
// const yOffset = -20;
|
||||
// const element = document.querySelector('.recipe-content');
|
||||
// const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
|
||||
// window.scrollTo({top: y, behavior: 'smooth'});
|
||||
// }, 1000)
|
||||
};
|
||||
bgImg.src = image;
|
||||
|
||||
|
|
@ -625,7 +636,7 @@ function render() {
|
|||
// m("div.spacer"),
|
||||
),
|
||||
),
|
||||
m(".actions.print-hide",
|
||||
m(".actions.print-hide.watch-hide",
|
||||
originalURL ? m("a.action", { title:"Open original", href: originalURL, target:"_blank"}, m(".icon.public", {innerHTML:icons.public})) : null,
|
||||
m("a.action", { title:"Share", onclick: share}, m(".icon.share", {innerHTML:icons.share})),
|
||||
// m("a.action", { title:"Show steps as list", onclick: () => {reformat = !reformat; render(); return false;}}, m(".icon.checklist")),
|
||||
|
|
@ -640,7 +651,7 @@ function render() {
|
|||
),
|
||||
),
|
||||
m(".columns",
|
||||
m("section.ingredients.hanging",
|
||||
m(isWatch ? "section.ingredients" : "section.ingredients.hanging",
|
||||
m("caption.ingredients-title", {onclick:(e) => {e.target.closest("section").classList.toggle("hanging")}},"Ingredients"),
|
||||
ingredients,
|
||||
// m("canvas#qr")
|
||||
|
|
|
|||
Loading…
Reference in a new issue