Skip to content

PR_26179_ALFA_010-tool-display-single-line-summary #254

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
ToolboxAid merged 1 commit into from
Jun 28, 2026
Merged

PR_26179_ALFA_010-tool-display-single-line-summary #254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 2 additions & 4 deletions assets/theme-v2/css/accordion.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,7 @@ details.vertical-accordion summary::-webkit-details-marker {
}

.horizontal-accordion-toggle__icon,
.vertical-accordion__chevron,
.tool-display-mode__chevron {
.vertical-accordion__chevron {
--accordion-button-border: var(--line);
--accordion-button-background: var(--panel-soft);
--accordion-button-color: var(--gold);
Expand Down Expand Up @@ -109,8 +108,7 @@ details.vertical-accordion summary::-webkit-details-marker {
margin-left: auto
}

.vertical-accordion__chevron .theme-icon,
.tool-display-mode__chevron .theme-icon {
.vertical-accordion__chevron .theme-icon {
height: var(--space-14);
width: var(--space-14)
}
Expand Down
97 changes: 19 additions & 78 deletions assets/theme-v2/css/panels.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,39 +275,32 @@ body.tool-focus-mode .tool-center-panel:has(>details.vertical-accordion)>p {
background: var(--panel);
box-shadow: var(--shadow-lg);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-12)
display: block
}

.tool-display-mode summary {
color: var(--gold);
font-weight: var(--font-weight-heavy);
cursor: pointer;
list-style: none;
padding: var(--space-10) var(--space-44) var(--space-10) var(--space-10);
min-width: var(--space-0);
padding: var(--space-10);
display: flex;
align-items: center;
justify-content: center;
justify-content: flex-start;
gap: var(--space-10);
flex: 0 0 auto
width: 100%
}

.tool-display-mode summary::-webkit-details-marker {
display: none
}

.tool-display-mode__mode-icon {
color: var(--cyan)
}

.tool-display-mode__chevron {
position: absolute;
right: var(--space-12);
top: 50%;
transform: translateY(-50%);
z-index: var(--z-index-sm)
color: var(--gold);
height: calc(var(--icon-size-sm) * 2.6);
margin-left: auto;
width: calc(var(--icon-size-sm) * 2.6)
}

.tool-display-mode__badge {
Expand All @@ -320,90 +313,38 @@ body.tool-focus-mode .tool-center-panel:has(>details.vertical-accordion)>p {
background: transparent
}

.tool-display-mode__body {
display: grid;
grid-template-columns: auto minmax(var(--space-0), 1fr);
grid-template-rows: auto auto;
align-items: center;
column-gap: var(--space-15);
row-gap: var(--space-8);
min-width: var(--space-0);
padding: var(--space-10) var(--space-14) var(--space-10) var(--space-0)
}

.tool-display-mode__identity-row {
display: contents
}

.tool-display-mode__navigation-row {
grid-column: 2;
grid-row: 2;
display: flex;
align-items: center;
gap: var(--space-14);
flex-wrap: wrap
}

.tool-display-mode__navigation-link {
align-items: center;
color: var(--text);
display: inline-flex;
gap: var(--space-6);
line-height: var(--line-height-tight)
}

.tool-display-mode__navigation-link:hover,
.tool-display-mode__navigation-link:focus-visible {
color: var(--gold)
}

.tool-display-mode__navigation-link--disabled {
color: var(--muted)
}

.tool-display-mode__navigation-icon {
color: currentColor
}

.tool-display-mode__character {
grid-column: 1;
grid-row: 1 / span 2;
width: 225px;
height: 127px;
object-fit: contain;
display: block;
flex: 0 0 auto
}

.tool-display-mode__fullscreen-name {
display: none;
white-space: nowrap
}

.tool-display-mode__description {
grid-column: 2;
grid-row: 1;
.tool-display-mode__tool-name {
color: var(--gold);
flex: 1 1 auto;
font-weight: var(--font-weight-heavy);
min-width: var(--space-0);
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap
}

body.tool-focus-mode .tool-display-mode {
border-color: var(--line);
background: var(--panel);
box-shadow: var(--shadow-lg);
justify-content: center
box-shadow: var(--shadow-lg)
}

body.tool-focus-mode .tool-display-mode__fullscreen-name {
display: inline
body.tool-focus-mode .tool-display-mode__badge {
width: 64px;
height: 64px
}

body.tool-focus-mode .tool-display-mode__badge {
width: 32px;
height: 32px
body.tool-focus-mode .tool-display-mode__character {
display: none
}

.side-menu a {
Expand Down
83 changes: 12 additions & 71 deletions assets/theme-v2/js/tool-display-mode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,12 +73,6 @@
document.querySelectorAll("details.vertical-accordion").forEach(wireVerticalAccordionChevron);
}

function updateToolDisplayModeChevron() {
const iconName = displayMode.open ? "chevron-up" : "chevron-down";
const shell = createChevronShell(iconName, "tool-display-mode__chevron", "tool-display-mode__chevron-icon");
replaceIconNode(summary, ":scope > .tool-display-mode__chevron", shell);
}

function updateToolDisplayModeModeIcon() {
const iconName = document.body.classList.contains("tool-focus-mode") || document.fullscreenElement
? "exit-fullscreen"
Expand Down Expand Up @@ -107,7 +101,6 @@
function refreshThemeIcons() {
refreshVerticalAccordionChevrons();
updateToolDisplayModeModeIcon();
updateToolDisplayModeChevron();
refreshHorizontalToggleIcons();
}

Expand Down Expand Up @@ -146,67 +139,27 @@
const summary = document.createElement("summary");
summary.setAttribute("aria-label", "Tool Display Mode");
summary.title = "Tool Display Mode";
summary.appendChild(createThemeIconNode("fullscreen", "layout-icon tool-display-mode__mode-icon"));

const badge = document.createElement("img");
badge.className = "tool-display-mode__badge";
badge.src = publicImageSource(slot.dataset.toolIconSrc, "badges");
badge.alt = toolName + " badge";
summary.appendChild(badge);

const fullscreenName = document.createElement("span");
fullscreenName.className = "tool-display-mode__fullscreen-name";
fullscreenName.textContent = toolName;
summary.appendChild(fullscreenName);
displayMode.appendChild(summary);
displayMode.addEventListener("toggle", updateToolDisplayModeChevron);

const body = document.createElement("div");
body.className = "tool-display-mode__body";

const identityRow = document.createElement("div");
identityRow.className = "tool-display-mode__identity-row content-cluster";
identityRow.dataset.toolDisplayModeRow = "identity";
const toolNameLabel = document.createElement("span");
toolNameLabel.className = "tool-display-mode__tool-name";
toolNameLabel.textContent = toolName;
summary.appendChild(toolNameLabel);
Comment on lines +150 to +152

@chatgpt-codex-connector chatgpt-codex-connector Bot Jun 28, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Preserve the tool name in the accessible summary

For screen-reader users, this new visible tool name is not exposed because the parent summary still has aria-label="Tool Display Mode", which takes precedence over descendant text when computing the control name. Since this PR also removes the old description/body markup, the fullscreen summary is now announced generically on every tool page instead of identifying the current tool; include the tool name in the summary label or label it from this text node.

Useful? React with 👍 / 👎.


const character = document.createElement("img");
character.className = "tool-display-mode__character";
character.src = publicImageSource(slot.dataset.toolCharacterSrc, "characters");
character.alt = toolName + " character";
identityRow.appendChild(character);

const description = document.createElement("span");
description.className = "tool-display-mode__description";
description.textContent = toolName;
identityRow.appendChild(description);
body.appendChild(identityRow);
displayMode.appendChild(body);
slot.replaceWith(displayMode);
summary.appendChild(character);

@chatgpt-codex-connector chatgpt-codex-connector Bot Jun 28, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Keep the tool summary within narrow viewports

When a tool page is viewed on common phone widths, this puts the fixed 225px character into the same non-wrapping summary row as the 64px badge, ~42px fullscreen icon, three 10px gaps, and 20px padding, so the row needs about 381px before the tool name and overflows a 390px viewport's ~354px container. The previous layout kept the character out of the summary row, so this regresses mobile tool pages; add a narrow-viewport rule to shrink/hide the character or otherwise let the row fit.

Useful? React with 👍 / 👎.


function createNavigationControl(direction, target) {
const controlLabel = direction === "previous" ? "Previous" : "Next";
const dataAttribute = direction === "previous" ? "toolNavPrevious" : "toolNavNext";
const iconName = direction === "previous" ? "chevron-left" : "chevron-right";
const icon = createThemeIconNode(iconName, "layout-icon tool-display-mode__navigation-icon");
const label = document.createTextNode(controlLabel + ": " + (target?.label || "Unavailable"));

if (!target || target.disabled) {
const disabledText = document.createElement("span");
disabledText.className = "pill tool-display-mode__navigation-link tool-display-mode__navigation-link--disabled";
disabledText.dataset[dataAttribute] = "disabled";
disabledText.append(icon, label);
return disabledText;
}

const link = document.createElement("a");
link.className = "tool-display-mode__navigation-link";
link.href = target.href;
link.dataset[dataAttribute] = target.kind;
if (target.group) {
link.dataset.toolNavGroup = target.group;
}
link.append(icon, label);
return link;
}
summary.appendChild(createThemeIconNode("fullscreen", "layout-icon tool-display-mode__mode-icon"));
displayMode.appendChild(summary);
slot.replaceWith(displayMode);

function applyRegistryImages(registry) {
const registryTool = registry.getToolBySlug(toolSlug);
Expand Down Expand Up @@ -238,37 +191,26 @@
leftColumnTitle.textContent = registryName;
}
badge.alt = registryName + " badge";
fullscreenName.textContent = registryName;
toolNameLabel.textContent = registryName;
character.alt = registryName + " character";
description.textContent = registryName;
badge.src = registry.getToolImageSource(registryTool, "badge");
character.src = registry.getToolImageSource(registryTool, "tool");
}

async function renderToolNavigation() {
async function applyRegistryDisplayData() {
try {
const registry = await import("/toolbox/tool-registry-api-client.js");
const registryDiagnostic = registry.getToolRegistryApiDiagnostic();
if (registryDiagnostic) {
throw new Error(registryDiagnostic);
}
const navigation = registry.getToolNavigationTargets(toolSlug);
applyRegistryImages(registry);
const navigationRow = document.createElement("nav");
navigationRow.className = "tool-display-mode__navigation-row content-cluster";
navigationRow.dataset.toolDisplayModeRow = "navigation";
navigationRow.setAttribute("aria-label", "Tool build-order navigation");
navigationRow.append(
createNavigationControl("previous", navigation.previous),
createNavigationControl("next", navigation.next)
);
body.appendChild(navigationRow);
} catch (error) {
console.warn("Tool navigation could not be loaded.", error);
console.warn("Tool display mode registry metadata could not be loaded.", error);
}
}

renderToolNavigation();
applyRegistryDisplayData();

async function enterToolMode() {
document.body.classList.add("tool-focus-mode");
Expand Down Expand Up @@ -317,7 +259,6 @@
});

refreshVerticalAccordionChevrons();
updateToolDisplayModeChevron();

document.querySelectorAll(".tool-workspace").forEach(function (workspace) {
const columns = workspace.querySelectorAll(":scope > .tool-column");
Expand Down
20 changes: 20 additions & 0 deletions ...reports/PR_26179_ALFA_010-tool-display-single-line-summary_branch-validation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# PR_26179_ALFA_010-tool-display-single-line-summary Branch Validation

## Result

PASS

## Checks

| Check | Result | Notes |
| --- | --- | --- |
| Start branch was `main` | PASS | Verified before branch creation. |
| `main...origin/main` was `0 0` | PASS | Verified before branch creation. |
| PR branch created from `main` | PASS | `PR_26179_ALFA_010-tool-display-single-line-summary`. |
| Work stayed on PR branch during implementation | PASS | No commits to `main`. |
| Old `docs_build/` paths avoided | PASS | Reports generated under `dev/reports/`. |
| Old `tmp/` ZIP path avoided | PASS | Outcome ZIP path: `dev/workspace/zips/PR_26179_ALFA_010-tool-display-single-line-summary_delta.zip`. |

## Branch

`PR_26179_ALFA_010-tool-display-single-line-summary`
29 changes: 29 additions & 0 deletions ...s/PR_26179_ALFA_010-tool-display-single-line-summary_manual-validation-notes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# PR_26179_ALFA_010-tool-display-single-line-summary Manual Validation Notes

## Product Owner Checks

1. Open `/toolbox/game-design/index.html`.
2. Confirm the Tool Display Mode bar shows one direct line:
- badge
- Game Design name
- character image
- fullscreen icon on the far right
3. Confirm the old chevron, identity body, and Previous/Next navigation row are absent.
4. Click the fullscreen icon.
5. Confirm the icon changes to exit-fullscreen.
6. Confirm the badge remains 64x64 in fullscreen mode.
7. Confirm the character image is hidden in fullscreen mode.
8. Click the exit icon and confirm the normal view returns.

## Adjacent Checks

1. Open representative tools:
- `/toolbox/game-hub/index.html`
- `/toolbox/game-configuration/index.html`
- `/toolbox/build-game/index.html`
2. Confirm each Tool Display Mode bar uses the registry-owned tool name, badge, and character image.
3. Confirm no visible Tool Display Mode Previous/Next controls appear.

## Notes

PR #198 remains historical validation input only. Its useful validation intent is represented by the current targeted Playwright coverage in this PR.
Loading
Loading