search

clevercanary / data-browser

Apache License 2.0
2 stars 0 forks source link

Refine read more functionality #71

Open MillenniumFalconMechanic opened 2 years ago

MillenniumFalconMechanic commented 2 years ago

TBD.

frano-m commented 2 years ago

Some notes on the Description Read More:

Image

When resizing the browser from small (mobile size), it is expected the description text will adjust to show more characters. The Read More is positioned inline, and after the ellipsis. To achieve this the following structure is necessary:

<div>A comprehensive cellular anatomy of normal human prostate is essential for solving the cellular origins of benign prostatic hyperplasia and prostate cancer. The tools used to analyze the contribution of individual cell types are not robust. We provide a cellular... <button>Read More</button></div>

We will not be able to use css line clamp because the button needs to be inline (any line clamp will truncate the button). We will need to calculate onResize how many chars to display, taking into consideration the need to display the ellipsis and the Read More text.

When the breakpoint becomes desktop we will no longer need to calculate the displayable chars, css line clamp is utilised and the structure will change to:

<div>A comprehensive cellular anatomy of normal human prostate is essential for solving the cellular origins of benign prostatic hyperplasia and prostate cancer. The tools used to analyze the contribution of individual cell types are not robust. We provide a cellular...</div>
<button>Read More</button>

Image