Inline 3D viewers in articles use content width (model-viewer-inline); standalone model pages stay full-bleed

This commit is contained in:
trilium-share-gruvbox
2026-08-28 20:20:48 +02:00
parent 6b9b458e97
commit af584101eb
3 changed files with 10 additions and 2 deletions
+3 -2
View File
@@ -2,8 +2,9 @@
The share can render `.step` / `.stp` / `.stl` models interactively (three.js + occt-import-js,
hosted locally). The viewer fills the available screen width (full-bleed, ~`100vw`) with a
height based on the viewport (`min(70vh, 900px)`), so models use the maximum available space
instead of the readable content width. The caption below the model always shows
height based on the viewport (`min(70vh, 900px)`), so standalone model pages use the maximum
available space instead of the readable content width. **Inline viewers embedded in text
articles** (Options B and C) are limited to the content width (`model-viewer-inline`). The caption below the model always shows
`<file name> · <size> · <triangle count>` (e.g. `Wrench.stl · 711 KB · 14.6k triangles`).
There are three ways to embed a model, depending on how you store the file.
+2
View File
@@ -363,6 +363,7 @@
if (!m) return;
var href = a.getAttribute("href");
var el = makeViewer(name);
el.classList.add("model-viewer-inline");
a.replaceWith(el);
initViewer(el, href, m[0]);
});
@@ -384,6 +385,7 @@
var mm = t.match(MODEL_RE);
if (!mm) return;
var el = makeViewer(t);
el.classList.add("model-viewer-inline");
a.replaceWith(el);
initViewer(el, "api/notes/" + art.id + "/download", mm[0]);
});
+5
View File
@@ -821,6 +821,11 @@ html.theme-light #content code {
overflow: hidden;
}
.model-viewer.model-viewer-inline {
width: 100%;
margin-left: 0;
}
.model-viewer-data {
position: absolute;
top: 8px;