Hybrid Learning Library, Topics pages -- design alignment follow up to-dos

[marcellamaki]

Topics Page

• Header - title alignment, better truncation, and overall spacing.
• Header - add text truncation for description
• Remove "channels" breadcrumb
• Add "active" styles for folders and search tab
• Add "show more" option below trimmed channel resources
• Add "end folder view"
• Add header for folder topic above topic links
• update footer: add progress, remove "more options" footer icon
• Remove breadcrumbs for search
• investigate and potentially fix breadcrumbs - some of the ordering seems incorrect
• Fix "squished" view on limited search results
• Remove thumbnail outline on topic thumbnail in header

Library page

• change colors, and background color to tokens
• Fix mobile card view that sometimes shows up as a grid with toggle, when should just be single card
• 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
• remove list/grid toggle if no content cards displayed

Classes page

• remove 'Library' breadcrumbs

Bookmarks page

• Card: Add text truncation to manage long description overflow and spacing issues

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
• Fix label ordering and alignment

[pcenov]

Hi @marcellamaki, posting here some additional issues spotted after testing this 0.15 build so that you can sift through them and maybe disregard or create follow up to-dos:

Major issues:

1. Library - Clear all is not functioning now - clicking on it results in a TypeError: Cannot convert undefined or null to object

2. Browse channel: clicking the 'i' icon results in a error that freezes the entire browser page - TypeError: Cannot read properties of undefined (reading ‘id’)
   Library/Recent: 0 locations link???

Minor issues:

1. Console error - Selecting any of the filtering options causes the following error in the console: Uncaught (in promise) Error: Avoided redundant navigation to current location: "/library".

2. Browse channel console error: Errors in the console such as: TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a Symbol.iterator method.

3. Library: Channel cards are misaligned in responsive design view.

4. Library/Recent: 0 locations link

5. Bookmarks link displayed in 'Manage resources' for a lesson looks like a work in progress and I'm not sure it it is a known issue:

[jtamiace]

In a channel, within the level 3 breakpoint, probably better to display 3 cards per row instead of 4

---

The number of cards that show per row in "Recent" and the cross-channel search results should be consistent with the cards within a channel. Right now it shows 3 per row even at the widest browser width

---

Sorry if this is already resolved somewhere else and/or we're not quite ready to do this yet (slack thread), but the "Classes" tab and "Library" action should be removed

---

Cards within a channel shouldn't have the channel thumbnail show in the top right corner. Also have some notes to make more room on the cards for longer titles

---

"View more" raised secondary button for more visual prominence in the search results

---

At the end level of a folder, we should keep the Folders panel even though it would only have one folder listed ("Install a Solar Panel" in this example).

---

And......... I do not have a solution at the moment but I realize how challenging the mobile experience will be and I will get back on a better experience here