Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
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:
Steps to reproduce
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.
Proposed resolution
I propose we add a small amount of vertical padding to items, along with a subtle bottom border.
For example:
Remaining tasks
User interface changes
API changes
Data model changes
Release notes snippet
| 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 CreditAttribution: Gauravvvv at OpenSense Labs commentedPatch #3, seems fine to me. Adding an after-patch screenshot for reference.
Moving to RTBC.
Comment #7
Gauravvvv CreditAttribution: Gauravvvv at OpenSense Labs commentedComment #8
lauriiiComment #9
lauriiiThis is very nice self-contained improvement!
Committed 5deea4f and pushed to 9.2.x. Thanks!