Skip to content

Commit 8bbb617

Browse files
author
DavidQ
committed
Restore the remaining samples index UI capabilities without redesigning the page shell.
Bring back all filter dropdowns, pinned list behavior, pin affordance, preview images, image-launch links, and hover zoom on /samples/index.html. PR: BUILD_PR_STYLE_SAMPLES_INDEX_UI_BEHAVIOR_RESTORE
1 parent 57f16ab commit 8bbb617

7 files changed

Lines changed: 445 additions & 176 deletions

File tree

‎docs/dev/reports/samples_index_ui_behavior_restore_strategy.txt‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
Samples index UI behavior restore strategy
2+
3+
Keep:
4+
- current page shell
5+
- current header/body consistency
6+
- current overall render structure
7+
8+
Restore only:
9+
- full filter set
10+
- pinned list
11+
- pin affordance
12+
- preview image rendering
13+
- preview-image-as-launch-link behavior
14+
- hover zoom behavior
15+
16+
This is a capability restore, not a redesign.

‎docs/operations/dev/codex_commands.md‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,27 @@ MODEL: GPT-5.4-codex
22
REASONING: high
33

44
COMMAND:
5-
Create BUILD_PR_STYLE_SAMPLES_INDEX_DATA_DRIVEN_LIST_RESTORE
5+
Create BUILD_PR_STYLE_SAMPLES_INDEX_UI_BEHAVIOR_RESTORE
66

77
Rules:
88
- output ONLY the final zip to:
9-
<project folder>/tmp/BUILD_PR_STYLE_SAMPLES_INDEX_DATA_DRIVEN_LIST_RESTORE.zip
9+
<project folder>/tmp/BUILD_PR_STYLE_SAMPLES_INDEX_UI_BEHAVIOR_RESTORE.zip
1010
- do NOT create staging folders in <project folder>/tmp
1111
- do NOT modify roadmap in the PR bundle
1212
- Codex updates roadmap during execution only if execution-backed status changes are earned
1313
- no embedded <style> blocks
1414
- no inline style=""
1515
- no JS-generated styling
16-
- keep scope limited to /samples/index.html and directly related sample-index data/rendering dependencies
16+
- keep scope limited to /samples/index.html and directly related sample-index UI/data/rendering dependencies
17+
- preserve the current accepted page shell
1718

1819
Required work:
19-
1. Identify the real samples index data source and render path.
20-
2. Remove any simplified phase-to-xx01 fallback rendering that is causing the wrong output.
21-
3. Restore phase descriptions.
22-
4. Restore all sample entries within each phase.
23-
5. Restore per-sample details sourced from the sample list data.
24-
6. Restore sample pinning behavior.
25-
7. Preserve filter behavior.
26-
8. Preserve the shared header/body consistency work.
20+
1. Restore all intended sample filter dropdowns on /samples/index.html, including phase, class, and the remaining third filter.
21+
2. Restore functioning filter behavior.
22+
3. Restore the pin affordance as a pin, not a button.
23+
4. Restore the pinned list/section and its behavior.
24+
5. Restore preview image rendering from the correct sample metadata.
25+
6. Make the preview image the launch <a> target.
26+
7. Restore hover zoom behavior on the preview image.
27+
8. Keep the page shell and shared header/body consistency intact.
2728
9. Keep the change narrow, testable, and behavior-restoring rather than redesigning.

‎docs/operations/dev/commit_comment.txt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
Restore the real data-driven samples index rendering.
1+
Restore the remaining samples index UI capabilities without redesigning the page shell.
22

3-
Bring back phase descriptions, full per-phase sample lists, per-sample details, and sample pinning behavior on /samples/index.html while preserving the shared style/header consistency work.
3+
Bring back all filter dropdowns, pinned list behavior, pin affordance, preview images, image-launch links, and hover zoom on /samples/index.html.
44

5-
PR: BUILD_PR_STYLE_SAMPLES_INDEX_DATA_DRIVEN_LIST_RESTORE
5+
PR: BUILD_PR_STYLE_SAMPLES_INDEX_UI_BEHAVIOR_RESTORE

