jpnadas/finrod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux: 2-col controls, model in a kebab menu, Dutch default, drop iOS code

Browse Source 
- Controls go 3 cols → 2 cols (From / To). Model selector moves
  into a kebab (⋮ more_vert) menu in the top-left corner, using
  a native <details> element so toggle and a11y come for free.
- Default source language: Dutch (was Auto-detect). Target stays
  English. Quickest path to a translation since the typical use
  case is reading Dutch text.
- Drop the VisualViewport listener and --kb-inset CSS var —
  Android Chrome already handles keyboard with the
  interactive-widget=resizes-content meta directive; iOS Safari
  isn't in scope. FAB bottom calc reverts to just safe-area-inset.
This commit is contained in:
João Pedro Battistella Nadas
2026-06-09 19:58:43 +02:00
parent 86620f9f5c
commit bde042a459
2 changed files with 63 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
static/index.html
View File

@@ -46,12 +46,55 @@
.sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
.controls {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 1rem;
}
@media (max-width: 640px) {
.controls { grid-template-columns: 1fr; }
/* Kebab menu (top-left) housing the Model dropdown — keeps the main
controls focused on the From/To pair. */
.kebab {
position: fixed;
top: calc(1rem + env(safe-area-inset-top, 0px));
left: calc(1rem + env(safe-area-inset-left, 0px));
z-index: 50;
}
.kebab > summary {
list-style: none;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--panel);
color: var(--fg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.kebab > summary::-webkit-details-marker { display: none; }
.kebab > summary::marker { display: none; }
.kebab > summary .material-symbols-outlined { font-size: 22px; }
.kebab[open] > summary { border-color: var(--accent); color: var(--accent); }
.kebab-panel {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.75rem;
min-width: 220px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.kebab-panel label {
display: block;
font-size: 0.7rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 0.25rem;
}
label { display: block; font-size: 0.75rem; color: var(--muted); margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.08em; }
select, textarea, button {
@@ -190,15 +233,15 @@
.fab .material-symbols-outlined { font-size: 28px; }
.fab:hover:not(:disabled) { transform: scale(1.06); }
.fab:disabled { opacity: 0.55; cursor: progress; }
/* --kb-inset is set from JS based on VisualViewport so the FABs ride
above the on-screen keyboard. When there's no keyboard it's 0 and the
safe-area inset wins via max(). */
/* Android Chrome shrinks the layout viewport when the soft keyboard
opens (via `interactive-widget=resizes-content` on the viewport meta),
so plain `bottom: 1.5rem` is already above the keyboard. */
.fab-primary {
bottom: calc(1.5rem + max(var(--kb-inset, 0px), env(safe-area-inset-bottom, 0px)));
bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
.fab-secondary {
/* sits above the primary: 56 (primary height) + 0.75rem gap + base offset */
bottom: calc(1.5rem + 56px + 0.75rem + max(var(--kb-inset, 0px), env(safe-area-inset-bottom, 0px)));
bottom: calc(1.5rem + 56px + 0.75rem + env(safe-area-inset-bottom, 0px));
}
.fab.busy {
animation: fab-pulse 1.4s ease-in-out infinite;
@@ -389,6 +432,13 @@
</style>
</head>
<body>
<details class="kebab">
<summary aria-label="Settings" title="Settings"><span class="material-symbols-outlined">more_vert</span></summary>
<div class="kebab-panel">
<label for="model">Model</label>
<select id="model"></select>
</div>
</details>
<div class="wrap">
<h1>finrod</h1>
<div class="sub">Translation via Ollama · loremaster of tongues</div>
@@ -402,10 +452,6 @@
<label for="target">To</label>
<select id="target"></select>
</div>
<div>
<label for="model">Model</label>
<select id="model"></select>
</div>
</div>
<div id="hot-status" class="hot-status idle">
@@ -906,7 +952,7 @@
o2.value = lang; o2.textContent = lang;
targetSel.appendChild(o2);
}
sourceSel.value = "auto";
sourceSel.value = "Dutch";
targetSel.value = "English";
}
@@ -1143,26 +1189,6 @@
Vim.mapCommand("L", "action", "finrodFocusNext", {}, { context: "normal" });
}
// Keep the FABs floating above the on-screen keyboard when it's open.
// On Chrome+Android the `interactive-widget=resizes-content` meta directive
// already shrinks the layout viewport — kb-inset stays 0 there.
// On iOS Safari (which ignores the meta) the layout viewport stays full
// and we compute the hidden bottom strip from VisualViewport.
function updateKbInset() {
const vv = window.visualViewport;
if (!vv) {
document.documentElement.style.setProperty("--kb-inset", "0px");
return;
}
const inset = Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
document.documentElement.style.setProperty("--kb-inset", inset + "px");
}
if (window.visualViewport) {
window.visualViewport.addEventListener("resize", updateKbInset);
window.visualViewport.addEventListener("scroll", updateKbInset);
}
updateKbInset();
fillLangs();
loadModels().then(() => refreshLoaded(true));
</script>