Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved topic cards now show three articles, with new design #6408

Merged
merged 4 commits into from
Jan 15, 2025

Conversation

smithellis
Copy link
Contributor

  • Alter the help_topics macro to support showing three articles
  • Add show more section with sectional line above
  • Add logic to the product_landing view to return docs and counts
  • Styling

Note - right now this just shows three (the first three) documents in a topic. This should be updated to choose most popular or newest pending discussions with Content.

* Alter the help_topics macro to support showing three articles
* Add show more section with sectional line above
* Add logic to the product_landing view to return docs and counts
@smithellis
Copy link
Contributor Author

mozilla/sumo#2042

@smithellis smithellis requested a review from escattone December 17, 2024 20:45
Copy link
Contributor

@escattone escattone left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall, this looks pretty good! I have some suggestions below, and also I'm thinking that the topics grid should collapse to a width of 1 or 2 cards for mobile devices in order to avoid the need for horizontal scrolling (but I'll defer to Josh for that).

kitsune/products/views.py Outdated Show resolved Hide resolved
kitsune/products/views.py Outdated Show resolved Hide resolved
kitsune/sumo/static/sumo/scss/layout/_products.scss Outdated Show resolved Hide resolved
Copy link
Contributor

@escattone escattone left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this needs two more adjustments:

  • I think the topics card grid should be responsive to screen size, so I think we should collapse to 2 columns or 1 column (depending on the device screen size) in order to avoid the need for horizontal scrolling on mobile and other smaller-screen devices.
  • It seems to me that we should delete the Frequent Topics header, which is redundant with the Topics header (see image below).
image

@smithellis
Copy link
Contributor Author

@escattone I spoke with Josh and we are in agreement about simplifying the headers. The scrolling is an issue that I think we have a case for elsewhere - not just for this use case but for other cases that use cards. The idea of stacking the cards makes the horizontal scroll too much, but we definitely could improve the other scrolling options.

@smithellis smithellis requested a review from escattone January 8, 2025 18:59
Copy link
Contributor

@escattone escattone left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, thanks @smithellis!

@smithellis smithellis force-pushed the module-topic-list branch 2 times, most recently from 02ed05b to 47ea107 Compare January 9, 2025 20:46
@smithellis smithellis requested a review from akatsoulas January 14, 2025 14:48
@akatsoulas akatsoulas merged commit d2f0741 into mozilla:main Jan 15, 2025
2 checks passed
escattone added a commit that referenced this pull request Jan 21, 2025
smithellis added a commit to smithellis/kitsune that referenced this pull request Jan 23, 2025
…a#6408)

* Improved topic card now show three top articles
* Alter the help_topics macro to support showing three articles
* Add show more section with sectional line above
* Add logic to the product_landing view to return docs and counts
* A utility function builds the topics_context for the cards
* Fix card scroll for topic cards on mobile
smithellis added a commit to smithellis/kitsune that referenced this pull request Jan 23, 2025
…a#6408)

* Improved topic card now show three top articles
* Alter the help_topics macro to support showing three articles
* Add show more section with sectional line above
* Add logic to the product_landing view to return docs and counts
* A utility function builds the topics_context for the cards
* Fix card scroll for topic cards on mobile
* Topics can only wrap once before being cut off with ellipses
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants