summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorkj_sh604 <43.splash@gmail.com>2026-03-01 19:42:23 -0500
committerkj_sh604 <43.splash@gmail.com>2026-03-01 19:42:23 -0500
commit3e9061a6980221164d0f6bcf5d3f597805fbb061 (patch)
treecf58eb4076d5a6b92272f2a6fa2a6b63b9a89662
parent57f3fc0bcabce404c09976f104039862a4c6191c (diff)
fix: offset images
Diffstat
-rw-r--r--src/index.php35
1 files changed, 27 insertions, 8 deletions
diff --git a/src/index.php b/src/index.php
index 5360366..40bd103 100644
--- a/src/index.php
+++ b/src/index.php
@@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sent-web</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kj-sh604/noir.css@latest/out/noir.min.css">
- <style> :root { --sent-fg: #000000; --sent-bg: #ffffff; --sent-font: 'Noto Color Emoji', 'DejaVu Sans', sans-serif; } body { max-width: 960px; margin: 0 auto; padding: 1rem; } .subtitle { opacity: 0.6; font-size: 0.9em; margin-top: -0.8em; } /* ── controls ── */ #controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1rem; padding: 0.75rem; border: 1px solid currentColor; border-radius: 4px; } #controls label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; } #controls input[type="color"] { width: 2rem; height: 2rem; padding: 0; border: 1px solid currentColor; cursor: pointer; background: none; } #controls select { max-width: 200px; } .upload-area { display: flex; align-items: center; gap: 0.5rem; } #upload-input { display: none; } #upload-status { font-size: 0.85rem; opacity: 0.7; } /* ── editor ── */ #input { width: 100%; min-height: 420px; font-family: monospace; font-size: 0.95rem; resize: vertical; tab-size: 4; } .btn-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .hint { font-size: 0.8rem; opacity: 0.5; margin-top: 0.25rem; } /* ── presentation overlay ── */ #presentation { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: flex-start; background: var(--sent-bg); color: var(--sent-fg); cursor: none; overflow: hidden; padding-left: 7.5%; } #presentation.active { display: flex; } #slide-content { text-align: left; white-space: pre-line; word-wrap: break-word; font-family: var(--sent-font); } #slide-content img { max-width: 85vw; max-height: 85vh; width: 85vw; height: 85vh; object-fit: contain; } </style>
+ <style> :root { --sent-fg: #000000; --sent-bg: #ffffff; --sent-font: 'Noto Color Emoji', 'DejaVu Sans', sans-serif; } body { max-width: 960px; margin: 0 auto; padding: 1rem; } .subtitle { opacity: 0.6; font-size: 0.9em; margin-top: -0.8em; } /* ── controls ── */ #controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1rem; padding: 0.75rem; border: 1px solid currentColor; border-radius: 4px; } #controls label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; } #controls input[type="color"] { width: 2rem; height: 2rem; padding: 0; border: 1px solid currentColor; cursor: pointer; background: none; } #controls select { max-width: 200px; } .upload-area { display: flex; align-items: center; gap: 0.5rem; } #upload-input { display: none; } #upload-status { font-size: 0.85rem; opacity: 0.7; } /* ── editor ── */ #input { width: 100%; min-height: 420px; font-family: monospace; font-size: 0.95rem; resize: vertical; tab-size: 4; } .btn-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .hint { font-size: 0.8rem; opacity: 0.5; margin-top: 0.25rem; } /* ── presentation overlay ── */ #presentation { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: flex-start; background: var(--sent-bg); color: var(--sent-fg); cursor: none; overflow: hidden; padding-left: 7.5%; } #presentation.active { display: flex; } #slide-content { text-align: left; white-space: pre-line; word-wrap: break-word; font-family: var(--sent-font); } #slide-content img { display: block; max-width: 85vw; max-height: 85vh; object-fit: contain; } </style>
</head>
<body>
@@ -105,8 +105,8 @@ questions?</textarea>
bg: '#ffffff',
fontFamily: '',
lineSpacing: 1.25,
- usableWidth: 0.80,
- usableHeight: 0.80,
+ usableWidth: 0.85,
+ usableHeight: 0.85,
},
init() {
@@ -245,10 +245,15 @@ questions?</textarea>
});
// stop presentation whenever fullscreen is exited (covers browser-
- // intercepted Escape that never reaches the keydown handler)
+ // intercepted Escape that never reaches the keydown handler).
+ // Re-render on enter so the slide is drawn with the settled fullscreen
+ // viewport dimensions (requestFullscreen is async, so the initial
+ // renderSlide() call may use pre-fullscreen vw/vh values).
document.addEventListener('fullscreenchange', () => {
if (!document.fullscreenElement && this.presenting) {
this.stopPresentation();
+ } else if (document.fullscreenElement && this.presenting) {
+ this.renderSlide();
}
});
},
@@ -361,6 +366,10 @@ questions?</textarea>
content.innerHTML = '';
if (slide.img) {
+ // center image slides — override the text-layout defaults
+ pres.style.justifyContent = 'center';
+ pres.style.alignItems = 'center';
+ pres.style.paddingLeft = '0';
const img = document.createElement('img');
if (slide.img.startsWith('http://') || slide.img.startsWith('https://')) {
img.src = slide.img;
@@ -368,13 +377,23 @@ questions?</textarea>
img.src = 'uploads/' + slide.img;
}
img.alt = slide.img;
- img.style.maxWidth = (this.settings.usableWidth * 100) + 'vw';
- img.style.maxHeight = (this.settings.usableHeight * 100) + 'vh';
- img.style.width = (this.settings.usableWidth * 100) + 'vw';
- img.style.height = (this.settings.usableHeight * 100) + 'vh';
+ // changed to reflect the fullscreen viewport.
+ const pw = pres.offsetWidth || window.innerWidth;
+ const ph = pres.offsetHeight || window.innerHeight;
+ const maxW = Math.floor(pw * this.settings.usableWidth);
+ const maxH = Math.floor(ph * this.settings.usableHeight);
+ img.style.width = maxW + 'px';
+ img.style.height = maxH + 'px';
+ img.style.maxWidth = maxW + 'px';
+ img.style.maxHeight = maxH + 'px';
img.style.objectFit = 'contain';
+ img.style.display = 'block';
content.appendChild(img);
} else {
+ // restore text-layout defaults
+ pres.style.justifyContent = 'flex-start';
+ pres.style.alignItems = 'center';
+ pres.style.paddingLeft = '7.5%';
const fontSize = this.calcFontSize(slide.lines);
content.style.fontSize = fontSize + 'px';
content.style.lineHeight = String(this.settings.lineSpacing);
generated by cgit v1.2.3 (git 2.39.1) at 2026-05-05 04:01:58 +0000