diff --git a/MMM-NextcloudCookbook.css b/MMM-NextcloudCookbook.css index ccd7d7b..04020e3 100644 --- a/MMM-NextcloudCookbook.css +++ b/MMM-NextcloudCookbook.css @@ -15,6 +15,11 @@ text-align: left; } +.MMM-NextcloudCookbook .ncc-active.ncc-scrollable { + overflow-y: auto; + overscroll-behavior: contain; +} + .MMM-NextcloudCookbook .ncc-active.ncc-theme-light { color: #27231b; background: #f8f6ef; @@ -80,14 +85,14 @@ .MMM-NextcloudCookbook .ncc-recipe header { box-sizing: border-box; - min-height: 175px; + min-height: calc(175px * var(--ncc-content-scale)); padding-right: 220px; } .MMM-NextcloudCookbook .ncc-recipe h1 { - margin: 0 0 26px; + margin: 0 0 calc(26px * var(--ncc-content-scale)); color: #fff6d8; - font-size: 82px; + font-size: calc(82px * var(--ncc-content-scale)); line-height: 1.08; } @@ -96,8 +101,8 @@ flex-wrap: wrap; gap: 10px 24px; align-items: baseline; - margin: 0 0 36px; - font-size: 36px; + margin: 0 0 calc(36px * var(--ncc-content-scale)); + font-size: calc(36px * var(--ncc-content-scale)); } .MMM-NextcloudCookbook .ncc-meta-item { diff --git a/MMM-NextcloudCookbook.js b/MMM-NextcloudCookbook.js index c5eb5f3..0146179 100644 --- a/MMM-NextcloudCookbook.js +++ b/MMM-NextcloudCookbook.js @@ -62,7 +62,7 @@ Module.register("MMM-NextcloudCookbook", { const availableWidth = root.clientWidth - Number.parseFloat(style.paddingLeft) - Number.parseFloat(style.paddingRight); - let minimum = 0.45; + let minimum = 0.2; let maximum = 2; let best = minimum; @@ -79,6 +79,9 @@ Module.register("MMM-NextcloudCookbook", { } } root.style.setProperty("--ncc-content-scale", best.toFixed(3)); + const stillOverflows = recipe.scrollHeight > availableHeight + || recipe.scrollWidth > availableWidth; + root.classList.toggle("ncc-scrollable", stillOverflows); }, setRecipeMode(active) { diff --git a/README.md b/README.md index 19c22f7..794f263 100644 --- a/README.md +++ b/README.md @@ -31,8 +31,8 @@ link; it should look like `https://cloud.example.test/s/SHARE_TOKEN`. `"side-by-side"` to display ingredients and instructions in two columns. Both layouts automatically scale the ingredient and instruction sections to make the best use of the available screen while keeping all recipe content visible. -The recipe title, timing metadata, yield, and QR controller remain at fixed -sizes. +The title and timing metadata scale with the recipe. If a recipe still cannot +fit, recipe mode becomes scrollable instead of clipping its remaining content. `theme` defaults to `"dark"`. Set it to `"light"` for a light starting theme; the controller and recipe overlay also offer a toggle, and the chosen theme is