‎docs/pr/BUILD_PR_STYLE_SAMPLES_INDEX_UI_BEHAVIOR_RESTORE.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# BUILD_PR_STYLE_SAMPLES_INDEX_UI_BEHAVIOR_RESTORE
2+
3+
## Purpose
4+
Restore the remaining samples index UI behavior without changing the current page shell or styling structure.
5+
6+
## Single PR Purpose
7+
Fix the remaining `/samples/index.html` behavior regressions:
8+
- restore all sample-filter dropdowns
9+
- restore the pinned list
10+
- change the tile pin affordance back to a pin, not a button
11+
- restore preview images
12+
- make the preview image the launch link
13+
- add hover zoom on the preview image
14+
15+
## Confirmed Current State
16+
The page shell is acceptable and should be kept.
17+
Remaining problems are behavior/data/UI details:
18+
- filter bar is showing
19+
- dropdowns are not all showing/working
20+
- pin is showing as a button instead of a pin
21+
- pinned list is not showing
22+
- preview image is missing
23+
- preview image should be the `<a>` launch target
24+
- preview image should zoom on hover
25+
26+
## Required Fix Direction
27+
1. Keep the current page rendering shell.
28+
2. Restore the original intended samples index UI capabilities only.
29+
3. Do not redesign the page.
30+
4. Do not restyle the entire page.
31+
5. Reconnect the current shell to the correct data/UI behaviors.
32+
33+
## Required Behavior To Restore
34+
### Filters
35+
Restore all sample filter controls, including:
36+
- phase
37+
- class
38+
- the remaining third filter currently missing from the restored page
39+
40+
The filter UI must both render and function.
41+
42+
### Pinning
43+
Restore pinning behavior so that:
44+
- the tile affordance is a pin, not a generic button
45+
- the pinned list/section is visible again
46+
- pinned state is reflected correctly in the UI
47+
- pinning behavior works from the tile UI
48+
49+
### Preview Image
50+
Restore preview image behavior so that:
51+
- each sample tile shows the correct preview image
52+
- the preview image is wrapped by the launch `<a>`
53+
- clicking the preview image launches the sample
54+
- the preview image has zoom-on-hover behavior
55+
- this is implemented through shared CSS/markup behavior, not inline styling
56+
57+
## Required Rules
58+
- no embedded `<style>` blocks
59+
- no inline `style=""`
60+
- no JS-generated styling
61+
- keep scope limited to `/samples/index.html` and directly related sample-index UI/data/rendering dependencies
62+
- preserve the current accepted page shell
63+
- restore capability, not redesign
64+
65+
## Likely Root Causes To Check
66+
- incomplete filter metadata wiring
67+
- missing filter render path for class/third filter
68+
- pinned-list render path disconnected
69+
- pin UI simplified during restore
70+
- preview image field not mapped from sample metadata
71+
- image anchor wrapper removed
72+
- hover-zoom class/markup no longer applied
73+
- current template only partially restores the original tile model
74+
75+
## Acceptance
76+
- `/samples/index.html` shows all intended filter dropdowns
77+
- filters function correctly
78+
- tile pin is shown as a pin, not a button
79+
- pinned list is visible and working
80+
- sample preview images render correctly
81+
- preview image is the launch link
82+
- preview image zooms on hover
83+
- current page shell and header/body consistency remain intact
84+
- change is visually and functionally testable

