josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Glass Stage: float the section rail again, centred above the mini player

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-04 02:17:48 +08:00
parent 528e7c1ea1
commit 25ae810463
5 changed files with 48 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
tests/glass-panel.spec.js
View File

@@ -20,42 +20,7 @@ async function setup(page, width, layout = 'glass-stage') {
}, layout);
await page.evaluate(async () => { await document.fonts.ready; await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r))); });
}
for (const width of [390, 1440]) test(`panel rail and bottom clearance at ${width}`, async ({ page }, info) => {
await setup(page, width);
// The desktop rail was hidden in the old build; expose it for baseline evidence.
if (before && width === 1440) await page.addStyleTag({ content: 'html[data-layout="glass-stage"] #sectionRail{display:flex!important}' });
for (const section of ['player', 'meta', 'notes', 'related', 'list']) {
await page.locator(`#sectionRail [data-sec="${section}"]`).click();
await page.evaluate(() => { document.getElementById('miniBar').classList.remove('hidden'); updateBottomChrome(); });
await page.waitForTimeout(100);
if (!before) {
const metrics = await page.evaluate(() => {
const rail = document.getElementById('sectionRail'), header = document.querySelector('#listPane .list-header');
const r = rail.getBoundingClientRect(), h = header.getBoundingClientRect();
const m = document.getElementById('miniBar').getBoundingClientRect(), p = document.getElementById('miniProgress').getBoundingClientRect(), nav = document.getElementById('bottomNav').getBoundingClientRect();
return { parent: rail.parentElement.id, railBottom: r.bottom, headingTop: h.top, miniBottom: m.bottom, progressBottom: p.bottom, navTop: nav.height ? nav.top : innerHeight, overflow: getComputedStyle(document.getElementById('miniBar')).overflow };
});
expect(metrics.parent).toBe('listPane');
expect(metrics.railBottom).toBeLessThanOrEqual(metrics.headingTop);
expect(metrics.miniBottom).toBeLessThanOrEqual(metrics.navTop);
expect(metrics.progressBottom).toBeLessThanOrEqual(metrics.miniBottom);
expect(metrics.overflow).toBe('hidden');
}
await page.screenshot({ path: `/tmp/done9-${before ? 'before' : 'after'}-${info.project.name}-${width}-${section}.png` });
}
if (!before) {
await page.evaluate(() => {
const body = document.querySelector('.body'); body.scrollTop = body.scrollHeight;
const cards = document.getElementById('cards'); cards.scrollTop = cards.scrollHeight;
document.getElementById('miniBar').classList.remove('hidden'); updateBottomChrome();
});
await page.waitForTimeout(100);
const tail = await page.locator('#cards .card').last().boundingBox(), mini = await page.locator('#miniBar').boundingBox();
expect(tail.y + tail.height).toBeLessThanOrEqual(mini.y - 8);
}
});
module.exports = { setup };
// The rail-in-panel test was removed: the Glass rail floats again (see glass-rail-float.spec.js).
for (const width of [390, 1440]) test(`Classic panel layout unchanged at ${width}`, async ({ page, context }, info) => {
const baseline = await context.newPage();
await baseline.route('**/theme-glass-panel.css', r => r.fulfill({ contentType: 'text/css', body: '' }));