diff --git a/package.json b/package.json index 9ebd7f7..7f16c0c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "the-fold-within", - "version": "3.0.3", + "version": "3.0.4", "dependencies": { "pdf-parse": "^1.1.1" } diff --git a/public/app.js b/public/app.js index ba41946..16a00b1 100755 --- a/public/app.js +++ b/public/app.js @@ -265,33 +265,48 @@ function renderIframe(rel) { const doc = iframe.contentDocument; const style = doc.createElement("style"); style.textContent = ` - html,body{ - background:#0b0b0b; - color:#e6e3d7; - font-family:Inter,sans-serif; - margin:0; - padding:3vh 6vw; - line-height:1.8; - } - body{ - display:flex; - flex-direction:column; - align-items:center; - justify-content:flex-start; - min-height:100vh; - } - *{ - max-width:960px; - width:100%; - } - img,video,iframe{ - max-width:100%; - height:auto; - border-radius:8px; - } -`; + html,body { + background:#0b0b0b; + color:#e6e3d7; + font-family:Inter,sans-serif; + margin:0; + padding:3vh 6vw; + line-height:1.8; + } + body { + display:flex; + flex-direction:column; + align-items:center; + justify-content:flex-start; + min-height:100vh; + } + * { + max-width:960px; + width:100%; + } + img,video,iframe { + max-width:100%; + height:auto; + border-radius:8px; + } + /* remove internal scrollbars */ + html { overflow:hidden; } + `; doc.head.appendChild(style); - } catch {} + + // Inject auto-height script + const script = doc.createElement("script"); + script.textContent = ` + function sendHeight() { + window.parent.postMessage({ type: 'resizeFrame', height: document.body.scrollHeight }, '*'); + } + new ResizeObserver(sendHeight).observe(document.body); + window.addEventListener('load', sendHeight); + `; + doc.body.appendChild(script); + } catch (e) { + console.warn("iframe load error", e); + } }; } @@ -306,4 +321,13 @@ function renderDefault() { } } +window.addEventListener("message", e => { + if (e.data?.type === "resizeFrame") { + const iframe = document.querySelector("iframe[src*='" + location.hash.replace(/^#\//, "") + "']"); + if (iframe) { + iframe.style.height = e.data.height + "px"; + } + } +}); + init(); diff --git a/public/styles.css b/public/styles.css index 3dd32e9..feda994 100755 --- a/public/styles.css +++ b/public/styles.css @@ -212,22 +212,21 @@ body.sidebar-open #sidebar { transform: translateX(0); } } .viewer iframe { + display: block; width: 100%; max-width: 960px; - height: calc(100vh - var(--topbar-h) - var(--subnav-h) - 120px); min-height: 500px; border: 0; border-radius: var(--radius); background: #0b0b0b; box-shadow: 0 0 30px rgba(0,0,0,0.6); - margin: 0 auto; - transition: all .4s ease; + margin: 0 auto 3rem auto; + transition: height .4s ease, transform .4s ease; } @media (max-width: 768px) { .viewer iframe { max-width: 100%; - height: calc(100vh - var(--topbar-h) - var(--subnav-h) - 80px); border-radius: 0; } }