New layout for topic page(/browse) #8568
Open
Conversation
This file contains 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
Currently there are not H2 elements in that page(besides the footer), so we jump from H1 to H3, which could be confusing for assistive devices.
On mobile the text has no padding on the sides because of the negative margin it inherits from @include grid-row($behavior: nest);
- Added a card layout, with max-height, this prevents cards with a long list to use more vertical space than needed. - The list inside each card will be vertically scrollable if the list uses more space than the max-height set. - Added number of coincidences for each heading, so it's more clear when a card has long list. - Made the scrollbar visible all the time so it's more clear that some cards are vertically scrollable.
lucascumsille
force-pushed
the
8445-list-view
branch
from
ef40807 to
fb55d61
Compare
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.
Relevant issue(s)
Fixes part of: #8445 (comment)
What does this do?
Tidy up the list views in
/browsepage. With this PR we make sure that headings with many items don't use a lot of vertical space.Implementation notes
I thought about making accordions items instead of cards, but I wasn't really fond of the idea because:
To prevent the above we could include a checkbox that expands all the accordions in the page, and also allow them to open/close each item one by one. But not sure if this would be overcomplicating the problem.
Screenshots
Desktop view
Screen.Recording.2025-02-06.at.11.52.39.mov
Mobile view
Screen.Recording.2025-02-06.at.11.53.17.mov
Notes to reviewer
Have you updated the changelog? If this is not necessary, put square brackets around this: skip changelog