Skip to content

Fix gate hover contrast and pilot badge positioning #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mogglemoss merged 4 commits into from
Sep 14, 2026
Merged

Fix gate hover contrast and pilot badge positioning #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
853fb6e
fix contrast issues
cvweiss Sep 14, 2026
63936c4
Move person icon to better position
cvweiss Sep 14, 2026
d03e404
WCAG for tutorial popover text
cvweiss Sep 14, 2026
e7abdb0
better modal positioning
cvweiss Sep 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions app/css/_override-7-map-and-table.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,5 +255,3 @@
.sig-chip {
color: var(--foreground);
}
.gate-chip a { color: var(--foreground); }
.gate-chip a:hover { color: var(--primary); }
8 changes: 7 additions & 1 deletion app/css/_override-c-polish.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,13 @@
line-height: 1.6;
text-decoration: none;
}
.gate-chip:hover { background: var(--accent); }
/* The chip is the link itself. Pair the brand's primary fill with its
explicitly chosen on-primary ink so hover cannot become blue on orange. */
.gate-chip:hover {
background: var(--primary);
color: var(--primary-foreground);
text-decoration: none;
}
.gate-chip .gate-sec {
padding: 0 5px;
border-radius: 999px;
Expand Down
28 changes: 22 additions & 6 deletions app/css/_theme-refit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,22 @@
#wrapper::before { background: radial-gradient(ellipse at 30% -20%, var(--glow) 0%, var(--background) 60%); }
body { background-image: none; }

/* Bring Intro.js tooltips onto the active theme surface. Its bundled CSS
otherwise leaves the panel and arrow white in dark mode. */
.introjs-tooltip {
background-color: var(--popover);
border: 1px solid var(--border);
color: var(--popover-foreground);
}
.introjs-arrow.top,
.introjs-arrow.top-right,
.introjs-arrow.top-middle { border-bottom-color: var(--popover); }
.introjs-arrow.right,
.introjs-arrow.right-bottom { border-left-color: var(--popover); }
.introjs-arrow.bottom { border-top-color: var(--popover); }
.introjs-arrow.left,
.introjs-arrow.left-bottom { border-right-color: var(--popover); }

/* Running text in the brand grey; names, values and headings in bone. */
#sigTable td, .commentBody, .sys-meta, .sys-extra, .field-label, .ui-dialog .ui-dialog-content { color: var(--text-body); }
#sigTable td:nth-child(1), .sys-name, .field-value, #chainMap div.node > h4.nodeSystem, .stats dd { color: var(--foreground); }
Expand Down Expand Up @@ -1243,7 +1259,7 @@ kbd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* The corner chip straddles the top edge in the box's own top padding; the
name starts below it. Mirrors the statics on the bottom edge. */
#chainMap div.node,
#chainMap div.redNode.node, #chainMap div.yellowNode.node, #chainMap div.greenNode.node { padding-top: 10px; padding-bottom: 7px; margin-top: 10px; }
#chainMap div.redNode.node, #chainMap div.yellowNode.node, #chainMap div.greenNode.node { padding-top: 14px; padding-bottom: 7px; margin-top: 10px; }
#chainMap div.node > .nodeClass { top: -7px; left: -5px; }
#chainMap div.node > .nodeClass > span { height: 14px; }
/* The desktop layout pins every panel's .content static with !important;
Expand All @@ -1256,13 +1272,13 @@ kbd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#chainMap div.node > .nodeIcons > div { grid-area: auto; grid-row: auto; grid-column: auto; }
#chainMap div.node,
#chainMap div.redNode.node, #chainMap div.yellowNode.node, #chainMap div.greenNode.node { margin-top: 8px; margin-bottom: 9px; }
/* The pilot icon and its count sit a little inside the top-right corner,
and the chain panel keeps headroom above its first row so nothing that
rides a top edge is clipped by the panel. */
#chainMap div.node > .nodeIcons > div:last-child { top: -5px; right: -3px; gap: 1px; }
/* Keep the pilot icon and count wholly inside the top-right corner. Negative
offsets put both controls directly over the node's top and right borders. */
#chainMap div.node > .nodeIcons > div:last-child { top: 2px; right: 3px; gap: 1px; }
#chainMap div.node > .nodeIcons > div:first-child { top: -6px; right: 22px; }
#chainMap div.node > .nodeIcons .badge { height: 12px; padding: 0 4px; font-size: 8.5px; box-shadow: 0 0 0 2px var(--background); }
#chainMap div.node > .nodeIcons .badge { height: 12px; padding: 0 4px; font-size: 8.5px; box-shadow: none; }
#chainMap div.node > .nodeIcons [data-icon]::before { font-size: 11px; }
#chainMap div.node > .nodeIcons [data-icon="user"] { padding: 0; }
#chainWidget > #chainParent.content { padding-top: 12px !important; }
/* The pilot count is centred in its capsule (it is a flex box, which does
not centre on its own), with a round minimum so "1" and "12" both sit true. */
Expand Down
34 changes: 29 additions & 5 deletions app/js/dialogs/signature-dialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,18 @@
const sigDialog = {};
const sigDialogVM = {};

sigDialog.positionInViewport = function() {
const dialog = $("#dialog-signature");
if (!dialog.hasClass("ui-dialog-content") || !dialog.dialog("isOpen")) return;

dialog.dialog("option", "position", {
my: "center",
at: "center",
of: window,
collision: "fit"
});
};

sigDialog.openSignatureDialog = function(e) {
if(e.preventDefault) { e.preventDefault(); } // Allow calls with fake event-like objects too
sigDialogVM.mode = e.data.mode;
Expand Down Expand Up @@ -31,7 +43,7 @@ sigDialog.openSignatureDialog = function(e) {
autoOpen: true,
resizable: false,
dialogClass: "dialog-noeffect ui-dialog-shadow",
position: {my: "center", at: "center", of: $("#signaturesWidget")},
position: {my: "center", at: "center", of: window, collision: "fit"},
buttons: {
Delete: function() {
const d = $(this);
Expand Down Expand Up @@ -203,11 +215,21 @@ sigDialog.openSignatureDialog = function(e) {
// Toggle between wormhole and regular signatures
$("#dialog-signature").on("selectmenuchange", "[name='signatureType']", function() {
if (this.value == "wormhole") {
$("#dialog-signature #site").slideUp(200, function() { $(this).hide(0); });
$("#dialog-signature #wormhole").slideDown(200, function() { $(this).show(200); });
$("#dialog-signature #site").slideUp(200, function() {
$(this).hide(0);
sigDialog.positionInViewport();
});
$("#dialog-signature #wormhole").slideDown(200, function() {
$(this).show(200, sigDialog.positionInViewport);
});
} else {
$("#dialog-signature #site").slideDown(200, function() { $(this).show(200); });
$("#dialog-signature #wormhole").slideUp(200, function() { $(this).hide(0); });
$("#dialog-signature #site").slideDown(200, function() {
$(this).show(200, sigDialog.positionInViewport);
});
$("#dialog-signature #wormhole").slideUp(200, function() {
$(this).hide(0);
sigDialog.positionInViewport();
});
}

ValidationTooltips.close();
Expand Down Expand Up @@ -494,6 +516,8 @@ sigDialog.openSignatureDialog = function(e) {
$("#dialog-signature #wormhole").show();
}
}

sigDialog.positionInViewport();
},
close: function() {
ValidationTooltips.close();
Expand Down
17 changes: 17 additions & 0 deletions e2e/signatures.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,23 @@ test.describe("the traps", () => {
test.beforeEach(async ({ page }) => { await login(page, SYSTEM); await removeSigsByPrefix(page, PREFIX); });
test.afterEach(async ({ page }) => { await removeSigsByPrefix(page, PREFIX).catch(() => {}); });

test("the signature dialog remains inside the viewport when it expands", async ({ page }) => {
const viewport = { width: 800, height: 600 };
await page.setViewportSize(viewport);
await page.click("#add-signature");
await chooseType(page, "Wormhole");

const dialog = page.locator(".ui-dialog:visible");
await expect(dialog.locator("#wormhole")).toBeVisible();
await page.waitForFunction(() => !$("#dialog-signature #site, #dialog-signature #wormhole").is(":animated"));
const bounds = await dialog.boundingBox();

expect(bounds.x).toBeGreaterThanOrEqual(0);
expect(bounds.y).toBeGreaterThanOrEqual(0);
expect(bounds.x + bounds.width).toBeLessThanOrEqual(viewport.width + 1);
expect(bounds.y + bounds.height).toBeLessThanOrEqual(viewport.height + 1);
});

test("typing the id then Tab does not skip the numeric half", async ({ page }) => {
await page.click("#add-signature");
await page.locator("#dialog-signature input[name=signatureID_Alpha]").click();
Expand Down
Loading