When an off-canvas section has multiple items within a list, it quickly becomes hard to differentiate between different items. This is because there is no difference in vertical space between two lines of the same item and two different items.
For example:
This is noticeable for anyone who has items whose titles are so long that they wrap to the next line. Opening the off-canvas should be enough to reproduce the issue.
I propose we add a small amount of vertical padding to items, along with a subtle bottom border.
For example:
| Comment | File | Size | Author |
|---|---|---|---|
| #6 | Screenshot 2021-04-09 at 17.32.26.png | 37.05 KB | gauravvvv |
| #3 | 3207680-3.patch | 3.5 KB | longwave |
| #2 | 3207680-off-canvas-list-styling.patch | 1.14 KB | maskedjellybean |
| Screen Shot 2021-04-07 at 10.47.31 AM.png | 72.45 KB | maskedjellybean | |
| Screen Shot 2021-04-07 at 10.29.46 AM.png | 65.13 KB | maskedjellybean |
Comments
Comment #2
maskedjellybeanI doubt that I've generated this patch correctly, but these are the changes I made to generate the screenshot you see under proposed resolution.
Comment #3
longwaveThanks for the patch! I agree that this does look better than before and makes the items visually distinctive.
You need to edit the .pcss.css files and then compile these to CSS with
yarn build:css, I've moved your changes to the .pcss.css files in this patch. I've also rerolled this against 9.2.x as any changes will need to go into the latest version first.Comment #4
maskedjellybeanThanks for making a correct patch @longwave!
I'm curious, do these .pcss.css files exist in 8.9.x or is this new for 9.x? Strangely I don't see them in my D8 install. I understand I should be working with D9 these days, but I'm just trying to understand.
Comment #5
longwaveAah, sorry - I forgot that in 8.9.x we only use PostCSS for Claro, we only started using it for the off-canvas CSS in 9.1.x.
Comment #6
gauravvvv commentedPatch #3, seems fine to me. Adding an after-patch screenshot for reference.
Moving to RTBC.
Comment #7
gauravvvv commentedComment #8
lauriiiComment #9
lauriiiThis is very nice self-contained improvement!
Committed 5deea4f and pushed to 9.2.x. Thanks!