Inline 3D viewers in articles use content width (model-viewer-inline); standalone model pages stay full-bleed
This commit is contained in:
@@ -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.
|
||||
|
||||
@@ -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]);
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user