jawhng/404-Layers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Collapse mode and layer onto one picker row; fix renderer diagnosis

Browse Source 
Only one layer is ever active, so neither mode nor layer needs a scrolling
row. Two pickers side by side cost one 44px row instead of two.

The panel needed that space: .pads uses minmax(34px,1fr) rows and sat
exactly at the 34px floor, so the SP-404 illustration clipped at the
bottom. Measured on device:

  strip   96px -> 44px
  panel  433px -> 485px
  pads   142px -> 194px, rows 34px -> 44.75px
  unit overflow 1px -> 0

The layer list is read out of the reference's own chips at render time,
so its set, ordering and counts cannot drift from renderExplore().

Also corrects the renderer-denial root cause. It is not screen state: a
denial was observed with Reason[screen_on & caller care]. Every failure
followed 'adb install -r' and an immediate relaunch has always succeeded,
so device.sh now retries the force-stop/start cycle instead of blaming
the lockscreen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Georgi Durankiev
2026-09-16 23:04:13 +03:00
parent f8565c35cd
commit 5f9d89d9fb
4 changed files with 149 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
native/native.css
View File

@@ -42,6 +42,13 @@
single .ctxbtn below, leaving one chip row with real touch targets.
Phase 2 must carry this - see CLAUDE.md. */
/* Mode and layer pickers share one row: only one layer is ever active, so
neither needs a scrolling row of its own. One 44px row instead of two gives
the panel back 52px, which it needs - its pad rows sit at their
minmax(34px,1fr) floor, so anything less clips the illustration. */
.stripbar{ display: flex; gap: 8px; }
.stripbar .ctxbtn{ flex: 1 1 0; min-width: 0; font-size: 1rem; padding: 8px 12px; }
.ctxbtn{
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; min-height: 44px; padding: 8px 14px;

76
native/native.js
View File

@@ -128,6 +128,47 @@
.join("");
}
/* Snapshot of the reference's own layer chips, refreshed on every render.
Read from its DOM rather than recomputed, so the set, ordering and counts
cannot drift from what renderExplore() decided. */
var layerOptions = [];
function snapshotLayers(row) {
return [].map.call(row.querySelectorAll(".chip"), function (c) {
var clone = c.cloneNode(true);
var small = clone.querySelector("small");
var count = small ? small.textContent.trim() : "";
if (small) small.remove();
return { layer: c.getAttribute("data-layer") || "", label: clone.textContent.trim(), count: count };
});
}
function layerSheetHTML() {
var cur = layerKey(st.held);
return layerOptions
.map(function (o) {
return '<button class="ctxopt" data-layer="' + o.layer + '" aria-pressed="' + (o.layer === cur) + '">' +
"<b>" + o.label + '</b><span class="hint">' +
(o.count === "1" ? "1 function" : o.count + " functions") + " on this layer</span></button>";
})
.join("");
}
function pickerBtn(sheetAttr, text, aria) {
var btn = document.createElement("button");
btn.className = "ctxbtn";
btn.setAttribute(sheetAttr, "");
btn.setAttribute("aria-label", aria);
var label = document.createElement("b");
label.textContent = text;
var caret = document.createElement("span");
caret.setAttribute("aria-hidden", "true");
caret.textContent = "▾";
btn.appendChild(label);
btn.appendChild(caret);
return btn;
}
function reshapeStrip() {
var strip = document.getElementById("strip");
if (!strip) return;
@@ -136,18 +177,19 @@
// Drill renders a .stripbtn and Find an input, so both are left alone.
var rows = strip.querySelectorAll(".chips");
if (phone() && rows.length >= 2) {
var btn = document.createElement("button");
btn.className = "ctxbtn";
btn.setAttribute("data-ctxsheet", "");
btn.setAttribute("aria-label", "Mode: " + CTX[st.ctx] + ". Change mode");
var label = document.createElement("b");
label.textContent = CTX[st.ctx];
var caret = document.createElement("span");
caret.setAttribute("aria-hidden", "true");
caret.textContent = "▾";
btn.appendChild(label);
btn.appendChild(caret);
rows[0].replaceWith(btn);
layerOptions = snapshotLayers(rows[1]);
// Only one layer is ever active, so both rows collapse to pickers. Side by
// side they cost one 44px row instead of two, which the panel needs: its
// pad rows sit at their minmax(34px,1fr) floor and clip below that.
var held = st.held.length ? st.held.map(mName).join(" + ") : "No modifier";
var bar = document.createElement("div");
bar.className = "stripbar";
bar.appendChild(pickerBtn("data-ctxsheet", CTX[st.ctx], "Mode: " + CTX[st.ctx] + ". Change mode"));
bar.appendChild(pickerBtn("data-layersheet", held, "Layer: " + held + ". Change layer"));
rows[0].replaceWith(bar);
rows[1].remove();
}
strip.querySelectorAll(".chips").forEach(function (r) {
@@ -171,9 +213,15 @@
openSheet("Where you are", ctxSheetHTML());
return;
}
if (t.hasAttribute("data-layersheet")) {
openSheet("Layers in " + CTX[st.ctx], layerSheetHTML());
return;
}
// The reference's own handler runs first (registered earlier) and applies
// data-ctx, so this only has to dismiss the sheet afterwards.
if (t.hasAttribute("data-ctx") && t.closest("#sheet")) closeSheet();
// data-ctx / data-layer, so this only has to dismiss the sheet afterwards.
// data-layer="" (no modifier) is intentional: the reference tests
// `d.layer !== undefined`, so an empty value still selects that layer.
if ((t.hasAttribute("data-ctx") || t.hasAttribute("data-layer")) && t.closest("#sheet")) closeSheet();
});
// The first render already ran before this script loaded.