Design updates

[marcellamaki]

Summary

Addresses many design related updates in #8563 to-dos and comments

Topics Page

• Header - title alignment, better truncation, and overall spacing.
• Header - add text truncation for description
• Add header for folder topic above topic links
• investigate and potentially fix breadcrumbs - some of the ordering seems incorrect (have not been able to replicate - may need more investigation)
• Fix "squished" view on limited search results
• Remove thumbnail outline on topic thumbnail in header

Library page

• Fix "squished" view on limited search results
• Fix text overflow caused by shrinking page and long title
• search: card spacing, and ensure toggle list/grid is visible

Classes page

• remove 'Library' breadcrumbs

Search panel

• Clear an activity or category by clicking on an active button
• Fix spacing on side bar to ensure scroll to the bottom of the panel works, even on a limited folder list in the main content [ETA: this is actually because Marcella is so used to seeing the dev view, and it was not actually broken]
• Activity buttons should appear on mobile

Cards

• double-digit coach count overflows side of card

Feedback from @pcenov

1. "Clear all" - fixed in a previous PR
2. Side panel freeze captured in separate issue Fix issue with info panel freezing, not closing #8611
3. Redundant navigation - fixed in previous PR
4. Symbol.iterator - fixed in previous PR
5. Channel card alignment - addressed
6. 0 locations link - To do

Feedback from @jtamiace

1. Update channel card breakpoints on medium screens - addressed
2. Update number of columns for ultra-wide screens and set left-aligned max width - addressed
3. Library breadcrumbs removed (classes tab updates TBD -- not quite there yet)
4. Adjust margins on cards - addressed
5. Extend title truncation to 5 lines - addressed
6. fix search chips alignment - addressed

For the purpose of keeping things moving and not making giant PRs, there are a few additional updates, including on card layout, bookmarks, and the search side panel that will be addressed in separately.

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[jtamiace]

Since we decided to put the current folder at the very top of the page instead of the channel, the second title near the resources has become redundant. Didn't catch that earlier as something to also change in the original spec. Would you be able to remove it?

[marcellamaki]

For sure!

[pcenov]

Hi @marcellamaki I was just wondering are all the items listed with checkboxes ready for testing? Just let me know if so, thanks! :)
Also I checked the list with feedback from me and noticed that point 6. '0 locations link - removed' is actually still visible in this build: https://buildkite.com/learningequality/kolibri-python-package/builds/4088 so I'm not sure whether it's been removed in a separate PR or missed in this one. :)

[marcellamaki]

Hi @pcenov - thank you for your question! Apologies for not actually indicating which are ready to test. Everything that is checked now is ready for review, and I've updated the question about the links. Thank you for your careful eye on everything! So appreciated

[rtibbles]

Code and manual QA checks out.

[pcenov]

@marcellamaki I tested the following points and things are looking much better, did not uncover any new issues:
Topics Page

• Header - title alignment, better truncation, and overall spacing.
• Header - add text truncation for description
• Add header for folder topic above topic links
• investigate and potentially fix breadcrumbs - some of the ordering seems incorrect (have not been able to replicate - may need more investigation)
• Fix "squished" view on limited search results
• Remove thumbnail outline on topic thumbnail in header

Library page

• Fix "squished" view on limited search results
• Fix text overflow caused by shrinking page and long title
• search: card spacing, and ensure toggle list/grid is visible

Classes page

• remove 'Library' breadcrumbs

Search panel

• Clear an activity or category by clicking on an active button