timescale.info#430 · A long description folds to its first lines, with Read more
- timeline-app
- pull request
Closes #424. Long timeline descriptions pushed the timeline itself down the page. For example, the Game of Thrones comparison's description runs to several sections. **Behaviour** - **Folded by default:** under the title, a description shows at most five lines (`max-height: 8.5em`) and fades out at the bottom when there's more. - **Read more / Show less:** **Read more…** unfolds the description; **Show less** folds it again. The button's `aria-expanded` and `aria-controls` point at the description. - **Short descriptions** show whole, with no button. - **Each timeline opens folded**, whether it's a server timeline, an import or a comparison. - **Resizing:** a change of width re-checks whether the button is needed. - **Editors:** clicking the description to edit its source works as before. While editing, the button is hidden. - **Embeds** hide the button along with the description. **Interaction with #429:** the folding is CSS by default (`.description-view:not(.expanded)`), so a description that #429 has the server fill in arrives folded as well. **Tests:** `test/description-markdown-browser.mjs` covers: - a long description folds to under 160 px; - Read more unfolds it to more than twice that height; - Show less restores the folded height; - the next timeline opens folded; - a short description has no button. The browser suite passes in Chromium and WebKit, both run in the Playwright 1.58.2 image. Firefox passed on a second run. The first Firefox run timed out in the existing plugin hover-card test (`plugins-browser.mjs:133`, a click on a card that was still moving), which runs before this test and doesn't touch the description.
Sources
Open #430 · A long description folds to its first lines, with Read more in the timeline