search

openfoodfoundation / openfoodnetwork

Connect suppliers, distributors and consumers to trade local produce.
https://www.openfoodnetwork.org
GNU Affero General Public License v3.0
1.11k stars 718 forks source link

Product description not correctly truncated #10685

Open filipefurtad0 opened 1 year ago

filipefurtad0 commented 1 year ago

Description

Relates to https://github.com/openfoodfoundation/openfoodnetwork/issues/10537.

If a product description is set without any line breaks, then the three dots ... are not displayed correctly when truncating it in the shopfront.

EDIT

The text is incorrectly truncated not only in width but also in length, as discussed here.

Expected Behavior

A long product description should be truncated correctly (even if it has no line breaks).

Actual Behaviour

If a product description is set without any line breaks, then the three dots ... are not displayed correctly when truncating it in the shopfront.

Steps to Reproduce

As admin

  1. Log in as an enterprise shop and create shipping/payment methods, and then create two products (1. and 2.) and edit the descriptions respectively:

  2. Incorrectly truncated text in width: Set Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis metus diam, eget scelerisque nibh auctor non. Vestibulum tempor non dolor id luctus. as a product description.

  3. Incorrectly truncated text in length: Set <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis metus diam, eget scelerisque nibh auctor non.</div><p><br/></p><p>Vestibulum tempor non dolor id luctus.<br/></p><p><br/></p> as a product description.

  4. Create an order cycle and add the the two products to it. If the order cycle is open, these should be visible in the shopfront. More info on the userguide.

As customer

  1. Visit the shopfront: notice the inconsistent text truncation both in width and length

Please note: this scenario reproduced the S2 regression and requires manual testing of PRs, for this issue.

Animated Gif/Screenshot

Incorrect truncation in width: image

Incorrect truncation in length: image

Workaround

Add line-breaks to your product description. Details here.

Severity

bug-s3: a feature is broken but there is a workaround

Your Environment

Possible Fix

RachL commented 1 year ago

I'm lowering this to S4 considering https://github.com/openfoodfoundation/openfoodnetwork/issues/10537 was only an s4.

sumedhavs commented 1 year ago

Hi, I am newer to this project and was having trouble replicating this locally.

Attached first is how I found this issue on the shopfront as a customer: ActualWebsite

Attached second and below is the farthest I got to replicated it locally. I wasn't able to find a way to add the description and add it to an open OC which I think means an order cycle? Any help would be appreciated! LocalWebsite

filipefurtad0 commented 1 year ago

Hey @sumedhavs , welcome :tada:

OC which I think means an order cycle?

Yes - I've updated the description above, with more detailed steps, on how to reproduce the issue. I hope this helps!

sumedhavs commented 1 year ago

Thank you so much, I was able to replicate it! I can work on this issue :)

sumedhavs commented 1 year ago

Just submitted a Pull Request for this issue, https://github.com/openfoodfoundation/openfoodnetwork/pull/10721. Appreciate if you can review at your earliest convenience!

dacook commented 1 year ago

It looks like this was basically done in the attached PR, but a browser (capybara) spec needs adjusting to cater for this.

filipefurtad0 commented 2 months ago

Re-opening this one, as per #12694.