Give the card's first line back to the note - #301
Merged
Merged
Conversation
The marks share the title's row instead of having a band of their own, the tick joins them in the flow, and the two actions move to a pill under the card's bottom edge. The body gets the line, four snippet lines to five.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #250. First of the three card tickets — #182 fills the ⋯ menu this moves, #184 animates what this draws.
The card opened with a
.card-headband carrying the pin, the format badge, the fields mark and the attachment count, then the title below it. That band cost a line of a card that is a fixed 150px, and it said nothing about the note that the marks themselves do not.One row now holds the tick, the title and the marks. The title takes the room and gives way to the marks (
flex: 1plusmin-width: 0, without which a long title pushes them off the card instead of clamping). The body got the line back:SNIPPET_LINESwent from four to five.The decision the ticket did not settle
The Shape asks for the marks at the top right and says "the tick keeps its own corner". Those two cannot both be the floating pill: it hangs at
top: -9px, its bottom lands at about +15px, and the title row starts at--space-card— 14px comfortable, 10px compact. Anything floating in that corner sits on top of the marks.So the tick moved into the flow, at the head of the row. It is the card's top-left corner, it collides with nothing, and it is always drawn — quiet at rest, amber once ticked.⚠️ That is a visible change on every card: the tick used to appear only on hover or when checked. I think it is the right side of the trade (a selection affordance nobody sees is one nobody uses, and it is what makes #248's band discoverable), but it is the part of this PR I would most expect you to push back on.
The two actions — copy or ⚡, and the ⋯ — keep their pill, mirrored to the card's bottom-right edge, on hover and on focus. Outside rather than in the flow, so they still cost the card no room.
Two smaller ones
MAX_VISIBLE_ITEMSdeliberately did not move, although the ticket names it. A todo list with nothing to mark never drew that band, so it gave nothing up — and 21px recovered is less than the 24px a row needs now that every row clears the hit target. A third row would be clipped..card-arming— the red "Suppr. à nouveau" band — keeps the footer line inside the card, and the pill now hangs 9px under it. The pill stands down while the card is asking: a copy button and a ⋯ beside "delete again?" are noise, and:focus-withinkeeps the keyboard's way in.04-trash-and-undoreads the computed opacity for that.What the tests had to learn
02-note-lifecyclemeasuredtitleWidth === snippetWidth, which is no longer true by design — the marks take part of that row. It now measures what replaced it: the row starts at the card's edge, the marks end at its right, nothing sits above the row, and the body starts immediately under it.canvas.badgeBoxeslooked for.card-headto check the badge's hairline is not cut by the band holding it. Same invariant, new box:.card-marks.1429 front-end tests and the full e2e suite green locally — 21/21. Screenshots of the canvas, the board, the hover pill and a card inside a zone were read before calling it done; the first run of the suite caught both assertions above.