xsl/juzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(h5): center grouped score unit and tighten report summary spacing

Browse Source
This commit is contained in:
xsl
2026-10-13 00:12:02 +08:00
parent 6f83f58a09
commit f1e64565b9
11 changed files with 212 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files
h5/test/report-touch-layout.mjs
+11 -6
View File
@@ -40,14 +40,19 @@ try {
const r = document.querySelector(selector).getBoundingClientRect();
return { x: r.x, y: r.y, width: r.width, height: r.height, bottom: r.bottom };
};
return { dial: rect('.score-dial'), score: rect('#stat-score b'), title: rect('.ring-center .stat-label'),
return { dial: rect('.score-dial'), score: rect('#stat-score'), digits: rect('#stat-score b'), unit: rect('#stat-score i'), title: rect('.ring-center .stat-label'),
ageTitle: rect('.sum-age > .stat-label'), age: rect('#stat-age b'),
careAlign: getComputedStyle(document.querySelector('.card-care .card-heading')).textAlign };
});
assert(Math.abs(layout.score.x + layout.score.width / 2 - layout.dial.x - layout.dial.width / 2) < 1, 'score horizontally centered: ' + width + '/' + score);
assert(Math.abs((layout.title.y + layout.score.bottom) / 2 - layout.dial.y - layout.dial.height / 2) < 1, 'complete label + score stack vertically centered');
assert(layout.title.y > layout.dial.y && layout.score.bottom < layout.dial.bottom, 'both label and score stay inside the circle');
assert(Math.abs(layout.age.y - layout.ageTitle.bottom - 25) < 1, 'age label-to-number gap is exactly 25 CSS px');
assert(Math.abs(layout.unit.x - layout.digits.x - layout.digits.width - 2) < 1, 'score unit follows digits in the same row');
assert(Math.abs(layout.unit.x + layout.unit.width - layout.score.x - layout.score.width) < 1, 'score row includes the unit width');
assert(Math.abs(layout.score.x + layout.score.width / 2 - layout.dial.x - layout.dial.width / 2) < 1, 'score and unit jointly horizontally centered: ' + width + '/' + score);
assert(Math.abs(layout.title.y - layout.score.bottom) < 1, 'score title below the number with zero gap');
assert(Math.abs(layout.title.x + layout.title.width / 2 - layout.score.x - layout.score.width / 2) < 1, 'score title and number share the same horizontal center');
assert(Math.abs((layout.score.y + layout.title.bottom) / 2 - layout.dial.y - layout.dial.height / 2) < 1, 'complete score + label stack vertically centered');
assert(layout.score.y > layout.dial.y && layout.title.bottom < layout.dial.bottom, 'both score and label stay inside the circle');
assert(Math.abs(layout.age.y - layout.ageTitle.bottom) < 1, 'age label-to-number gap is zero');
assert(Math.abs((layout.ageTitle.y + layout.age.bottom) / 2 - layout.dial.y - layout.dial.height / 2) < 1, 'complete age stack vertically centered against the score circle');
assert.equal(layout.careAlign, 'left');
}
assert(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth));
@@ -127,5 +132,5 @@ try {
await page.screenshot({ path: path.join(process.env.H5_ARTIFACT_DIR, 'report-summary.png') });
}
assert.deepEqual(errors, []); assert.deepEqual(writes, []);
console.log('PASS: whole score stack centered inside circle/age gap 25px/care left in five widths; real finger-following three report groups, flick/snap/cancel/vertical/edges/keyboard/zoom/resize/height/ARIA; smaller JPEG hashes/dimensions/MIME; no JS errors/backend writes');
console.log('PASS: whole score stack centered inside circle/gapless age stack vertically centered/care left in five widths; real finger-following three report groups, flick/snap/cancel/vertical/edges/keyboard/zoom/resize/height/ARIA; smaller JPEG hashes/dimensions/MIME; no JS errors/backend writes');
} finally { await browser.close(); }