Clamped windows in the wm to the canvas for tighter screen real estate.
Added a bar that indicates when a window can be scrolled. Updated personal info.
This commit is contained in:
parent
2ed4a4f13b
commit
067a114840
4 changed files with 73 additions and 7 deletions
|
|
@ -216,6 +216,7 @@ body { animation: flicker 12s infinite; }
|
|||
.window {
|
||||
position: absolute;
|
||||
min-width: 280px; min-height: 160px;
|
||||
max-height: calc(100vh - 20px);
|
||||
background: var(--win-bg);
|
||||
border: 4px solid var(--p);
|
||||
border-radius: 0;
|
||||
|
|
@ -276,6 +277,25 @@ body { animation: flicker 12s infinite; }
|
|||
overflow-y: auto; overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* More / scroll indicator — sits between content and footer */
|
||||
.scroll-more {
|
||||
padding: 1px 10px;
|
||||
background: var(--win-bg);
|
||||
border-top: 1px dashed var(--p-dim);
|
||||
color: var(--p-dim);
|
||||
font-family: var(--font-display);
|
||||
font-size: 14px;
|
||||
letter-spacing: 3px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
user-select: none;
|
||||
transition: color 0.08s, background 0.08s, border-color 0.08s;
|
||||
}
|
||||
.scroll-more:hover { color: var(--p); background: var(--p-faint); }
|
||||
.window.focused .scroll-more { border-top-color: var(--p-dim); }
|
||||
.window.focused .scroll-more:hover { color: var(--p); }
|
||||
|
||||
/* Footer bar — dark bg, amber-tinted buttons */
|
||||
.window-footer {
|
||||
display: flex; align-items: stretch; gap: 0;
|
||||
|
|
|
|||
|
|
@ -56,6 +56,27 @@ const WM = (() => {
|
|||
footer.appendChild(spacer);
|
||||
footer.appendChild(resizeHandle);
|
||||
win.appendChild(footer);
|
||||
|
||||
// ── More / scroll indicator ──────────────
|
||||
const moreBar = document.createElement("div");
|
||||
moreBar.className = "scroll-more hidden";
|
||||
moreBar.textContent = "-- more --";
|
||||
win.insertBefore(moreBar, footer);
|
||||
|
||||
const content = win.querySelector(".window-content");
|
||||
if (content) {
|
||||
function syncMore() {
|
||||
const overflows = content.scrollHeight > content.clientHeight + 2;
|
||||
const atEnd = content.scrollHeight - content.scrollTop - content.clientHeight < 4;
|
||||
moreBar.classList.toggle("hidden", !overflows || atEnd);
|
||||
}
|
||||
content.addEventListener("scroll", syncMore);
|
||||
moreBar.addEventListener("click", () => {
|
||||
content.scrollBy({ top: content.clientHeight * 0.8, behavior: "smooth" });
|
||||
});
|
||||
new ResizeObserver(syncMore).observe(content);
|
||||
win._syncMore = syncMore;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Register a window element ─────────── */
|
||||
|
|
@ -112,12 +133,30 @@ const WM = (() => {
|
|||
|
||||
/* ── Show / Hide ───────────────────────── */
|
||||
|
||||
/* ── Clamp window to desktop-area bounds ── */
|
||||
|
||||
function clampToArea(el) {
|
||||
const area = document.querySelector(".desktop-area");
|
||||
if (!area) return;
|
||||
const ar = area.getBoundingClientRect();
|
||||
const wr = el.getBoundingClientRect();
|
||||
const margin = 8;
|
||||
const availH = ar.bottom - wr.top - margin;
|
||||
const availW = ar.right - wr.left - margin;
|
||||
if (availH > 80 && wr.height > availH) el.style.height = availH + "px";
|
||||
if (availW > 80 && wr.width > availW) el.style.width = availW + "px";
|
||||
}
|
||||
|
||||
function show(id) {
|
||||
const s = state.get(id);
|
||||
if (!s) return;
|
||||
s.el.classList.remove("hidden");
|
||||
s.hidden = false;
|
||||
focusEl(s.el);
|
||||
requestAnimationFrame(() => {
|
||||
clampToArea(s.el);
|
||||
if (s.el._syncMore) s.el._syncMore();
|
||||
});
|
||||
}
|
||||
|
||||
function hide(id) {
|
||||
|
|
|
|||
|
|
@ -2,14 +2,21 @@
|
|||
permalink: false
|
||||
---
|
||||
|
||||
## Get in touch
|
||||
## Jake "**lordtet**" Holtham
|
||||
|
||||
### Mail
|
||||
If you have an interesting problem for me, or think I'd fit in at your workplace, feel free to drop me a message.
|
||||
|
||||
You have the best chance of reaching me by email.
|
||||
|
||||
### Contact
|
||||
Mail: [jake@lordnet.sh](mailto:jake@lordnet.sh) (Preferred)
|
||||
|
||||
Matrix: lordtet@lordnet.sh
|
||||
|
||||
|
||||
|
||||
### GitHub
|
||||
|
||||
### Code Repositories
|
||||
- [repos.lordnet.sh](https://repos.lordnet.sh) (Primary)
|
||||
- [github.com/lordtet](https://github.com/lordtet/) (Secondary, old)
|
||||
|
||||
|
||||
### PGP
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ permalink: /
|
|||
<div class="desktop-icons" aria-label="Desktop icons">
|
||||
<div class="desktop-icon" data-opens="win-about" role="button" tabindex="0" aria-label="Open about">
|
||||
<div class="icon-art">[i]</div>
|
||||
<div class="icon-label">about_me.txt</div>
|
||||
<div class="icon-label">about_me.sh</div>
|
||||
</div>
|
||||
<div class="desktop-icon" data-opens="win-blog" role="button" tabindex="0" aria-label="Open blog">
|
||||
<div class="icon-art">[/]</div>
|
||||
|
|
@ -175,7 +175,7 @@ permalink: /
|
|||
id="win-contact"
|
||||
data-wid="win-contact"
|
||||
data-title="contact"
|
||||
style="top:120px; left:240px; width:480px;">
|
||||
style="top:20px; left:240px; width:480px;">
|
||||
|
||||
<div class="window-content">
|
||||
{{ collections.contactContent[0].templateContent | safe }}
|
||||
|
|
|
|||
Loading…
Reference in a new issue