Fixed Read More Button Display Logic to Avoid Unnecessary Display

[CodeMaverick2]

Closes #9329

Description

This PR addresses an issue where the "Read more" button was displayed even when it made the section longer than the fully expanded content. This led to a confusing user experience, as the "Read more" button was not serving its intended purpose. The following changes have been made to resolve this issue:

Changes

1. Capture "Read More" Button Height:

   • The height of the "Read more" button is now captured during initialization to ensure accurate calculations.

2. Update Condition in reset Method:

   • The logic that determines whether the "Read more" button should be displayed has been updated to include the height of the button. This ensures the button is only shown when it makes sense.

Impact

• Improved User Experience: The "Read more" button is now only displayed when necessary, preventing unnecessary clutter and confusion.
• Correct Layout Behavior: Ensures the layout behaves as expected, with the "Read more" button enhancing usability rather than detracting from it.

Testing

To test visit a link like https://testing.openlibrary.org/books/OL8978501M/Robin_Hood

Screenshots

[CodeMaverick2]

@RayBB I have done the changes recommended by @cdrini

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 16.42%. Comparing base (ce16a79) to head (90a10f0).
Report is 399 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #9871      +/-   ##
==========================================
+ Coverage   16.06%   16.42%   +0.36%     
==========================================
  Files          90       92       +2     
  Lines        4769     4907     +138     
  Branches      832      856      +24     
==========================================
+ Hits          766      806      +40     
- Misses       3480     3565      +85     
- Partials      523      536      +13     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[RayBB]

@CodeMaverick2 I pushed up a small change so that the tests pass and shouldn't impact functionality. Otherwise this looks good.

Unfortunately, my deploys to testing seem to be failing and I'm not sure why.
However, I've deployed it to gitpod and it's working for me.

Lets just get a final check from @cdrini

[CodeMaverick2]

@RayBB Sure, @cdrini Can u check the problem

[CodeMaverick2]

@RayBB Are there any more changes that need to be done in this

[RayBB]

We are waiting for staff to review. They often do this on Monday. If not feel free to tag @cdrini again

[CodeMaverick2]

@cdrini What's the status here ?

[cdrini]

One small bug, otherwise looking great! 😊

[cdrini]

Nice this is working almost perfectly ! A few tweaks:

• We'll want to compute and store the offsetHeight of the readMore button the first time reset is called. Otherwise when the read more button is hidden and reset is called, it will switch between existing and not existing. (You can observe this by trying to resize the window on testing. You'll see the read more button appear and disappear, since sometimes the height is there and sometimes it's zero). The first time reset is called, the read more is always visible, so you can likely do something like: this.readMoreHeight = this.readMoreHeight || this.$readMoreButton.offsetHeight; at the top of this method.

• Also we don't need the ?. since it's always defined, and we don't need to default to zero since offsetHeight will always be a valid number.

• (also: Small typo, I think you mean || instead of | 😁 )

[CodeMaverick2]

Thank you for pointing that out—I’ve just fixed it!

[cdrini]

We'll need to implement that first bullet point as well!

[CodeMaverick2]

@RayBB @cdrini The tests are failing like previously not able to figure out why

[cdrini]

Nice! There's still the first point; we'll want to fetch the height value only once (see the first bullet point)

Oh the tests are failing cause it looks readMoreButton is null in the tests; You'll need to update the test so that it is not null 👍