Collapse text in long add-on reviews
See original GitHub issueDescribe the problem and steps to reproduce it:
- Write a really long add-on review
- As a developer of the same add-on, reply to that review with a really long response
What happened?
It looks pretty bad on the detail page:
Full page screenshot
What did you expect to happen?
The text should be collapsed with a Read more link
Anything else we should know?
This also looks pretty bad on the review listing pages.
We should be able to use ShowMoreCard
for this.
Issue Analytics
- State:
- Created 5 years ago
- Comments:11 (8 by maintainers)
Top Results From Across the Web
Reviews for QuoteCollapse - Thunderbird Add-ons
It's annoying that it collapses all quotes completely - it should be tunable for context. But it's better than nothing particularly in long...
Read more >Collapsible Fields - AnkiWeb
Adds a little arrow on top of your fields, which allows you to collapse them. Works in the Current Card Editor, Browser, and...
Read more >Reveal | Expand | Toggle content section in Elementor page ...
Do you have long web content and want to hide some smart way in ... Got highest ranking in Kasa reviews for best...
Read more >How to add an expand/collapse text section without a plug-in
It's usually done using HTML, CSS and JS. I'll explain how you can make a text expander.
Read more >Collapse / Expand long text inside Block Editor - Toolset
This will generally require some Custom HTML as Toolset has no accordion or modal blocks. However, maybe a small addon could do? https:// ......
Read more >
Top Related Medium Post
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@biskit1 To make sure you’re not wasting any time Chaya, this is still (unfortunately) reproducible 😓:
Finding the problematic code
I know you still have more assignments to do so I did some digging using the React developer tools for FF and found the code that renders a users’ review:
https://github.com/mozilla/addons-frontend/blob/46153975233548acd64239dad5c5b39ede3e71a8/src/amo/components/AddonReviewCard/index.js#L472-L478
Notice the
review
prop? It has abody
field which contains the text a reviewer writes:https://github.com/mozilla/addons-frontend/blob/46153975233548acd64239dad5c5b39ede3e71a8/src/ui/components/UserReview/index.js#L101
Finding a solution
Over in the
ShowMoreCard
, it looks like the contents of the card (aka. we want this to be the user review from{body}
above) is found here:https://github.com/mozilla/addons-frontend/blob/f71a19331ba96d409ea4d91b0f89a65a383198c9/src/ui/components/ShowMoreCard/index.js#L149-L154
Ok, this is good - I think we have found most of the puzzle pieces to begin swapping out some code 😺
I always like reading what’s in the existing codebase as it gives a ton of hints on what the devs have done. For instance, how in the world would you or I know how to use the
ShowMoreCard
component? Well, we can see how it’s being used currently for starters:https://github.com/mozilla/addons-frontend/blob/46153975233548acd64239dad5c5b39ede3e71a8/src/amo/pages/Addon/index.js#L344-L352
I hope this helps to get you going!! ✌🏽
Hi @biskit1 – let me know if you have any questions. I know you’ve already landed a few patches (thanks!) so you probably have things set up.