peter/daybook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add title tooltip and widen artifact-list resize range

Browse source 
- Preview control-bar title now shows a native tooltip with the full
  text on hover, so titles truncated by ellipsis are still readable.
  Wired into the server render and both JS update paths.
- Splitter resize bounds are now per-pane: the artifact list can grow
  up to 720px (was a shared 420px cap that made it feel un-draggable to
  the right), while the sources sidebar stays 96-320px.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ritte 2026-07-24 10:28:12 +02:00
parent e0f1cce626
commit 13f728bcd6
1 changed files with 18 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

22
templates/artifacts/feed.html
View file

@ -59,7 +59,7 @@
<section class="preview-pane"> <section class="preview-pane">
<header class="pane-bar preview-actions" data-actions> <header class="pane-bar preview-actions" data-actions>
<div class="preview-title" data-preview-title> <div class="preview-title" data-preview-title {% if selected_artifact %}title="{{ selected_artifact.title }}"{% endif %}>
{% if selected_artifact %}{{ selected_artifact.title }}{% else %}No artifact loaded{% endif %} {% if selected_artifact %}{{ selected_artifact.title }}{% else %}No artifact loaded{% endif %}
</div> </div>
<nav class="view-toggle" aria-label="Preview mode"> <nav class="view-toggle" aria-label="Preview mode">
@ -126,16 +126,24 @@
applySizes(); applySizes();
// Per-pane resize bounds. The artifact list may grow much wider than the
// sources sidebar, but is still capped so it can't swallow the preview.
const sizeBounds = {
days: {min: 96, max: 320},
artifacts: {min: 200, max: 720},
};
document.querySelectorAll(".splitter").forEach((splitter) => { document.querySelectorAll(".splitter").forEach((splitter) => {
splitter.addEventListener("pointerdown", (event) => { splitter.addEventListener("pointerdown", (event) => {
const target = splitter.dataset.splitter; const target = splitter.dataset.splitter;
const startX = event.clientX; const startX = event.clientX;
const startWidth = sizes[target]; const startWidth = sizes[target];
const bounds = sizeBounds[target];
splitter.setPointerCapture(event.pointerId); splitter.setPointerCapture(event.pointerId);
document.body.classList.add("is-resizing"); document.body.classList.add("is-resizing");
const move = (moveEvent) => { const move = (moveEvent) => {
sizes[target] = Math.max(96, Math.min(420, startWidth + moveEvent.clientX - startX)); sizes[target] = Math.max(bounds.min, Math.min(bounds.max, startWidth + moveEvent.clientX - startX));
applySizes(); applySizes();
}; };
@ -203,7 +211,10 @@
const actions = document.querySelector("[data-actions]"); const actions = document.querySelector("[data-actions]");
if (!actions) return; if (!actions) return;
const previewTitle = actions.querySelector("[data-preview-title]"); const previewTitle = actions.querySelector("[data-preview-title]");
if (previewTitle) previewTitle.textContent = row.dataset.title; if (previewTitle) {
previewTitle.textContent = row.dataset.title;
previewTitle.title = row.dataset.title;
}
actions.querySelectorAll("[data-view]").forEach((link) => { actions.querySelectorAll("[data-view]").forEach((link) => {
const view = link.dataset.view; const view = link.dataset.view;
link.classList.toggle("selected", view === selectedView); link.classList.toggle("selected", view === selectedView);
@ -256,7 +267,10 @@
const actions = document.querySelector("[data-actions]"); const actions = document.querySelector("[data-actions]");
if (!actions) return; if (!actions) return;
const previewTitle = actions.querySelector("[data-preview-title]"); const previewTitle = actions.querySelector("[data-preview-title]");
if (previewTitle) previewTitle.textContent = "No artifact loaded"; if (previewTitle) {
previewTitle.textContent = "No artifact loaded";
previewTitle.removeAttribute("title");
}
actions.querySelectorAll("[data-view]").forEach((link) => { actions.querySelectorAll("[data-view]").forEach((link) => {
link.classList.add("disabled"); link.classList.add("disabled");
link.setAttribute("aria-disabled", "true"); link.setAttribute("aria-disabled", "true");