Krinkle
commented
1 week ago @IgnaceMaes I'd value your feedback on this, as author of qunit-theme-ember! For this PR, I'm focussing on the structure and layout.
After this, I'm also interested in giving QUnit a new paint job for the QUnit 3.0 release. Possibly similar to qunit-theme-ember, or perhaps based on the colors of https://qunitjs.com. Thoughts, questions, concerns, and ideas are most welcome!
This may be a breaking change for themes that rely on the default HTML as created by a
<div id="qunit">element. The changes are fairly small but they could break certain theme layouts. If you prefer the old structure, replace<div id="qunit">with the following instead:Notable changes:
(Design) Test execution is now animated with a progress bar in the qunit-banner.
(Design) Edge to edge design. Remove body margin (browser default), remove rounded corners.
(Design) Adopt
system-uifonts, remove any text shadows(Design) Sticky element is now reduced to just the toolbar. Now implemented with
position: sticky;. This means we now have a normal page-level scrollbar instead of a scrollable area. The rest of the page naturally flows under it. This fixes various layout quirks, with extra elements no longer squished or pushed outside the viewport. This is similar to how things rendered prior to QUnit 2.14, and fixes https://github.com/qunitjs/qunit/issues/1603 (ping @smcclure15).The sticky header excludes the page title and user agent, making more optimal use of vertical space.
(Design) Move "Abort" button to the left. And make sure the toolbar display occupies the same height during the "running" and "completed" state, to avoid a visible layout shift.
(Design) Remove 2px offset hack from checkboxes to make them vertically aligned.
#qunit-userAgentis now DIV rather than H2, and placed above#qunit-testrunner-toolbarinstead of below it.#qunit-banner,#qunit-testresult,#qunit-filteredTestare now inside#qunit-toolbar.The
#qunit-modulefilter-actionselement is now ordered in a more natural way. Previously, the order was reversed in HTML, with the default theme usingfloat: rightto re-order them.To achieve right-aligned buttons like before, one could set
text-align: righton.qunit-modulefilter-actions.The
.qunit-skipped-labeland.qunit-todo-labelelements are inserted before a TODO/SKIP test title. These now include a space in the HTML between the label and the test title.This means the word "skipped" and the first word of the test title no longer get presented semantically as one word with intra-word styling (e.g. to a screen reader, or when copying selected text). This also removes the need for margin-right hack in the theme.
Fixes https://github.com/qunitjs/qunit/issues/1603.
At small screens / tiny embedded demo on the homepage: