diff --git a/docs/index.js b/docs/index.js index 4ed5c2c..00e29d9 100644 --- a/docs/index.js +++ b/docs/index.js @@ -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); diff --git a/docs/render/recipe.css b/docs/render/recipe.css index 7ce118d..8d316f7 100644 --- a/docs/render/recipe.css +++ b/docs/render/recipe.css @@ -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 { diff --git a/docs/render/recipe.js b/docs/render/recipe.js index bcbe62b..a352cc6 100644 --- a/docs/render/recipe.js +++ b/docs/render/recipe.js @@ -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")