fix: prevent clipped recipe content
This commit is contained in:
1 parent
fb7d275689
commit
3f35f173ad
3 files changed
+16
-8
No files matched your search
@@ -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 {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in new issue
Block a user