question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Collapse text in long add-on reviews

See original GitHub issue

Describe 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

screenshot_2018-09-13 sound control add-ons for firefox

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:closed
  • Created 5 years ago
  • Comments:11 (8 by maintainers)

github_iconTop GitHub Comments

2reactions
seanprashadcommented, Nov 23, 2018

@biskit1 To make sure you’re not wasting any time Chaya, this is still (unfortunately) reproducible 😓:

6242-reproducable-nov-23-2018

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 a body 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!! ✌🏽

2reactions
kumar303commented, Oct 31, 2018

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found