‎samples/index.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
.samples-filter-grid {
2+
display: grid;
3+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
4+
gap: 12px;
5+
}
6+
7+
.samples-filter-field {
8+
display: flex;
9+
flex-direction: column;
10+
gap: 6px;
11+
}
12+
13+
.samples-filter-search {
14+
grid-column: 1 / -1;
15+
}
16+
17+
.sample-card {
18+
overflow: hidden;
19+
}
20+
21+
.sample-preview-link {
22+
display: block;
23+
border-radius: 10px;
24+
overflow: hidden;
25+
border: 1px solid var(--line, rgba(221, 214, 254, 0.26));
26+
margin-bottom: 10px;
27+
}
28+
29+
.sample-thumb {
30+
display: block;
31+
width: 100%;
32+
height: auto;
33+
transform: scale(1);
34+
transform-origin: center;
35+
transition: transform 120ms ease;
36+
}
37+
38+
.sample-preview-link:hover .sample-thumb,
39+
.sample-preview-link:focus-visible .sample-thumb {
40+
transform: scale(1.05);
41+
}
42+
43+
.sample-preview-missing {
44+
padding: 16px;
45+
text-align: center;
46+
color: var(--muted, #e9ddff);
47+
text-decoration: none;
48+
}
49+
50+
.sample-title-link {
51+
color: var(--accent, #ddd6fe);
52+
text-decoration: none;
53+
}
54+
55+
.sample-title-link:hover,
56+
.sample-title-link:focus-visible {
57+
text-decoration: underline;
58+
}
59+
60+
.sample-pin-row {
61+
display: flex;
62+
justify-content: flex-end;
63+
}
64+
65+
.sample-pin-toggle {
66+
position: absolute;
67+
opacity: 0;
68+
pointer-events: none;
69+
}
70+
71+
.sample-pin-label {
72+
display: inline-flex;
73+
align-items: center;
74+
justify-content: center;
75+
min-width: 32px;
76+
min-height: 32px;
77+
border-radius: 999px;
78+
border: 1px solid var(--line, rgba(221, 214, 254, 0.26));
79+
cursor: pointer;
80+
user-select: none;
81+
}
82+
83+
.sample-pin-toggle:checked + .sample-pin-label {
84+
background: rgba(167, 139, 250, 0.34);
85+
border-color: var(--card-hover-border, #c4b5fd);
86+
}

‎samples/index.html‎

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<title>Samples - HTML JavaScript Gaming</title>
1313
<link rel="stylesheet" href="../src/engine/theme/main.css" />
1414
<link rel="stylesheet" href="../src/engine/ui/hubCommon.css" />
15+
<link rel="stylesheet" href="./index.css" />
1516
</head>
1617
<body class="hub-page-samples">
1718
<details class="is-collapsible" open>
@@ -33,14 +34,39 @@ <h1>Samples Hub</h1>
3334
<main class="page-shell">
3435
<section class="content-section">
3536
<h2>Filter Samples</h2>
36-
<p>Filter by phase, sample id, title, description, or tags.</p>
37-
<label for="samples-phase-filter-input">Search</label>
38-
<input id="samples-phase-filter-input" type="text" placeholder="Phase 17, rendering, runtime..." autocomplete="off" />
39-
<label for="samples-phase-filter-pinned-only">Pinned only</label>
40-
<input id="samples-phase-filter-pinned-only" type="checkbox" />
37+
<p>Filter by phase, engine class, tag, or free-text search.</p>
38+
<div class="samples-filter-grid">
39+
<div class="samples-filter-field">
40+
<label for="samples-filter-phase">Phase</label>
41+
<select id="samples-filter-phase">
42+
<option value="">All phases</option>
43+
</select>
44+
</div>
45+
<div class="samples-filter-field">
46+
<label for="samples-filter-class">Class</label>
47+
<select id="samples-filter-class">
48+
<option value="">All classes</option>
49+
</select>
50+
</div>
51+
<div class="samples-filter-field">
52+
<label for="samples-filter-tag">Tag</label>
53+
<select id="samples-filter-tag">
54+
<option value="">All tags</option>
55+
</select>
56+
</div>
57+
<div class="samples-filter-field samples-filter-search">
58+
<label for="samples-phase-filter-input">Search</label>
59+
<input id="samples-phase-filter-input" type="text" placeholder="Phase 17, rendering, runtime..." autocomplete="off" />
60+
</div>
61+
</div>
4162
<p id="samples-phase-filter-status" aria-live="polite"></p>
4263
</section>
4364

65+
<section class="content-section">
66+
<h2>Pinned Samples</h2>
67+
<div id="samples-pinned-list" class="card-grid"></div>
68+
</section>
69+
4470
<section class="content-section">
4571
<h2>All Phases and Samples</h2>
4672
<div id="samples-phase-list"></div>

0 commit comments

Comments
 (0)