Rebrand Engage page

[Onibenjo]

Done

• Rebranding engage index page
• Convert view from 3 cloumns to single rows
• Added image thumbnail
• Added fallback image if post does not have image in it
• Displays no result text when search is not found

QA

• Check out this demo
• Ensure topics display correctly
• Ensure images are displayed on desktop and hidden on mobile
• Ensure there's a fallback image (black variant of canonical logo) on some posts
• Ensure clicking the link or thumbnail takes you to the individual engage page
• Ensure you can clear filters
• Ensure that when you search an item that does not exist, it displays a no result text

Issue / Card

Fixes # WD-19863

Screenshots

Before

After

Help

QA steps - Commit guidelines

[webteam-app]

Demo

Jenkins

demos.haus

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 53.38983% with 55 lines in your changes missing coverage. Please review.

Project coverage is 58.23%. Comparing base (121057f) to head (a807480). Report is 68 commits behind head on feat-rebrand-engage.

Files with missing lines	Patch %	Lines
webapp/views.py	10.90%	49 Missing :warning:
webapp/shop/cred/views.py	0.00%	6 Missing :warning:

Additional details and impacted files

@@                   Coverage Diff                   @@
##           feat-rebrand-engage   #15272      +/-   ##
=======================================================
- Coverage                63.05%   58.23%   -4.83%     
=======================================================
  Files                      168       49     -119     
  Lines                    10034     6706    -3328     
  Branches                  1182        0    -1182     
=======================================================
- Hits                      6327     3905    -2422     
+ Misses                    3678     2801     -877     
+ Partials                    29        0      -29     

Files with missing lines	Coverage Δ
tests/cla/test_routes.py	98.85% <100.00%> (+0.48%)	:arrow_up:
webapp/app.py	89.96% <100.00%> (+0.03%)	:arrow_up:
webapp/canonical_cla/views.py	88.78% <100.00%> (+4.69%)	:arrow_up:
webapp/handlers.py	75.86% <ø> (ø)
webapp/shop/cred/views.py	14.31% <0.00%> (-0.06%)	:arrow_down:
webapp/views.py	43.52% <10.90%> (-1.90%)	:arrow_down:

... and 119 files with indirect coverage changes

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Onibenjo]

cc @mattea-turic @eliman11

Can you take a look. Thanks

[mattea-turic]

Thank you for the great work on this @Onibenjo ! :) Feedback below:

Index page:

• [x] I realised there's a discrepancy between the engage pages and blog pages in that the rules between the items are default in the former and muted in the latter. Could we have muted rules between the items for the pages in this bubble? – I updated in the Figma!

• [x] On larger screens, the thumbnails aren't aligned/extending to the end of the rule i.e. – could you update it pls so they do? In the blog pages, they're at 320x180 at a viewport wider than 1680px

• [x] The last thumbnail of the second pageseems to have a different aspect ratio, is there something we could do when the images provided on discourse don't match the 16:9 AR we want e.g. using the fallback image?

• [x] Could the list of items be wrapped in a regulat section, so that there's more space between the last item and the pagination?

• [x] Same for the pagination, if we could add the 4 rem of padding there too

• [ ] The items themselves look good, and this isn't really a visual question, but I wonder why the text in the chip only has the first letter capitalised? So e.g. AI is Ai and IoT is Iot, etc.

• [x] And a small copy issue: The H2 should read as "Ubuntu case studies, whitepapers**,** and webinars. " – i.e. with the oxford comma, rather than "Ubuntu case studies, whitepapers and webinars." cc: @eliman11

• [ ] And I also wanna check with @eliman11 if we wanted to remove the option for Russian, Turkish, and Korean(?), i.e. languages where there are no resources in a given language. I remember there was a conversation around this with Gloria, but can't find the thread now :')

No results page:

• [x] Just another small copy mistake I noticed! Could you use the en-dash (i.e. "–") rather than the em-dash ("—") for after "No results..." in the H4, when there are no results. cc: @eliman11

Individual page:

• [ ] Could these pages have 8 rem bottom padding pls? So wrapping the content in a deep section pls

[Onibenjo]

@mattea-turic

The items themselves look good, and this isn't really a visual question, but I wonder why the text in the chip only has the first letter capitalised? So e.g. AI is Ai and IoT is Iot, etc.

We have the tags with inconsistent capitalizations (i.e, some are lowercase and some have normal cases). I updated the demo link now with how it looks like with the tags.

Making everything uppercase would be a better approach

[eliman11]

Thanks @Onibenjo! @mattea-turic It was on the case studies rebranding file (here) but now that I'm testing the filters on the engage pages, it seems like the language filter isn't working as expected. For example - the first item on the page is Portuguese, but if you filter for Portuguese engage pages, no pages are shown. This bug seems to occur on the live page too.

• [ ] Could you change the padding so its 8px for both the side and bottom of the chip? Pages with chips that wrap seem to have a lot of white space

Other than that, the page is looking really good!